/* Adea — shared tokens and primitives for the mock-ups */

:root {
  --paper: #ffffff;
  --haze: #f6f6f9;
  --fog: #eeeef3;
  --line: #e6e6ec;
  --line-2: #d9d9e2;
  --ink: #0e0e13;
  --ink-2: #34343f;
  --muted: #646471;
  --faint: #9a9aa6;

  /* Brand: navy. (Variables keep the old --cobalt names so every file follows.) */
  --navy: #13284f;
  --cobalt: #1c3a6e;
  --cobalt-ink: #13284f;
  --cobalt-soft: #e9eef7;
  --cobalt-light: #a9badb;
  --bar-2: #c4cfe3;
  --mark: #dce5f4;
  --mark-deep: #c9d6ee;

  --ok: #0a7a45;
  --ok-soft: #e4f6ec;
  --warn: #9a5200;
  --warn-soft: #fff1dc;
  --bad: #c42b22;
  --bad-soft: #fdebea;

  --display: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ui: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-win: 22px;
  --r-card: 18px;
  --r-field: 14px;
  --r-sm: 10px;

  --shadow-soft: 0 1px 2px rgb(14 14 19 / .05), 0 18px 40px -18px rgb(14 14 19 / .18);
  --shadow-win: 0 0 0 1px rgb(14 14 19 / .06), 0 2px 4px rgb(14 14 19 / .04), 0 50px 100px -40px rgb(14 14 19 / .30);
  --shadow-pop: 0 0 0 1px rgb(14 14 19 / .06), 0 24px 60px -20px rgb(14 14 19 / .35);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-snap: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
  border-radius: 6px;
}

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: -.01em; }

/* The highlighter: the brand's signature. Reasons get marked like on paper. */
.mark {
  background-image: linear-gradient(100deg, transparent 0 .5%, var(--mark) 1.5% 98.5%, transparent 99.5%);
  background-repeat: no-repeat;
  background-position: 0 60%;
  background-size: 0% 78%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .08em;
  margin: 0 -.08em;
  border-radius: .18em;
  transition: background-size 900ms var(--ease-out);
}
.mark.on, .on .mark, .is-active .mark { background-size: 100% 78%; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.logo-mark {
  width: 22px; height: 22px; flex: none; background: var(--navy); position: relative;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M.8%2022.5%209.7%201.5h3.1L4.4%2022.5Z%22/%3E%3Cpath%20d%3D%22M13.9%206.9%2015.6%202.8l7.6%2019.7h-3.6Z%22/%3E%3Cpath%20d%3D%22M7.4%2015.6h9.3l1.2%203H6.2Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M.8%2022.5%209.7%201.5h3.1L4.4%2022.5Z%22/%3E%3Cpath%20d%3D%22M13.9%206.9%2015.6%202.8l7.6%2019.7h-3.6Z%22/%3E%3Cpath%20d%3D%22M7.4%2015.6h9.3l1.2%203H6.2Z%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.logo-mark::after { content: none !important; }
.logo-word { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -.04em; line-height: 1; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px; border: 0;
  font-weight: 550; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: transform 200ms var(--ease-snap), background 200ms var(--ease-snap), box-shadow 200ms var(--ease-snap);
}
.btn:active { transform: scale(.97); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #24242e; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { background: var(--haze); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-xs { height: 30px; padding: 0 11px; font-size: 13px; gap: 6px; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 999px; border: 0; background: var(--haze); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background 200ms var(--ease-snap), box-shadow 200ms var(--ease-snap), transform 380ms var(--ease-spring);
}
.chip:hover { background: var(--fog); }
.chip svg { width: 14px; height: 14px; opacity: .6; }
.chip.is-assume { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip.is-pop { transform: scale(1.06); }

kbd, .kbd {
  font-family: var(--mono); font-size: 11.5px; line-height: 1; padding: 4px 6px; border-radius: 6px;
  background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 0 var(--line-2);
}

/* Status pills (only where they carry state) */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-learn { background: var(--cobalt-soft); color: var(--cobalt-ink); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }

/* Spinner + check used by agent steps */
.spin {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-2); border-top-color: var(--cobalt);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.check {
  width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--ink); position: relative;
  animation: pop 380ms var(--ease-spring);
}
.check::after {
  content: ""; position: absolute; left: 5px; top: 3.5px; width: 4px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Shimmer skeleton */
.skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--fog) 0%, var(--haze) 40%, var(--fog) 80%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Caret */
.caret { display: inline-block; width: 2px; height: 1.15em; background: var(--cobalt); vertical-align: -.2em; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .caret { animation: none; }
}

/* ---------- Liquid glass ----------
   Translucent, blurred, saturated surfaces with a specular top edge and a soft sheen.
   Glass needs something behind it: use .ambient on a page/section for soft navy-tinted light. */
:root {
  --glass-bg: rgb(255 255 255 / .58);
  --glass-bg-strong: rgb(255 255 255 / .74);
  --glass-blur: blur(22px) saturate(1.9);
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .35), inset 0 0 0 1px rgb(255 255 255 / .55);
  --glass-rim: 0 0 0 1px rgb(19 40 79 / .07);
  --glass-shadow: 0 10px 34px -14px rgb(19 40 79 / .32), 0 2px 6px -2px rgb(19 40 79 / .08);
}
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-rim), var(--glass-shadow);
  isolation: isolate;
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(140deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / .08) 38%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / .18) 100%);
}
.glass-strong { background: var(--glass-bg-strong); }
.glass-dark {
  background: rgb(14 18 32 / .55); color: #fff;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .1), 0 10px 30px -12px rgb(0 0 0 / .45);
}
.ambient {
  background:
    radial-gradient(40% 50% at 12% 8%, rgb(186 205 240 / .55), transparent 70%),
    radial-gradient(35% 45% at 92% 18%, rgb(214 206 245 / .45), transparent 70%),
    radial-gradient(45% 55% at 70% 92%, rgb(190 220 238 / .40), transparent 70%),
    #f7f8fb;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-bg-strong); }
}