/* The palette and the primitives every page shares.
   One vocabulary for the auth pages and the workspace, so an account page and the
   module it belongs to read as one product rather than two. Anything new belongs
   in these names. */
:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --ink: #14202b;
  --muted: #5b6b7a;
  --faint: #8b9aa8;
  --line: #dde3ea;
  --line-2: #eaeef3;
  --col: #eef2f6;         /* the quiet fill behind a chip, a track, a header */
  --accent: #1f5fa8;      /* agilentics blue */
  --accent-soft: #e8f0fa;
  --done: #16794a;
  --warn: #b45309;
  --error: #b3261e;
  --shadow: 0 1px 2px rgba(20,32,43,.08), 0 2px 10px rgba(20,32,43,.05);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
     color: var(--faint); margin: 1rem 0 .35rem; }
p { margin: 0 0 .7rem; }
code { font-family: var(--mono); font-size: .88em; background: var(--col);
       padding: .1em .35em; border-radius: 4px; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--error); }
.lede { color: var(--muted); margin-bottom: 1.4rem; max-width: 62ch; }

/* A button that reads as a link. For an action that belongs in running text but
   must POST, where an <a href> would be the wrong element. */
.linklike {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent);
}
.linklike:hover { text-decoration: underline; }
.linklike:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* --- the simple chrome the auth pages wear -------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .7rem 1.25rem;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.topbar .brand {
  display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--ink);
}
.topbar .brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: 1.25rem; margin-left: auto; }
.topbar nav a { color: var(--muted); font-size: .88rem; }
.topbar nav a:hover { color: var(--accent); text-decoration: none; }

.logo {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 800;
}

.content { max-width: 880px; margin: 2rem auto; padding: 0 1.25rem; }

/* --- surfaces -------------------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.15rem 1.35rem; margin: 0 0 1.1rem;
}
.auth-card { max-width: 360px; margin: 5rem auto; }

.notice {
  background: #fff8e6; border: 1px solid #f0d98a; color: #6b5900;
  border-radius: 8px; padding: .75rem 1rem; margin: .75rem 0;
}
.notice.error-notice {
  background: #fdecea; border-color: #f3b5ad; color: #7a1b14;
}

/* --- forms ----------------------------------------------------------------- */
form label { display: block; margin: .6rem 0; font-size: .9rem; color: var(--muted); }
form input, form textarea, form select {
  display: block; width: 100%; margin-top: .25rem;
  padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; background: #fff; color: var(--ink);
}
form textarea { resize: vertical; }
form label small { display: block; margin-top: .3rem; font-size: .8rem; }
form input:disabled, form select:disabled { background: #f3f5f7; color: var(--muted); }

.stack { max-width: 460px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.inline-form label { margin: 0; }
.inline-form input, .inline-form select { width: auto; min-width: 12rem; }

button, .button {
  padding: .5rem .9rem; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff; font: inherit; cursor: pointer;
  display: inline-block; text-decoration: none;
}
button:hover, .button:hover { filter: brightness(1.07); text-decoration: none; }
button:disabled { background: var(--faint); cursor: default; filter: none; }
button.secondary {
  background: transparent; color: var(--accent); border: 1px solid var(--line);
}

/* --- tables ---------------------------------------------------------------- */
table.grid { width: 100%; border-collapse: collapse; margin: .8rem 0 0; }
table.grid th, table.grid td {
  text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
table.grid th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--faint); border-bottom-color: var(--line);
}
table.grid tr.revoked td { color: var(--faint); }

.secret {
  background: #101a24; color: #d6e2ff; padding: .9rem; border-radius: 8px;
  white-space: pre-wrap; word-break: break-all; font-family: var(--mono);
  font-size: .85rem;
}

/* --- Google sign-in button + divider (auth pages) ------------------------- */
.or-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0; color: var(--faint); font-size: .8rem;
}
.or-divider::before, .or-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.google-btn {
  display: block; width: 100%; text-align: center;
  padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 6px;
  color: inherit; font-weight: 600;
}
.google-btn:hover { background: rgba(0,0,0,.03); text-decoration: none; }