/* Ported verbatim from the TS admin app's app/globals.css (phase 02, task
   8.1). Plain CSS, no framework (spec: "NO tailwind, NO component library").
   App-area design system mirrors the heybob.ai marketing site so the
   sign-in moment feels like the same product.

   Scoped to its own logical asset name ("workspace", not "application")
   and its own layout (app/views/layouts/workspace.html.erb) rather than
   folded into app/assets/stylesheets/application.css: Propshaft's
   `stylesheet_link_tag :app` (used by the operator console's shared
   layout) bulk-includes every .css file found anywhere under app/assets,
   regardless of which layout asks for it. Had this file kept the manifest
   name, it would have been swept into the operator layout too and
   restyled bare elements (body, table, a, button, h1) that operator's
   inline-styled views never override. The operator layout's own
   stylesheet_link_tag call was narrowed to an explicit "application" to
   close that gap -- see application.html.erb. */

/* Everything below is wrapped in @layer legacy (#412).

   Tailwind's utilities live in `@layer utilities`. This file was
   unlayered, and per the cascade-layers spec UNLAYERED CSS BEATS LAYERED
   CSS regardless of specificity, so a plain `a { color: ... }` here won
   against a `text-espresso` utility on the same element. That is not a
   specificity fight a converted page can win by being more specific; the
   only ways out are `!important` on every utility, or degrading the HTML
   so these selectors stop matching, or this.

   Both of those were tried during the migration and both were wrong: the
   first spread `!` modifiers across a converted page, the second replaced
   an `<h1>` with a `<p role="heading">` to escape an `h1` rule. Naming a
   layer costs one line and makes every remaining conversion a plain
   matter of writing utilities.

   The order is declared in app/assets/tailwind/application.css, which the
   layout loads first: `@layer legacy, theme, base, components, utilities`.
   Legacy is lowest, so a Tailwind utility always wins, and an unconverted
   page is unaffected because it has no utilities on it to win.

   This whole file is deleted when the last view converts, and the layer
   goes with it. */
@layer legacy {


/* ---------- design tokens ---------- */
:root {
  color-scheme: light;
  --border: #d9dce1;
  --muted: #7a6350;
  --muted-2: #9a8570;
  --text: #1a1d23;
  --accent: #2563eb;
  --danger: #b91c1c;
  --bg-subtle: #f5f6f8;

  --cream: #fff6ec;
  --cream-dim: #fdebd7;
  --espresso: #1b1109;
  --orange: #ff6a1f;
  --orange-deep: #c4460b;
  --amber: #ffb03a;
  --coral: #f53d5a;
  --ok: #1e9e6a;
  --line: rgba(27, 17, 9, 0.08);
  --line-2: rgba(27, 17, 9, 0.14);
  --grad-hero: radial-gradient(
    145% 105% at 52% -4%,
    #ffd9a0 0%,
    #ffb03a 30%,
    #ff6a1f 62%,
    #c22a12 85%,
    #6e1005 100%
  );
  --grad-card: radial-gradient(108% 100% at 50% 0%, rgba(255, 217, 160, 0.28) 0%, rgba(255, 217, 160, 0) 100%),
    radial-gradient(210% 116% at 39.65% 0%, #ff9a44 0%, #ff6a1f 36%, #6e1005 100%);
  --r-section: 36px;
  --r-md: 18px;
  --r-sm: 14px;
  --nav-height: 88px;
  --font: "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--espresso);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-height);
}

a {
  color: var(--orange-deep);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

img,
svg {
  max-width: 100%;
}

/* ---------- top nav ---------- */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--cream);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 920px) {
  .topnav {
    height: 72px;
  }
  body {
    padding-top: 72px;
  }
}

.topnav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .topnav-inner {
    padding: 0 40px;
  }
}

.wordmark {
  font-family: var(--font);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--espresso);
  text-decoration: none;
}
.wordmark .dot {
  background: linear-gradient(115deg, var(--amber), var(--orange), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.app-links {
  display: flex;
  gap: 4px;
  margin-left: 28px;
  align-items: center;
}
.app-links a {
  color: var(--espresso);
  opacity: 0.7;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 8px;
  transition: background-color 0.15s;
}
.app-links a:hover {
  background: rgba(27, 17, 9, 0.06);
  opacity: 1;
}
@media (max-width: 920px) {
  .app-links {
    display: none;
  }
}

.topnav-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topnav-cta .signout {
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.topnav-cta .signout:hover {
  color: var(--espresso);
}

/* ---------- marketing buttons (mirrors web/index.html) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font);
  height: 52px;
  padding: 0 30px;
  transition:
    opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn-sm {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
}
.btn-lg {
  height: 60px;
  padding: 0 36px;
  font-size: 17px;
}
.btn-primary-dark {
  background: var(--espresso);
  color: #fff;
  border-color: var(--espresso);
}
.btn-primary-dark:hover {
  opacity: 0.88;
}
.btn-on-dark {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.btn-on-dark:hover {
  background: rgba(255, 255, 255, 0.32);
}
.btn-on-light {
  background: #fff;
  color: var(--espresso);
  border-color: #fff;
}
.btn-on-light:hover {
  opacity: 0.88;
}
.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.65);
}
.btn-ghost-light {
  background: transparent;
  border-color: var(--line-2);
  color: var(--espresso);
}
.btn-ghost-light:hover {
  background: rgba(27, 17, 9, 0.05);
}

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--cream-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 18px;
}

/* ---------- main column for authenticated pages ---------- */
.main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
@media (min-width: 768px) {
  .main {
    padding: 40px 56px 80px;
  }
}

h1,
h2,
h3 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

/* Admin page typography scales nicely against the cream background.
   These are kept simple -- the operator pages have their own clean look
   that contrasts against the warm shell without clashing. */
h1 {
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 0 0 8px;
}
h2 {
  font-size: 1.1rem;
  margin-top: 2rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

th,
td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

th {
  color: var(--muted);
  font-weight: 600;
  background: var(--cream-dim);
}

code {
  background: var(--bg-subtle);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

/* In-button admin control: link-styled button matches the marketing button
   language, but stays compatible with form rows that pre-date this redesign. */
/* input[type="submit"] belongs here too. Rails renders `f.submit` as an
   input, not a button, so every Rails-generated save button on every page
   has always fallen through this rule to the browser default while the
   handwritten `<button>` next to it got the pill. Two controls that do the
   same thing, looking like they came from different applications. Noticed
   on the Models page redesign, where a native "Save allowed" sits a few
   pixels from a pill "Apply to selected". */
.button,
button,
input[type="submit"] {
  display: inline-block;
  border: 1px solid var(--line-2);
  background: #fff;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--espresso);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font);
  transition:
    border-color 0.15s,
    color 0.15s,
    background-color 0.15s;
}
.button:hover,
button:hover,
input[type="submit"]:hover {
  border-color: var(--orange);
  color: var(--orange-deep);
  background: #fff;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.error {
  color: var(--danger);
}

.connection-empty {
  margin-top: 1rem;
  padding: 2.5rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.connection-empty h2 {
  margin: 0 0 0.4rem;
}

.connection-empty p {
  margin: 0;
  color: var(--muted);
}

.connections-table-wrap {
  overflow-x: auto;
}

.status {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--cream-dim);
  font-size: 0.8rem;
  font-weight: 600;
}

.status-succeeded {
  background: #dcfce7;
}
.status-failed {
  background: #fee2e2;
}
.status-running,
.status-queued,
.status-waiting_approval {
  background: #fef3c7;
}
.status-canceled {
  background: var(--bg-subtle);
}

/* legacy login card -- kept for any code path that still mounts it. */
.login-card {
  max-width: 360px;
  margin: 4rem auto;
  text-align: center;
}

.run-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin-top: 0.75rem;
}
.run-meta dt {
  color: var(--muted);
}
.run-meta dd {
  margin: 0;
}

.timeline {
  list-style: none;
  padding: 0;
  margin-top: 0.75rem;
  border-left: 2px solid var(--line-2);
}
.timeline-item {
  padding: 0.4rem 0 0.4rem 1rem;
  margin-left: -1px;
}
.timeline-type {
  display: inline-block;
  min-width: 8rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
}
.timeline-error .timeline-text {
  color: var(--danger);
}
.timeline-debug summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
}
.timeline-debug-body {
  margin: 0.5rem 0 0;
  padding: 0.6rem;
  max-height: 24rem;
  overflow: auto;
  font-size: 0.8rem;
  background: var(--line-2);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 420px;
  margin-top: 0.75rem;
}
.form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.form input,
.form textarea,
.form select {
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--espresso);
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--orange);
  outline: none;
}

.hint {
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 640px;
}

/* `f.submit` renders an <input type="submit">, not a <button>, so a rule
   naming only `button` left every Rails-generated save button stretched
   to the full width of its flex column. Both, now. */
.form button,
.form input[type="submit"] {
  align-self: flex-start;
  width: auto;
}

.usage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
}
.usage-card {
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 1rem 1.5rem;
  min-width: 140px;
  background: #fff;
}
.usage-kind {
  color: var(--muted);
  font-size: 0.85rem;
}
.usage-total {
  font-size: 1.6rem;
  font-weight: 700;
}

/* ---------- login page: marketing landing ---------- */
.login-shell {
  background: var(--cream);
}

.login-hero {
  background: var(--grad-hero);
  border-radius: 0 0 var(--r-section) var(--r-section);
  padding: 96px 0 200px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
@media (max-width: 920px) {
  .login-hero {
    padding: 56px 0 120px;
  }
}
.login-hero h1 {
  color: #fff;
  margin: 0 auto 22px;
  max-width: 16em;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.06;
  text-shadow: 0 4px 26px rgba(70, 10, 0, 0.32);
}
.login-hero .hero-sub {
  font-size: 19px;
  line-height: 1.5;
  max-width: 36em;
  margin: 0 auto 34px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 14px rgba(70, 10, 0, 0.25);
}
.login-hero .hero-sub strong {
  font-weight: 700;
}
.login-hero .cta-row {
  justify-content: center;
  margin-bottom: 18px;
}
.login-hero .hero-microcopy {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 26px;
}
.login-hero .hero-microcopy a {
  color: #fff;
  text-decoration: underline;
}
.trust-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-chips span {
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 8px 16px;
  color: #fff;
}

.hero-mock-wrap {
  margin-top: -160px;
  position: relative;
  z-index: 2;
}
@media (max-width: 920px) {
  .hero-mock-wrap {
    margin-top: -70px;
  }
}
.demo-mock {
  background: #fff;
  border-radius: 28px;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 30px 70px -32px rgba(60, 10, 0, 0.35);
  display: grid;
  grid-template-columns: 190px 1fr;
  color: var(--espresso);
  text-align: left;
  font-size: 14.5px;
}
@media (max-width: 920px) {
  .demo-mock {
    grid-template-columns: 1fr;
  }
  .demo-mock .side {
    display: none;
  }
}
.demo-mock .side {
  background: var(--espresso);
  color: rgba(255, 255, 255, 0.62);
  padding: 20px 0;
  font-size: 13px;
}
.demo-mock .side .ws {
  color: #fff;
  font-weight: 700;
  padding: 2px 18px 14px;
  letter-spacing: -0.01em;
}
.demo-mock .side .ch {
  padding: 6px 18px;
}
.demo-mock .side .ch.on {
  background: rgba(255, 106, 31, 0.2);
  color: var(--amber);
  border-radius: 0 999px 999px 0;
  margin-right: 14px;
}
.demo-mock .chat {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.msg {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
}
.msg .av {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  flex: none;
}
.av.human {
  background: #4a6d8c;
}
.av.bob {
  background: linear-gradient(135deg, var(--amber), var(--orange));
}
.msg .who {
  font-weight: 700;
  font-size: 14px;
}
.msg .who time {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  margin-left: 8px;
}
.msg p {
  margin-top: 3px;
  line-height: 1.5;
}
.msg .at {
  color: var(--orange-deep);
  font-weight: 700;
}
.approval-card {
  margin-top: 10px;
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--amber);
  border-radius: 12px;
  padding: 14px 16px;
  max-width: 34em;
  background: #fffdf9;
  color: var(--espresso);
}
.approval-card .a-head {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 700;
}
.approval-card .a-act {
  font-weight: 700;
}
.approval-card .a-btns {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.approval-card .a-btns span {
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
}
.approval-card .ok {
  background: var(--ok);
  color: #fff;
}
.approval-card .no {
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.approved-line {
  font-size: 13px;
  color: var(--ok);
  font-weight: 700;
  margin-top: 8px;
}
.receipt-line {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.9;
  border-top: 1px dashed var(--line-2);
  padding-top: 8px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  max-width: 34em;
}
.receipt-line b {
  color: var(--espresso);
  font-weight: 700;
}
.demo-caption {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 20px;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.demo-mock.animate [data-anim] {
  opacity: 0;
  animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0s) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .demo-mock.animate [data-anim] {
    opacity: 1;
    animation: none;
  }
}

/* ---------- value-prop band (mirrors web/index.html) ---------- */
.value-prop {
  text-align: center;
  padding: 96px 0 24px;
}
@media (max-width: 920px) {
  .value-prop {
    padding: 64px 0 16px;
  }
}
.rotor-line {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 44px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--espresso);
  max-width: 19em;
  margin: 0 auto 30px;
}
.rotor-clause {
  color: var(--orange-deep);
  display: inline-block;
  transition: opacity 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .rotor-clause {
    transition: none;
  }
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0;
  margin: 0;
}
.checklist li {
  padding-left: 36px;
  position: relative;
  font-size: 16px;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--cream-dim);
  color: var(--orange-deep);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
}

/* ---------- footer band ---------- */
.login-footer {
  background: var(--cream);
  padding: 64px 0 32px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.login-footer .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .login-footer .wrap {
    padding: 0 40px;
  }
}
.login-footer a {
  color: var(--espresso);
  text-decoration: none;
  font-weight: 600;
  margin: 0 10px;
}
.login-footer a:hover {
  color: var(--orange-deep);
}

/* ---------- shared layout helpers ---------- */
.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 640px) {
  .wrap {
    padding: 0 40px;
  }
}
@media (min-width: 768px) {
  .wrap {
    padding: 0 56px;
  }
}

/* ---------- operator overview tiles ---------- */
.overview-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 16px 0 32px;
}
.tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.tile-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.tile-sub {
  font-size: 13px;
  color: var(--muted-2);
  margin-top: 4px;
}

/* Centered sign-in card -- /login and /operator-login (see LoginShell). */
.auth-shell {
  min-height: calc(100vh - var(--nav-height));
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--cream);
}
.auth-card {
  width: 100%;
  min-width: 0;
  max-width: 380px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 40px 32px;
}
.auth-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 12px 0 6px;
  color: var(--text);
}
.auth-sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.btn-block {
  width: 100%;
}
.btn-disabled {
  background: var(--bg-subtle);
  color: var(--muted-2);
  border-color: var(--line);
  cursor: not-allowed;
  pointer-events: none;
}
.auth-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted-2);
}
/* Operator form sits inside the centered card -- left-align its labels/inputs. */
.auth-form {
  text-align: left;
  margin-top: 4px;
}

/* ---------- Models page (#397, #398) ---------- */
/* Converted to Tailwind utilities in the view itself (#412). Nothing left
   here: every rule that used to live under this header only served
   app/views/models/index.html.erb, and that page no longer references
   any of these classes. */

}