/* Pi Pollux workspace, in the visual language of Precise Spotlight.

   Spotlight is a Drupal site on a Bootstrap admin theme: a dark left menu with the logo
   at the top, a top bar carrying the section navigation, a content page of cards and
   tables, and a copyright footer. The tokens below were read from the live theme on
   2026-09-07 (Nunito, body #343a40, cards #37404a, borders #464f5b, primary #004060,
   muted #8391a2, 4px radii), so Pollux reads as a section of Spotlight rather than as
   a separate product. Every selector the workspace script renders is kept. */

@font-face {
  font-family: Nunito;
  src: url("/static/assets/Nunito-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Nunito;
  src: url("/static/assets/Nunito-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Nunito;
  src: url("/static/assets/Nunito-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -- Tokens ------------------------------------------------------------------------- */

:root {
  color-scheme: dark;
  --font: Nunito, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --mono: Consolas, "SFMono-Regular", Menlo, monospace;

  --body-bg: #343a40;
  --ink: #ffffff;
  --emphasis: #dee2e6;
  --text: #d5dbe1;
  --muted: #8391a2;
  --line: #464f5b;
  --soft-line: #3e4753;
  --card: #37404a;
  --card-2: #404954;
  --input-bg: #404954;
  --paper: var(--card);
  --canvas: var(--body-bg);

  --menu-bg: #3a444e;
  --menu-item: #8391a2;
  --menu-hover: #bccee4;
  --menu-active: #ffffff;
  --menu-line: rgba(255, 255, 255, 0.07);
  --menu-active-bg: rgba(255, 255, 255, 0.05);

  --topbar-bg: #3a444e;
  --topbar-item: #8391a2;
  --topbar-line: #464f5b;

  --primary: #004060;
  --primary-hover: #003b59;
  --primary-rgb: 0, 64, 96;
  --secondary: #6c757d;
  --secondary-hover: #5c636a;
  --link: #668ca0;
  --accent: #e99300;
  --accent-soft: rgba(233, 147, 0, 0.16);
  --green: #0acf97;
  --green-soft: rgba(10, 207, 151, 0.16);
  --amber: #dd9933;
  --amber-soft: rgba(221, 153, 51, 0.16);
  --red: #fa5c7c;
  --red-soft: rgba(250, 92, 124, 0.16);
  --blue: #39afd1;
  --blue-soft: rgba(57, 175, 209, 0.16);

  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 0 35px rgba(49, 57, 66, 0.5);
  --btn-shadow: 0 2px 6px rgba(70, 79, 91, 0.5);
  --focus-ring: 0 0 0 3px rgba(102, 140, 160, 0.3);

  --topbar-h: 56px;
  --sidebar-w: 240px;
  --panel-w: 360px;
  --footer-h: 40px;

  --map-sea: #243a4f;
  --map-land: #4d463b;
  --map-coast: #6b6250;
  --map-grid: #365069;
  --map-grid-label: #6f7d8b;
  --map-label: #dee2e6;
  --map-port-fill: #37404a;
  --map-port-stroke: #dee2e6;
  --map-fleet: #6f8496;

  font-family: var(--font);
  font-synthesis: none;
}

[data-bs-theme="light"] {
  color-scheme: light;
  --body-bg: #fafbfe;
  --ink: #313a46;
  --emphasis: #313a46;
  --text: #4b5561;
  --muted: #98a6ad;
  --line: #dee2e6;
  --soft-line: #eef2f7;
  --card: #ffffff;
  --card-2: #f1f3fa;
  --input-bg: #ffffff;

  --menu-bg: #313a46;
  --menu-item: #8391a2;
  --menu-hover: #bccee4;
  --menu-active: #ffffff;

  --topbar-bg: #ffffff;
  --topbar-item: #6c757d;
  --topbar-line: #e3eaef;

  --link: #004060;
  --shadow: 0 0 35px rgba(154, 161, 171, 0.15);
  --btn-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  --focus-ring: 0 0 0 3px rgba(0, 64, 96, 0.14);

  --map-sea: #cfe2f1;
  --map-land: #e9dfc8;
  --map-coast: #c4b18c;
  --map-grid: #b3cbe0;
  --map-grid-label: #93a3b1;
  --map-label: #313a46;
  --map-port-fill: #ffffff;
  --map-port-stroke: #4a5561;
  --map-fleet: #8fa6b8;
}

/* -- Base --------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--body-bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

body {
  overflow: hidden;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--link);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 700;
}

strong {
  color: var(--ink);
  font-weight: 700;
}

/* Spotlight's text field. Reused by every input in the workspace. */
.form-control,
.field input,
.login-form input,
.memory-form input,
.composer-shell textarea,
#artifact-editor {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
}

.form-control::placeholder,
.field input::placeholder,
.memory-form input::placeholder,
.composer-shell textarea::placeholder {
  color: var(--muted);
}

.form-control:hover,
.field input:hover,
.login-form input:hover {
  border-color: #5a6572;
}

.form-control:focus,
.field input:focus,
.login-form input:focus,
.memory-form input:focus,
.composer-shell textarea:focus,
#artifact-editor:focus {
  border-color: var(--link);
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* -- Login -------------------------------------------------------------------------- */

.login-gate {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  align-content: center;
  gap: 28px;
  padding: 24px;
  background:
    radial-gradient(
      circle at center,
      rgba(0, 64, 96, 0.28) 0 100px,
      rgba(0, 64, 96, 0.2) 100px 200px,
      rgba(0, 64, 96, 0.14) 200px 300px,
      rgba(0, 64, 96, 0.09) 300px 500px,
      rgba(0, 64, 96, 0.04) 500px 600px,
      transparent 600px
    ),
    var(--body-bg);
}

.login-card {
  width: min(420px, 100%);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.login-card-header {
  display: grid;
  place-items: center;
  padding: 34px 24px;
  background: var(--primary);
}

.login-card-header img {
  height: 22px;
}

.login-card-body {
  padding: 26px 24px 24px;
}

.login-card-body .page-title {
  margin: 0 0 6px;
  text-align: center;
}

.login-explainer {
  margin: 0 auto 22px;
  max-width: 320px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form label {
  display: grid;
  gap: 6px;
}

.login-form label span,
.form-label {
  color: var(--emphasis);
  font-size: 12px;
  font-weight: 600;
}

.login-form .button {
  justify-self: start;
  margin-top: 4px;
}

.login-status {
  min-height: 20px;
  margin: 14px 0 0;
  color: var(--red);
  font-size: 12px;
}

.login-footer {
  margin: 0;
  color: var(--emphasis);
  font-size: 12px;
}

/* -- Shell -------------------------------------------------------------------------- */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(520px, 1fr) var(--panel-w);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--footer-h);
  grid-template-areas:
    "sidebar topbar topbar"
    "sidebar workspace vessel"
    "sidebar footer footer";
  /* The body's height, not the viewport's: a host page may pad the top (the synthetic
     demo adds a banner there), and the footer must stay on screen regardless. */
  width: 100%;
  height: 100%;
  background: var(--body-bg);
}

/* -- Top bar: the Spotlight header bar with its section navigation ------------------ */

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  height: var(--topbar-h);
  padding: 0 18px 0 12px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-line);
  box-shadow: var(--shadow);
  z-index: 5;
}

.topbar-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 100%;
}

.topbar-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--topbar-item);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.topbar-nav-link:hover {
  color: var(--menu-hover);
}

.topbar-nav-link.is-active {
  color: var(--ink);
}

.topbar-nav-link.is-active::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  background: var(--accent);
  content: "";
}

.topbar-context {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--topbar-line);
  color: var(--topbar-item);
  font-size: 12px;
}

.context-label {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.context-divider {
  width: 1px;
  height: 18px;
  background: var(--topbar-line);
}

#topbar-route {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.environment {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 8px;
  padding: 4px 9px;
  border: 1px solid var(--topbar-line);
  border-radius: 999px;
  color: var(--topbar-item);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.environment.is-mock {
  color: var(--amber);
  border-color: rgba(221, 153, 51, 0.4);
}

.environment.is-mock .live-dot {
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

/* Header buttons in the style of Spotlight's "Search ship" and "My company data". */
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--topbar-item);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.topbar-item:hover {
  background: var(--menu-active-bg);
  color: var(--ink);
}

.topbar-item-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.topbar-item-icon-only {
  width: 34px;
  padding: 0;
  justify-content: center;
  font-size: 17px;
}

.theme-icon-sun,
.theme-icon-moon {
  display: none;
  line-height: 1;
}

[data-bs-theme="dark"] .theme-icon-sun,
[data-bs-theme="light"] .theme-icon-moon {
  display: inline;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--topbar-line);
}

.user-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.own-fleet-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid var(--primary);
  vertical-align: middle;
}

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.logout-button {
  border: 0;
  background: transparent;
  color: var(--topbar-item);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.logout-button:hover {
  color: var(--ink);
}

/* -- Buttons: Spotlight's btn family ------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.button-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.button-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.button-secondary {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}

.button-secondary:hover {
  background: var(--secondary-hover);
  border-color: var(--secondary-hover);
}

.button-success {
  background: var(--green);
  border-color: var(--green);
  color: #0b2b21;
}

.button-success:hover {
  background: #09b985;
  border-color: #09b985;
}

.button-danger {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
  box-shadow: none;
}

.button-danger:hover {
  background: var(--red-soft);
}

.button-large {
  min-height: 38px;
  padding: 0 18px;
  font-size: 13px;
}

/* -- Left menu: Spotlight's leftside menu with the logo at the top ------------------- */

.deal-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--menu-bg);
  color: var(--menu-item);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 6;
}

.sidebar-logo {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 18px;
  border-bottom: 1px solid var(--menu-line);
  color: var(--menu-active);
  text-decoration: none;
}

.sidebar-logo img {
  height: 22px;
}

.sidebar-logo-product {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.side-nav {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.sidebar-section {
  padding: 14px 10px 16px;
}

.sidebar-section + .sidebar-section {
  border-top: 1px solid var(--menu-line);
}

.sidebar-section-grow {
  flex: 1;
  min-height: 230px;
}

/* The menu group title, as Spotlight sets "NAVIGATION" and "HELP SECTION". */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 10px;
  color: var(--menu-item);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--menu-hover);
  font-size: 10px;
  letter-spacing: 0;
}

.deal-list {
  display: grid;
  gap: 2px;
}

.deal-row {
  position: relative;
}

.deal-item {
  width: 100%;
  padding: 9px 30px 9px 12px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--menu-item);
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.deal-item:hover {
  background: var(--menu-active-bg);
  color: var(--menu-hover);
}

.deal-item.is-active {
  border-left-color: var(--accent);
  background: var(--menu-active-bg);
  color: var(--menu-active);
}

/* On subs: the deal hangs on its subjects, so the row stands out until a person states
   another stage. */
.deal-row.is-on-subs .deal-item,
.deal-row.is-on-subs .deal-item.is-active {
  border-left-color: var(--red);
  background: var(--red-soft);
}

.deal-row.is-on-subs .deal-item:hover {
  background: rgba(250, 92, 124, 0.24);
}

.deal-stage {
  flex: none;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.deal-delete {
  position: absolute;
  top: 7px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--menu-item);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.deal-delete:hover {
  background: var(--red-soft);
  color: var(--red);
}

.deal-item-top,
.deal-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deal-item-top strong {
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.deal-item-route {
  margin: 4px 0 5px;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.deal-item.is-active .deal-item-route {
  color: var(--menu-active);
}

.deal-item-bottom {
  color: var(--menu-item);
  font-size: 10.5px;
}

.mini-status {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--menu-item);
}

.mini-status.is-green { background: var(--green); }
.mini-status.is-amber { background: var(--amber); }
.mini-status.is-red { background: var(--red); }

.empty-deals {
  padding: 24px 10px;
  color: var(--menu-item);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.memory-section {
  border-top: 1px solid var(--menu-line);
}

.memory-list {
  display: grid;
  gap: 3px;
}

.memory-item p {
  margin: 0;
  padding: 7px 30px 7px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--menu-hover);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.memory-empty {
  padding: 6px 10px 4px;
  color: var(--menu-item);
  font-size: 12px;
  line-height: 1.5;
}

.memory-form {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.memory-form input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.14);
  color: var(--menu-active);
  font-size: 12px;
}

.memory-form input::placeholder {
  color: var(--menu-item);
}

.memory-form button {
  width: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.14);
  color: var(--menu-hover);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.memory-form button:hover {
  background: var(--primary);
  color: #fff;
}

/* Who sees a note: the broker alone, or the whole desk. */
.memory-scope-toggle {
  flex: none;
  width: auto;
  min-width: 44px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
}

.memory-scope-toggle.is-desk {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.memory-scope {
  display: block;
  margin: 2px 0 0 12px;
  color: var(--menu-item);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.memory-scope.is-desk {
  color: var(--accent);
}

.workspace-files {
  min-height: 0;
  border-top: 1px solid var(--menu-line);
}

.file-group {
  padding: 2px 0 0;
}

.file-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 10px;
  color: var(--menu-hover);
}

.folder-mark {
  width: 17px;
  height: 13px;
  border: 1px solid var(--menu-item);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.1);
}

.file-group-title > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.file-group-title strong {
  overflow: hidden;
  color: var(--menu-active);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-group-title small {
  color: var(--menu-item);
  font-size: 10px;
}

.file-tree {
  position: relative;
  display: grid;
  gap: 2px;
  margin-left: 17px;
  padding-left: 10px;
  border-left: 1px solid var(--menu-line);
}

.file-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--menu-item);
  text-align: left;
  cursor: pointer;
}

.file-row.is-active,
.file-row:hover {
  background: var(--menu-active-bg);
  color: var(--menu-hover);
}

.file-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  color: var(--menu-hover);
  font-size: 9px;
  font-weight: 700;
}

.file-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.file-row strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-row small {
  color: var(--menu-item);
  font-size: 10px;
}

.file-state {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--menu-item);
  font-size: 9px;
  font-weight: 700;
}

.file-state.is-ready {
  background: var(--green-soft);
  color: var(--green);
}

.file-empty {
  padding: 10px 8px;
  color: var(--menu-item);
  font-size: 12px;
  line-height: 1.5;
}

/* -- Content page ------------------------------------------------------------------- */

.workspace {
  grid-area: workspace;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--body-bg);
}

.intake-view {
  flex: 1;
  width: 100%;
  padding: 26px 0 40px;
  overflow: auto;
  /* The chat scrolls up and down only; nothing in it may add a sideways bar. */
  overflow-x: hidden;
}

.conversation-start {
  width: min(760px, calc(100% - 56px));
  margin: 0 auto;
}

/* Spotlight's page title: an h4 at 18px above the page's cards. */
.page-title,
.conversation-start h1,
.intake-header h1,
.job-header h1 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.page-title-box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
}

.card {
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.card-header h2,
.card-header h3 {
  margin: 0;
  font-size: 14px;
}

.card-body {
  padding: 20px;
}

.conversation-card {
  padding: 8px 20px 20px;
}

.intake-thread {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.intake-thread:empty {
  margin-top: 0;
}

.chat-line {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.chat-line.is-user {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.chat-line.is-user .chat-line-avatar {
  grid-column: 2;
}

.chat-line.is-user .chat-line-body {
  grid-row: 1;
  text-align: right;
}

.chat-line-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.chat-line.is-user .chat-line-avatar {
  background: var(--card-2);
  color: var(--emphasis);
}

.chat-line-body {
  max-width: 600px;
  padding-top: 1px;
}

.chat-line-body strong {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
}

.chat-line-text {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-2);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
}

/* A reply is short lines and lists, not one block: each line of the text is a
   paragraph and lines starting with "- " become a list. */
.chat-line-text p,
.chat-line-text ul {
  margin: 0 0 7px;
}

.chat-line-text p:last-child,
.chat-line-text ul:last-child {
  margin-bottom: 0;
}

.chat-line-text ul {
  padding-left: 18px;
}

.chat-line-text li + li {
  margin-top: 3px;
}

.chat-line.is-user .chat-line-text {
  background: rgba(var(--primary-rgb), 0.35);
  border-color: rgba(102, 140, 160, 0.35);
  color: var(--ink);
}

.reply-text p,
.reply-text ul {
  margin: 0 0 6px;
}

.reply-text ul {
  padding-left: 18px;
}

.prompt-suggestion {
  display: grid;
  width: 100%;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.prompt-suggestion:hover {
  border-color: var(--link);
  background: var(--card-2);
}

.prompt-suggestion span {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.prompt-suggestion strong {
  color: var(--emphasis);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* The structured intake, laid out like Spotlight's position-list form: a card with
   labels above each field and one primary button at the end. */
.structured-intake {
  width: min(840px, calc(100% - 56px));
  margin: 22px auto 0;
}

.intake-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.eyebrow,
.job-kicker {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intake-header > p:last-child,
.job-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.intake-form {
  padding: 20px 22px 22px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.form-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.form-section-heading > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.form-section-heading h2 {
  margin: 0;
  font-size: 14px;
}

.form-section-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

.vessel-heading {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.field-grid {
  display: grid;
  gap: 16px;
}

.field-grid-cargo {
  grid-template-columns: 1.4fr 1fr 1fr;
}

.field-grid-vessel {
  grid-template-columns: 1.35fr 0.65fr;
}

.field-wide {
  min-width: 0;
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field > span,
.field legend {
  padding: 0;
  color: var(--emphasis);
  font-size: 12px;
  font-weight: 600;
}

.field input {
  height: 36px;
}

.cargo-class-field {
  grid-column: span 1;
}

.segmented-control {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--input-bg);
  overflow: hidden;
}

.segmented-control label {
  display: contents;
}

.segmented-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented-control span {
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.segmented-control input:checked + span {
  background: var(--primary);
  color: #fff;
}

.form-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.mode-choice {
  display: grid;
  gap: 6px;
}

.mode-choice > span {
  color: var(--emphasis);
  font-size: 12px;
  font-weight: 600;
}

.segmented-small {
  width: 150px;
  height: 34px;
}

/* -- Job view ----------------------------------------------------------------------- */

/* The chat: the header stays at the top, the messages scroll, the composer sits below.
   What needs the broker and the audit trail open in windows from the header. */
.job-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* The two buttons hang from the sticky header into the gap to the right of the
   messages, so they stay in view while the chat scrolls and take no room from it.
   Narrower than 1600px there is no gap, and they sit at the right end of the header
   row instead. */
.job-tools {
  position: absolute;
  top: 100%;
  right: 4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 108px;
  margin-top: 10px;
}

.tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  max-width: 100%;
  padding: 0 6px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--emphasis);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
}

.tool-button:hover {
  border-color: var(--link);
  color: var(--ink);
}

/* Something is waiting: the button says so without the window being open. */
.tool-button.is-needs.has-items {
  border-color: var(--amber);
  color: var(--amber);
}

.tool-button .count {
  background: var(--amber);
  color: #1b1b1b;
  font-weight: 700;
}

.tool-button .count[hidden] {
  display: none;
}

/* A long name stays inside the column: cut with an ellipsis, never overflowing. */
.tool-button .tool-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stated on the file: the owner acts through a broker. */
.tool-button.is-on {
  border-color: var(--link);
  color: var(--link);
}

.broker-form {
  display: grid;
  gap: 10px;
}

.broker-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--emphasis);
}

.broker-actions {
  display: flex;
  justify-content: flex-end;
}

.panel-dialog {
  width: min(760px, calc(100vw - 48px));
}

.panel-dialog-body {
  padding: 18px 22px 22px;
}

.panel-dialog .workflow-action {
  padding: 0 22px 22px;
}

.side-block {
  padding: 13px 14px 15px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.side-block + .side-block {
  margin-top: 12px;
}

.side-block.is-attention {
  border-left: 3px solid var(--amber);
}

.side-block.is-news {
  border-left: 3px solid var(--accent);
}

.side-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.side-block-head strong {
  font-size: 12px;
}

.side-block-head time {
  color: var(--muted);
  font-size: 10.5px;
}

.side-block.is-quiet .entry-body {
  font-size: 12px;
}

.side-empty {
  margin: 4px 2px;
  color: var(--muted);
  font-size: 12px;
}

.job-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 28px 16px;
  background: var(--body-bg);
  border-bottom: 1px solid var(--line);
}

.job-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.artifact-actions,
.artifact-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.artifact-actions[hidden] {
  display: none;
}

.artifact-actions button {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--emphasis);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
}

.artifact-actions button:hover {
  border-color: var(--link);
  color: var(--ink);
}

.artifact-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-2);
}

.artifact-card p {
  margin: 0 0 12px;
}

/* Badges in Spotlight's lightened style: tinted background, coloured text. */
.status-badge,
.availability {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: rgba(131, 145, 162, 0.18);
  color: var(--emphasis);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge.is-green,
.availability.is-green {
  background: var(--green-soft);
  color: var(--green);
}

.status-badge.is-amber,
.availability.is-amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.status-badge.is-red,
.availability.is-red {
  background: var(--red-soft);
  color: var(--red);
}

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 122px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--input-bg);
}

.mode-switch button {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.mode-switch button.is-active {
  background: var(--primary);
  color: #fff;
}

.timeline {
  display: grid;
  gap: 0;
  width: min(780px, calc(100% - 40px));
  margin: 0 auto;
  padding: 22px 0 16px;
}

.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 13px;
  padding-bottom: 22px;
}

.timeline-entry::before {
  position: absolute;
  top: 34px;
  bottom: -1px;
  left: 17px;
  width: 1px;
  background: var(--line);
  content: "";
}

.timeline-entry:last-child::before {
  display: none;
}

.entry-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-2);
  color: var(--emphasis);
  font-size: 9px;
  font-weight: 700;
}

.entry-avatar.is-agent {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.entry-avatar.is-attention {
  border-color: rgba(221, 153, 51, 0.5);
  background: var(--amber-soft);
  color: var(--amber);
}

.entry-avatar.is-quiet {
  border-color: var(--soft-line);
  color: var(--muted);
}

.entry-card {
  min-width: 0;
  padding: 14px 18px 16px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.entry-meta strong {
  font-size: 12px;
}

.entry-meta time {
  color: var(--muted);
  font-size: 10.5px;
}

.entry-body {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
}

.entry-body p {
  margin: 0;
}

/* A reply is short lines and lists, not one block: each line of the text is a
   paragraph, lines starting with "- " become a list, a named ship is in bold and its
   score is picked out. Space between the parts is what makes it readable. */
.entry-body p + p,
.entry-body p + .reply-list,
.entry-body .reply-list + p {
  margin-top: 9px;
}

.entry-body .reply-list {
  margin: 0;
  padding-left: 18px;
}

.entry-body .reply-list li + li {
  margin-top: 6px;
}

.entry-body .reply-list li::marker {
  color: var(--muted);
}

.entry-body strong {
  color: var(--ink);
  font-weight: 700;
}

/* An email draft inside its approval card, and the documents table in the trail. */
.email-draft {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font: 12px/1.5 var(--mono);
  white-space: pre-wrap;
}

/* The broker's desk preview (?view=broker). Confirming a document or setting a line
   aside is the charterers' decision, so a broker's screen does not offer it. */
.status-badge.is-preview { border: 1px dashed var(--amber); background: transparent; color: var(--amber); }
.is-broker-view [data-confirm-requirement],
.is-broker-view [data-set-aside-requirement] { display: none; }
/* The side the desk works from, beside New fixture. */
.side-badge { color: var(--topbar-item); }
.side-badge.is-broker { border-color: var(--amber); color: var(--amber); }
.side-badge.is-charterer { border-color: var(--link); color: var(--link); }
.side-badge.is-owner { border-color: var(--green); color: var(--green); }
.section-heading .link-button { margin-left: auto; font-size: 10.5px; }
.desk-file { margin-left: 0; font-size: 12.5px; font-weight: 700; }
.standing-detail.is-stale { color: var(--amber); }
.doc-passing { margin: -2px 0 8px 3px; font-size: 10.5px; }
.doc-passing .link-button { margin-left: 0; }
.doc-forwarded { color: var(--green); }
.doc-forwarded.is-stale { color: var(--amber); }
.standing-head.is-charterers { color: var(--link); }

/* Where we stand: four short lists under the file's standing. */
.standing-head {
  margin: 16px 0 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.standing-head.is-you { color: var(--amber); }
.standing-head.is-owners { color: var(--link); }
.standing-head.is-settled { color: var(--green); }
.standing-list { margin: 0; padding: 0; list-style: none; }
.standing-list li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 12.5px;
}
.standing-list li.standing-empty { color: var(--muted); }
.standing-detail { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
p.standing-detail { margin: 6px 0 0; }

/* Asked once on the line just confirmed with "I have it". */
.attach-prompt {
  display: block;
  margin-top: 4px;
  color: var(--amber);
}

/* Changing an email draft in its approval card. */
.email-edit {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.email-edit .field span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11.5px;
}

.email-edit textarea {
  width: 100%;
  resize: vertical;
  font: 12px/1.5 var(--mono);
}

.email-edited {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

.link-button {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.doc-table {
  width: 100%;
  margin: 8px 0 12px;
  border-collapse: collapse;
  font-size: 12px;
}

.doc-table th,
.doc-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.doc-table tr.is-missing td:nth-child(2) { color: var(--red); }
.doc-table tr.is-incomplete td:nth-child(2) { color: var(--amber); }
.doc-table tr.is-complete td:nth-child(2),
.doc-table tr.is-confirmed_by_charterer td:nth-child(2) { color: var(--green); }
/* Whether the document package is complete, above the checklist it is read from. */
.doc-package {
  margin: 0 0 8px;
  font-size: 12px;
}
.doc-package strong { color: var(--amber); }
.doc-package.is-complete strong { color: var(--green); }
/* A value that disagrees with another document, beside the review that found it. */
.doc-disagrees { color: var(--amber); }

/* A document on no requirement: set apart from the checklist's own lines. */
.doc-table tr.is-unplaced td { border-top-style: dashed; }
.doc-table tr.is-unplaced td:nth-child(2) { color: var(--amber); }

.reply-score {
  padding: 0 5px;
  border-radius: 9px;
  background: var(--card-2);
  color: var(--emphasis);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.timeline-entry.is-quiet .entry-body {
  font-size: 12px;
}

.cargo-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.cargo-summary div {
  min-width: 0;
  padding: 10px;
  background: var(--card-2);
}

.cargo-summary span,
.assessment-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cargo-summary strong {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ranked ships, set like a Spotlight table: flat rows separated by rules. */
.candidate-list {
  display: grid;
  gap: 0;
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.candidate-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: var(--card-2);
}

.candidate-row:last-child {
  border-bottom: 0;
}

.candidate-row.is-recommended {
  border-left-color: var(--green);
}

.candidate-row.is-excluded {
  background: transparent;
  color: var(--muted);
}

.candidate-rank {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--emphasis);
  font-size: 10px;
  font-weight: 700;
}

.candidate-main {
  min-width: 0;
}

.candidate-title,
.candidate-metrics {
  display: flex;
  align-items: center;
}

.candidate-title {
  justify-content: space-between;
  gap: 12px;
}

.candidate-title > div {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 7px;
}

.candidate-title strong {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-excluded .candidate-title strong {
  color: var(--emphasis);
}

.candidate-title > div span {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.candidate-badge {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--radius);
  background: var(--green-soft);
  color: var(--green);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.is-excluded .candidate-badge {
  background: rgba(131, 145, 162, 0.18);
  color: var(--muted);
}

.candidate-metrics {
  flex-wrap: wrap;
  gap: 13px;
  margin: 6px 0;
  color: var(--emphasis);
  font-size: 11px;
  font-weight: 600;
}

.candidate-metrics span {
  display: flex;
  gap: 4px;
}

.candidate-metrics small {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.candidate-main p {
  margin: 0;
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.45;
}

.candidate-main .candidate-warning {
  margin-top: 3px;
  color: var(--amber);
}

.candidate-select {
  min-width: 58px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--emphasis);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.candidate-select:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.candidate-more {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

.assessment-card,
.approval-card,
.recap-card,
.question-card {
  margin-top: 13px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-2);
}

.assessment-card h3,
.approval-card h3,
.recap-card h3,
.question-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
}

.assessment-card p,
.approval-card p,
.question-card p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

.assessment-card.is-suitable { border-left: 3px solid var(--green); }
.assessment-card.is-risk { border-left: 3px solid var(--amber); }
.assessment-card.is-unsuitable { border-left: 3px solid var(--red); }

.approval-actions {
  display: flex;
  gap: 9px;
  margin-top: 15px;
}

.workflow-action:empty {
  display: none;
}

.needs-item .approval-actions {
  flex-wrap: wrap;
}

.action-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.action-strip strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
}

.action-strip span {
  color: var(--muted);
  font-size: 11.5px;
}

.recap-card {
  background: var(--card-2);
}

.recap-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.recap-heading h3 {
  margin: 0;
}

.copy-button {
  border: 0;
  background: transparent;
  color: var(--link);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
}

.recap-text {
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--emphasis);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* What needs the broker is raised on its own, ahead of the working detail. */
.needs-list {
  display: grid;
  gap: 10px;
}

.needs-item {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  background: var(--card-2);
}

.needs-item.is-decision {
  border-left-color: var(--blue);
}

.needs-item h3 {
  margin: 0;
  font-size: 13px;
}

.needs-item p {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

.needs-item small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.needs-item .approval-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.working-summary {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 12px;
}

.folds {
  display: grid;
  gap: 5px;
}

.fold {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-2);
}

.fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: var(--emphasis);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.fold > summary::-webkit-details-marker {
  display: none;
}

.fold > summary::before {
  content: "\203A";
  display: inline-block;
  color: var(--muted);
  font-size: 14px;
  transition: transform 120ms ease;
}

.fold[open] > summary::before {
  transform: rotate(90deg);
}

.fold[open] > summary {
  border-bottom: 1px solid var(--line);
}

.fold-body {
  padding: 12px;
  font-size: 12px;
}

.artifact-actions-inline {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}

.history-list {
  margin: 0;
  padding-left: 16px;
  color: var(--text);
  line-height: 1.7;
}

.history-list strong {
  color: var(--ink);
}

/* Search attempts and market tables in Spotlight's table style. */
.search-attempts {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.search-attempt {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px;
}

.search-attempt.is-chosen {
  border-color: rgba(10, 207, 151, 0.5);
  background: var(--green-soft);
}

.search-attempt em {
  font-style: normal;
  white-space: nowrap;
}

.search-attempt-error {
  color: var(--red);
}

.market-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.market-area {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--emphasis);
  font-size: 11.5px;
}

.market-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.market-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.market-table th,
.market-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.market-table tbody tr:nth-child(odd) td {
  background: var(--card-2);
}

.market-table tbody tr:last-child td {
  border-bottom: 0;
}

.market-table th {
  color: var(--emphasis);
  font-weight: 700;
}

/* The skill plan: an ordered task list with what each step returned. */
.plan-tasks {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.plan-task {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px;
}

.plan-task.is-done {
  border-color: rgba(10, 207, 151, 0.5);
  background: var(--green-soft);
}

.plan-task.is-failed {
  border-color: rgba(250, 92, 124, 0.5);
  background: var(--red-soft);
}

.plan-task.is-skipped {
  opacity: 0.65;
}

.plan-task-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.plan-status {
  flex: none;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-detail {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-style: normal;
}

.plan-rules {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--muted);
}

.plan-rules li {
  margin-top: 2px;
}

.plan-source {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

/* An ETA already in the past is reported as such, not as a future arrival. */
.eta-passed {
  color: var(--red);
}

/* -- Composer ----------------------------------------------------------------------- */

.message-composer {
  position: relative;
  z-index: 4;
  width: 100%;
  margin-top: auto;
  padding: 12px 28px 10px;
  border-top: 1px solid var(--line);
  background: var(--body-bg);
}

.composer-shell,
.composer-meta {
  width: min(780px, 100%);
  margin: 0 auto;
}


.composer-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: end;
  gap: 8px;
}

.composer-shell textarea {
  min-height: 40px;
  max-height: 130px;
  padding: 10px 12px;
  resize: vertical;
}

.send-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}

.send-button:hover {
  background: var(--primary-hover);
}

.composer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.composer-meta button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--link);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

/* -- Right panel: vessel intelligence ---------------------------------------------- */

.vessel-panel {
  grid-area: vessel;
  min-width: 0;
  min-height: 0;
  padding: 18px 16px 24px;
  overflow: auto;
  background: var(--body-bg);
  border-left: 1px solid var(--line);
}

.vessel-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100%;
  padding: 20px;
  text-align: center;
}

.vessel-empty h2 {
  margin: 18px 0 6px;
  font-size: 14px;
}

.vessel-empty p {
  max-width: 230px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.empty-radar {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49%, var(--line) 50%, transparent 51%),
    linear-gradient(transparent 49%, var(--line) 50%, transparent 51%);
}

.empty-radar span {
  width: 35px;
  height: 35px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.vessel-content {
  padding-bottom: 12px;
}

/* The voyage chart is a card of its own at the top of the panel. */
.route-visual {
  display: block;
  margin: 0 0 12px;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.vessel-empty .route-visual {
  width: 100%;
  text-align: left;
}

.route-visual figcaption {
  display: grid;
  min-width: 0;
  gap: 4px;
  margin-top: 9px;
}

.route-map svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.route-note {
  color: var(--muted);
  line-height: 1.45;
}

.map-empty {
  margin: 0;
  padding: 22px 10px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center;
}

.route-visual span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.route-visual strong {
  overflow-wrap: anywhere;
  font-size: 12.5px;
  line-height: 1.35;
}

.route-visual small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

/* -- Chart plot -------------------------------------------------------------------
   Everything here is drawn from real coordinates: the graticule is true degrees and
   the scale bar true nautical miles, so the picture cannot say more than the data. */
.map-sea {
  fill: var(--map-sea);
}

/* Land is earth, sea is water: the one thing a reader should not have to work out. */
.map-land {
  fill: var(--map-land);
  stroke: var(--map-coast);
  stroke-width: 0.5;
  stroke-linejoin: round;
}

.map-grid {
  stroke: var(--map-grid);
  stroke-width: 0.4;
}

.map-grid-label {
  fill: var(--map-grid-label);
  font-size: 5px;
  letter-spacing: 0.03em;
}

.map-leg {
  fill: none;
  stroke-linecap: round;
}

/* Ballast to the load port: the ship is not carrying this cargo yet. */
.map-leg-ballast {
  stroke: var(--muted);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
}

/* The laden leg is the cargo itself. */
.map-leg-laden {
  stroke: var(--accent);
  stroke-width: 1.8;
}

.map-leg-label rect {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 0.4;
}

.map-leg-label text {
  fill: var(--muted);
  font-size: 5.4px;
  text-anchor: middle;
}

.map-leg-label.is-laden text {
  fill: var(--map-label);
  font-weight: 600;
}

.map-port circle {
  fill: var(--map-port-fill);
  stroke: var(--map-port-stroke);
  stroke-width: 1.4;
}

.map-port-discharge circle {
  stroke: var(--accent);
}

.map-port-core {
  fill: var(--map-port-stroke);
}

.map-port text {
  fill: var(--map-label);
  font-size: 7px;
  font-weight: 700;
  text-anchor: middle;
}

.map-vessel circle {
  fill: rgba(10, 207, 151, 0.22);
  stroke: var(--green);
  stroke-width: 1.2;
}

.map-vessel-core {
  fill: var(--green);
  stroke: none;
}

.map-vessel-halo {
  fill: var(--accent-soft);
}

.map-vessel-hull {
  fill: var(--accent);
  stroke: var(--map-port-fill);
  stroke-width: 0.7;
}

.map-scale line {
  stroke: var(--muted);
  stroke-width: 0.7;
}

.map-scale text {
  fill: var(--muted);
  font-size: 5.2px;
  text-anchor: middle;
}

.map-north path {
  fill: var(--muted);
}

.map-north text {
  fill: var(--muted);
  font-size: 5.2px;
  text-anchor: middle;
}

/* Market plot: one mark per reported position, open tonnage larger and in accent. */
.map-fleet circle {
  fill: var(--map-fleet);
  opacity: 0.75;
}

.map-fleet.is-open circle {
  fill: var(--accent);
  opacity: 1;
}

/* The recommended or chosen ship on the shortlist chart. */
.map-fleet.is-working circle {
  fill: var(--green);
  stroke: #ffffff;
  stroke-width: 1.2;
  opacity: 1;
}

.map-focus {
  fill: rgba(57, 175, 209, 0.08);
  stroke: rgba(57, 175, 209, 0.45);
  stroke-width: 0.5;
  stroke-dasharray: 3 2;
}

.map-legend {
  fill: var(--muted);
  font-size: 5.6px;
  letter-spacing: 0.04em;
}

/* The selected vessel, as a card. */
.vessel-title-row,
.imo-line,
.metric-grid,
.panel-section {
  background: var(--card);
}

.vessel-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 6px;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow);
}

.vessel-title-row p {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vessel-title-row h2 {
  margin: 0;
  font-size: 16px;
}

.imo-line {
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 11px;
}

.imo-line strong {
  margin-left: 4px;
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  padding: 0 16px 16px;
  background: var(--card);
}

.metric-grid > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--card-2);
}

.metric-grid > div:first-child { border-radius: var(--radius) 0 0 0; }
.metric-grid > div:nth-child(2) { border-radius: 0 var(--radius) 0 0; }
.metric-grid > div:nth-child(3) { border-radius: 0 0 0 var(--radius); }
.metric-grid > div:nth-child(4) { border-radius: 0 0 var(--radius) 0; }

.metric-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric-grid strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-section {
  padding: 16px 16px 0;
  border-top: 1px solid var(--line);
}

.panel-section + .panel-section {
  margin-top: 0;
}

.panel-section:last-child {
  padding-bottom: 16px;
  border-radius: 0 0 var(--radius) var(--radius);
}

.panel-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-section-title h3 {
  margin: 0;
  font-size: 12.5px;
}

.panel-section-title span {
  color: var(--muted);
  font-size: 10.5px;
}

.risk-list,
.evidence-list {
  display: grid;
  gap: 6px;
  padding-bottom: 16px;
}

/* The file's documents in the right-hand panel: two folders of files that open. */
.panel-documents { border-top: 0; }
.doc-folders { display: grid; gap: 10px; padding-bottom: 16px; }
.doc-folder summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px;
  color: var(--emphasis);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  list-style: none;
}
.doc-folder summary::-webkit-details-marker { display: none; }
.doc-folder summary small { color: var(--muted); font-weight: 400; }
.doc-file {
  display: grid;
  gap: 2px;
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.doc-file:hover { border-color: var(--link); }
.doc-file strong { font-size: 11.5px; overflow-wrap: anywhere; }
.doc-file small { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.doc-file.is-complete { border-left-color: var(--green); }
.doc-file.is-incomplete { border-left-color: var(--amber); }
.doc-file.is-unread { border-left-color: var(--link); }
.doc-file.is-replaced { opacity: 0.7; }
.doc-folder-empty { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
.doc-attach { margin: 0; justify-self: start; }

.risk-item,
.evidence-item,
.clear-risk {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-2);
}

.risk-item {
  border-left: 3px solid var(--amber);
}

.risk-item.is-high,
.risk-item.is-critical {
  border-left-color: var(--red);
}

.risk-item strong,
.evidence-item strong,
.clear-risk strong {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
}

.risk-item p,
.evidence-item p,
.clear-risk p {
  margin: 0;
  color: var(--text);
  font-size: 10.5px;
  line-height: 1.45;
}

.clear-risk {
  border-color: rgba(10, 207, 151, 0.4);
  background: var(--green-soft);
}

.clear-risk strong {
  color: var(--green);
}

.evidence-type {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The shortlist or market positions, as a table card. */
.vessel-shortlist {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.shortlist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 8px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--card);
  box-shadow: var(--shadow);
}

.shortlist-head span {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.shortlist-head strong {
  display: block;
  margin-top: 3px;
  font-size: 14px;
}

.shortlist-count {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.shortlist-note {
  margin: 0;
  padding: 0 16px 12px;
  background: var(--card);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.shortlist-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--card);
}

.shortlist-row {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.shortlist-row:last-child {
  border-bottom: 0;
}

.shortlist-row:nth-child(odd) {
  background: var(--card-2);
}

.shortlist-row.is-eligible {
  border-left-color: var(--green);
  cursor: pointer;
}

.shortlist-row.is-eligible:hover {
  background: var(--green-soft);
}

.shortlist-row.is-excluded {
  color: var(--muted);
}

.shortlist-row.is-static {
  cursor: default;
}

/* The working ship in the list: recommended or chosen, shown in full below. */
.shortlist-row.is-working {
  background: var(--green-soft);
  cursor: default;
}

.shortlist-working {
  margin-left: 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
}

.shortlist-rank {
  flex: none;
  width: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.shortlist-main {
  display: block;
  min-width: 0;
  flex: 1;
}

.shortlist-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.shortlist-name strong {
  font-size: 12px;
}

.shortlist-row.is-excluded .shortlist-name strong {
  color: var(--emphasis);
}

.shortlist-name small {
  color: var(--muted);
  font-size: 10px;
}

.shortlist-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
}

.shortlist-blocker {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.5;
}

.shortlist-row.is-eligible .shortlist-blocker {
  color: var(--green);
}

.shortlist-row.is-excluded .shortlist-blocker {
  color: var(--amber);
}

/* -- Artifact dialog ---------------------------------------------------------------- */

.artifact-dialog {
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

.artifact-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.artifact-dialog-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.artifact-dialog-head span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.artifact-dialog-head h2 {
  margin: 2px 0 0;
  font-size: 16px;
}

.artifact-dialog-head button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-2);
  color: var(--emphasis);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.artifact-dialog pre {
  min-height: 360px;
  margin: 0;
  padding: 22px;
  overflow: auto;
  color: var(--emphasis);
  font: 12px/1.65 var(--mono);
  white-space: pre-wrap;
}

/* The desk checklist in the same dialog: a rendered table, not a text file. */
.artifact-html {
  padding: 22px;
  overflow: auto;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}

.artifact-html p { margin: 0 0 12px; }
.artifact-html .desk-table { margin: 12px 0 16px; }
.artifact-html .desk-table td { vertical-align: top; }
.artifact-html .desk-table td small { color: var(--muted); }

/* The recap is the one artifact a broker completes, so it opens editable. */
.artifact-edit {
  display: grid;
  gap: 12px;
  padding: 20px 22px 22px;
}

#artifact-editor {
  min-height: 52vh;
  padding: 14px;
  font: 12px/1.6 var(--mono);
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.artifact-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.artifact-edit-actions small {
  flex: 1;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

/* -- The wait -----------------------------------------------------------------------
   A live search takes tens of seconds because sanctions are checked one ship at a
   time. Silence for that long reads as a hang. */
.working-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.working-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(330px, calc(100vw - 48px));
  padding: 24px 28px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}

.working-card strong {
  font-size: 14px;
}

.working-card p {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

.working-card small {
  min-height: 14px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.working-spinner {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.working-spinner span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: working-pulse 1.1s ease-in-out infinite;
}

.working-spinner span:nth-child(2) { animation-delay: 0.16s; }
.working-spinner span:nth-child(3) { animation-delay: 0.32s; }

@keyframes working-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .working-spinner span { animation: none; opacity: 0.7; }
}

/* -- Toast and footer --------------------------------------------------------------- */

/* The server holds a newer Pollux than this tab: a reload is offered, never forced. */
.update-bar {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13px;
  transform: translateX(-50%);
}

.update-bar[hidden] {
  display: none;
}

.update-bar .button {
  flex: none;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: calc(var(--footer-h) + 14px);
  z-index: 20;
  max-width: 360px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--footer-h);
  padding: 0 24px;
  border-top: 1px solid var(--line);
  background: var(--body-bg);
  color: var(--emphasis);
  font-size: 12px;
}

.footer-product {
  color: var(--muted);
}

/* -- Responsive --------------------------------------------------------------------- */

@media (max-width: 1599px) {
  .job-tools {
    position: static;
    flex-direction: row;
    width: auto;
    margin: 0 0 0 6px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 1250px) {
  .app-shell {
    grid-template-columns: 220px minmax(480px, 1fr) 320px;
  }

  .topbar-context { display: none; }
  .environment { display: none; }
  .field-grid-cargo { grid-template-columns: 1fr 1fr; }
  .cargo-class-field { grid-column: auto; }
}

@media (max-width: 960px) {
  body { overflow: auto; }

  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) auto auto var(--footer-h);
    grid-template-areas:
      "sidebar topbar"
      "sidebar workspace"
      "sidebar vessel"
      "sidebar footer";
    height: auto;
    min-height: 100vh;
  }

  .topbar { position: sticky; top: 0; overflow: hidden; }
  /* Spotlight collapses its section navigation on narrow screens; the workspace keeps
     its tools and the user instead. */
  .topbar-nav { display: none; }
  .topbar-actions { margin-left: 0; }
  .job-header { flex-wrap: wrap; }
  .workspace { min-height: calc(100vh - var(--topbar-h)); }
  .vessel-panel { min-height: 620px; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 700px) {
  .app-shell {
    display: block;
  }

  .topbar {
    position: sticky;
    top: 0;
    gap: 8px;
    padding: 0 10px;
  }

  .topbar-nav { display: none; }
  .topbar-user { display: none; }
  .deal-sidebar { max-height: 300px; }
  .sidebar-logo { height: 48px; }
  .workspace-files { display: none; }
  .intake-view { width: 100%; padding-top: 18px; }
  .conversation-start,
  .structured-intake { width: calc(100% - 28px); }
  .field-grid-cargo,
  .field-grid-vessel { grid-template-columns: 1fr; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .job-header { padding: 16px 14px; flex-direction: column; }
  .job-header-controls { width: 100%; justify-content: space-between; }
  .artifact-actions { order: 3; width: 100%; }
  .timeline,
  .workflow-action { width: calc(100% - 28px); }
  .workflow-action { padding-left: 0; }
  .cargo-summary { grid-template-columns: 1fr 1fr; }
  .candidate-row { grid-template-columns: 24px minmax(0, 1fr); }
  .candidate-select { grid-column: 2; width: max-content; }
  .action-strip { align-items: stretch; flex-direction: column; }
  .approval-actions { flex-direction: column; }
  .vessel-panel { min-height: 620px; }
  .message-composer { padding-right: 14px; padding-left: 14px; }
  .footer { height: auto; padding: 10px 14px; flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* News on a file: the unread badge in the queue, the news card on the timeline, and the
   demo-only event buttons. */
.deal-unread {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
  border-radius: 9px; background: var(--accent, #0f5c7a); color: #fff;
  font-size: 0.7rem; font-weight: 600; line-height: 1;
}
.deal-event {
  border: 0; background: transparent; cursor: pointer; opacity: 0.55;
  font-size: 0.9rem; padding: 0 4px;
}
.deal-event:hover { opacity: 1; }
.timeline-entry.is-news .entry-avatar { background: var(--surface-2, #e9edf1); }
.news-list { display: grid; gap: 8px; }
.news-item {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline;
  padding: 8px 10px; border-left: 3px solid var(--line, #d5dbe1);
}
.news-item.is-unread { border-left-color: var(--accent, #0f5c7a); font-weight: 500; }
.news-when { font-variant-numeric: tabular-nums; color: var(--muted, #56616b); font-size: 0.82rem; }
.news-item small { grid-column: 2; color: var(--muted, #56616b); }
/* The demo row: the last line of the sticky file header, so it stays on top while the
   chat scrolls. Each group keeps together when the row wraps. */
.dev-events {
  flex: 0 0 100%;
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px; color: var(--muted);
}
.dev-chip {
  padding: 1px 7px;
  border: 1px solid var(--amber);
  border-radius: 999px;
  color: var(--amber);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.dev-group { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dev-label { margin-right: 2px; color: var(--muted); font-weight: 600; }
.dev-button {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--emphasis);
  cursor: pointer;
  font-size: 11.5px;
  white-space: nowrap;
}
.dev-button:hover { border-color: var(--link); color: var(--ink); }
/* Already delivered: still clickable, the mailbox answers "nothing changed". */
.dev-button.is-done { border-color: transparent; background: transparent; color: var(--green); }