/* Tagmend UI. Tokens are the landing page's — one palette across marketing and product.
   Source of truth: resources/views/landing.blade.php. Change them there and here together. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* landing-page names, so markup copied from there works unchanged */
  --bg:#07131B; --bg-2:#091821;
  --surface:#0C1C27; --surface-2:#102431; --surface-3:#132A38;
  --border:#19303D; --border-soft:#14303d;
  --text:#F5F3EE; --muted:#8999A3; --muted-2:#62737D;
  --orange:#F86936; --orange-2:#FA8558;
  --mint:#77D7AE; --amber:#F2B95F; --red:#F47768; --blue:#6CA7D9;
  --shadow:0 30px 80px rgba(0,0,0,.28);
  --max:1180px;

  /* app aliases, kept so existing views need no edits */
  --panel:var(--surface); --panel-2:var(--surface-2);
  --line:var(--border); --line-soft:var(--border-soft);
  --ink:#D8E0E5; --ink-strong:var(--text); --dim:var(--muted); --faint:var(--muted-2);
  --sig:var(--orange); --sig-dim:rgba(248,105,54,.10);
  --ok:var(--mint); --ok-dim:rgba(119,215,174,.10);
  --warn:var(--amber); --warn-dim:rgba(242,185,95,.10);
  --bad:var(--red); --bad-dim:rgba(244,119,104,.10);
  --r:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--sig);text-underline-offset:2px}
h1,h2,h3{color:var(--ink-strong);letter-spacing:-.018em;margin:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dim{color:var(--dim)} .faint{color:var(--faint)}

/* shell */
.top{border-bottom:1px solid var(--line);background:var(--panel)}
.top-in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px;height:56px}
.brand{font-weight:700;letter-spacing:-.03em;font-size:17px;color:var(--ink-strong);text-decoration:none}
.brand span{color:var(--sig)}
.nav{display:flex;gap:20px;margin-left:8px;flex:1}
.nav a{color:var(--dim);text-decoration:none;font-size:14px;padding:18px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink-strong);border-bottom-color:var(--sig)}
.who{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:12px}
.wrap{max-width:1120px;margin:0 auto;padding:30px 24px 90px}
.head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.head h1{font-size:24px}
.head .sub{color:var(--dim);font-size:14px;margin-top:3px}
.head .spacer{flex:1}

/* surfaces */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px;overflow:hidden}
.card > h2{font:11px/1 ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  padding:14px 18px;border-bottom:1px solid var(--line);margin:0}
.card .body{padding:18px}
.grid{display:grid;gap:16px}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:left;font:10.5px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);padding:11px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 18px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--panel-2)}
.empty{padding:30px 18px;text-align:center;color:var(--dim)}

/* controls */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--sig);color:#1a0f06;border:0;
  padding:10px 16px;border-radius:10px;font:600 14px/1 inherit;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--dim);filter:none}
.btn.sm{padding:7px 11px;font-size:13px}
.btn.danger{background:transparent;border:1px solid var(--bad);color:var(--bad)}
label{display:block;font:11px/1 ui-monospace,monospace;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);margin:0 0 7px}
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{
  width:100%;padding:11px 13px;background:#0d1a26;border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font:14px/1.4 inherit}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--sig)}
.field{margin-bottom:16px}
.err{color:var(--bad);font-size:13px;margin-top:6px}
.note{font-size:13px;color:var(--dim);line-height:1.5}

/* bits */
.pill{display:inline-block;font:10.5px/1 ui-monospace,monospace;padding:4px 7px;border-radius:3px}
.p-ok{background:var(--ok-dim);color:var(--ok)}
.p-healed{background:var(--sig-dim);color:var(--sig)}
.p-review,.p-warning{background:var(--warn-dim);color:var(--warn)}
.p-broken,.p-critical,.p-silent{background:var(--bad-dim);color:var(--bad)}
.p-absent,.p-info{background:var(--panel-2);color:var(--dim)}
.score{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.bar{width:78px;height:6px;border-radius:3px;background:#1b2f40;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px}
.stat b{display:block;font:22px/1.2 ui-monospace,monospace;color:var(--ink-strong)}
.stat span{font:10.5px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;display:grid;gap:8px}
pre.snippet{background:#0a1621;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0;
  overflow-x:auto;font:12.8px/1.65 ui-monospace,monospace;color:var(--ink);white-space:pre-wrap;word-break:break-all}
.flash{background:var(--ok-dim);border:1px solid var(--ok);color:var(--ok);padding:11px 16px;
  border-radius:10px;margin-bottom:18px;font-size:14px}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:40px 20px}
.auth-card{width:100%;max-width:400px}
.auth-card .brand{justify-content:center;margin-bottom:10px;font-size:24px}
.auth-card .tag{text-align:center;color:var(--dim);font-size:14px;margin:0 0 26px}
.auth-card .card{padding:24px}
.auth-alt{text-align:center;margin-top:18px;font-size:14px;color:var(--dim)}


/* Brand mark, ported from the landing page so product and marketing agree. */
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em}
/* The accent falls on "mend": the half no competitor can claim. "tag" is the
   category noun they all share. Matches docs/brand/logo-concepts.png. */
.brand .wordmark{display:inline}
.brand .wm{color:var(--orange)}
.brand-mark{width:28px;height:28px;display:grid;place-items:center;flex:none}
.brand-mark svg{display:block;width:28px;height:28px}