:root {
  color-scheme: dark;
  --dev-bg: #050913;
  --dev-bg-2: #07111f;
  --dev-panel: rgba(12, 20, 36, .92);
  --dev-panel-2: rgba(15, 25, 44, .96);
  --dev-line: rgba(115, 160, 255, .22);
  --dev-line-strong: rgba(47, 211, 255, .42);
  --dev-text: #f8fbff;
  --dev-muted: #aeb8d4;
  --dev-soft: #7783a7;
  --dev-cyan: #2cd5ff;
  --dev-blue: #3b82f6;
  --dev-violet: #8b5cf6;
  --dev-green: #4ee6a9;
  --dev-red: #fb7185;
  --dev-amber: #fbbf24;
  --dev-shadow: 0 18px 64px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--dev-bg);
}

body.dev-body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(90deg, rgba(44, 213, 255, .08), transparent 23%, transparent 76%, rgba(139, 92, 246, .10)),
    linear-gradient(180deg, #050913 0%, #07111f 58%, #050913 100%);
  color: var(--dev-text);
  font: 500 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body.dev-body a,
body.dev-body button,
body.dev-body input,
body.dev-body textarea,
body.dev-body select {
  font: inherit;
}

body.dev-body a {
  color: inherit;
  text-decoration: none;
}

/* D3 - 24 Aug 2026. This block, hiding the cursor over every button, link,
   input, textarea and select, is the ACTUAL remaining cause of "it absorbs
   the cursor and is awful and unusable" (Isaac) - the D2 fix a few hundred
   lines down (`body.dev-body{cursor:auto}`) only ever beat a bare `body`
   selector, and this rule is (0,2,1) against that fix's (0,1,1), so on any
   desktop width it kept winning. The @media(max-width:760px) block near the
   end of this file happens to restate all five element types at matching
   specificity, which is why the bug was invisible on a phone and present
   everywhere a developer actually uses this console. Deleted outright
   rather than re-overridden: the custom cursor this existed to make room
   for is gone (.dev-cursor is display:none!important and its JS is
   deleted), so there is nothing left for it to serve. */

.dev-cursor {
  position: fixed;
  z-index: 9999;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(44, 213, 255, .84);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: width .16s ease, height .16s ease, border-color .16s ease, opacity .2s ease;
  box-shadow: 0 0 26px rgba(44, 213, 255, .26);
}

.dev-cursor::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #dff8ff;
  border-bottom: 2px solid #dff8ff;
  transform: rotate(-35deg);
  filter: drop-shadow(0 0 8px rgba(44, 213, 255, .7));
}

.dev-cursor.active {
  opacity: 1;
}

.dev-cursor.hot {
  width: 38px;
  height: 38px;
  border-color: rgba(139, 92, 246, .92);
  box-shadow: 0 0 34px rgba(139, 92, 246, .34);
}

.dev-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.dev-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  border-right: 1px solid var(--dev-line);
  background: rgba(5, 10, 22, .88);
  backdrop-filter: blur(22px);
  box-shadow: 14px 0 50px rgba(0, 0, 0, .22);
}

.dev-brand,
.dev-role-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dev-brand {
  min-height: 52px;
}

.dev-brand img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(44, 213, 255, .32);
}

.dev-brand span,
.dev-role-card strong {
  display: block;
  font-weight: 900;
  letter-spacing: .01em;
}

.dev-brand small,
.dev-role-card small {
  display: block;
  color: var(--dev-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dev-role-card {
  min-height: 68px;
  padding: 13px;
  border: 1px solid var(--dev-line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(44, 213, 255, .10), rgba(139, 92, 246, .08));
}

.status-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dev-amber);
  box-shadow: 0 0 18px rgba(251, 191, 36, .54);
}

.status-dot.ok {
  background: var(--dev-green);
  box-shadow: 0 0 18px rgba(78, 230, 169, .54);
}

.status-dot.bad {
  background: var(--dev-red);
  box-shadow: 0 0 18px rgba(251, 113, 133, .54);
}

.dev-nav {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.dev-nav button,
.dev-sidebar-foot a,
.dev-pill,
.dev-button {
  min-height: 42px;
  border: 1px solid var(--dev-line);
  border-radius: 8px;
  color: var(--dev-text);
  background: rgba(15, 23, 42, .72);
  font-weight: 900;
  letter-spacing: 0;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.dev-nav button {
  width: 100%;
  padding: 0 14px;
  text-align: left;
}

.dev-nav button:hover,
.dev-sidebar-foot a:hover,
.dev-pill:hover,
.dev-button:hover {
  transform: translateY(-1px);
  border-color: var(--dev-line-strong);
  background: rgba(23, 37, 64, .92);
  box-shadow: 0 14px 38px rgba(44, 213, 255, .10);
}

.dev-nav button.active {
  border-color: rgba(44, 213, 255, .56);
  background: linear-gradient(135deg, rgba(23, 132, 196, .42), rgba(85, 64, 184, .32));
}

.dev-sidebar-foot {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.dev-sidebar-foot a {
  display: flex;
  align-items: center;
  padding: 0 14px;
}

.dev-main {
  width: 100%;
  max-width: 1680px;
  padding: 26px clamp(18px, 3vw, 42px) 64px;
}

.dev-topbar,
.section-head,
.dev-toolbar,
.dev-actions,
.code-editor-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dev-topbar,
.section-head {
  justify-content: space-between;
}

.dev-topbar {
  min-height: 72px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(115, 160, 255, .14);
}

.dev-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: #8eeeff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dev-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--dev-cyan), var(--dev-violet));
  border-radius: 999px;
}

.dev-topbar h1,
.dev-hero h2,
.section-head h2 {
  margin: 0;
  color: var(--dev-text);
  line-height: .98;
  letter-spacing: 0;
}

.dev-topbar h1 {
  font-size: clamp(32px, 4vw, 58px);
}

.dev-top-actions,
.dev-actions {
  flex-wrap: wrap;
}

.dev-pill,
.dev-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  white-space: nowrap;
}

.dev-pill.danger,
.dev-button.danger {
  border-color: rgba(251, 113, 133, .38);
  background: rgba(94, 21, 42, .45);
}

.dev-button.primary {
  border-color: rgba(44, 213, 255, .54);
  background: linear-gradient(135deg, #24c7f7, #5b72f8 52%, #b548e6);
  color: #fff;
  box-shadow: 0 16px 42px rgba(44, 213, 255, .16);
}

.dev-button.ghost {
  background: rgba(7, 17, 31, .54);
}

.dev-button:disabled,
.dev-nav button:disabled {
  opacity: .45;
  transform: none;
  box-shadow: none;
}

.dev-hero {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, 500px);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 22px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--dev-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(44, 213, 255, .10), transparent 28%),
    linear-gradient(115deg, rgba(11, 19, 40, .96), rgba(20, 19, 46, .86));
  box-shadow: var(--dev-shadow);
}

.dev-hero h2 {
  max-width: 920px;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.06;
  overflow-wrap: normal;
  word-break: normal;
}

.dev-hero p {
  max-width: 780px;
  color: #d8def2;
  font-size: 16px;
}

.dev-command-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dev-command-panel div,
.dev-card,
.dev-alert,
.metric {
  border: 1px solid var(--dev-line);
  border-radius: 8px;
  background: var(--dev-panel);
}

.dev-command-panel div,
.metric {
  min-height: 106px;
  padding: 18px;
}

.dev-command-panel div {
  min-height: 92px;
  padding: 16px;
}

.dev-command-panel span,
.metric span,
.meta-label {
  display: block;
  color: var(--dev-soft);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dev-command-panel strong,
.metric strong {
  display: block;
  margin-top: 12px;
  font-size: clamp(26px, 4vw, 48px);
  line-height: 1;
}

.dev-command-panel strong {
  font-size: clamp(22px, 2.6vw, 34px);
}

.dev-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-color: rgba(251, 191, 36, .42);
  background: rgba(80, 53, 18, .36);
}

.dev-alert a {
  margin-left: auto;
  font-weight: 950;
  color: #fff;
  text-decoration: underline;
}

.hidden { display: none !important; }

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

.dev-grid.metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.dev-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dev-card.wide,
.wide {
  grid-column: 1 / -1;
}

.dev-card {
  min-width: 0;
  padding: 18px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
}

.dev-card h3 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.15;
}

.dev-card p,
.fine-print {
  color: var(--dev-muted);
}

.fine-print {
  margin: 12px 0 0;
  font-size: 13px;
}

.section-head {
  margin: 32px 0 16px;
}

.section-head h2 {
  font-size: clamp(28px, 3vw, 44px);
}

.section-head p {
  max-width: 640px;
  margin: 0;
  color: var(--dev-muted);
}

.dev-section {
  display: none;
}

.dev-section.active {
  display: block;
}

.dev-form {
  display: grid;
  gap: 12px;
}

.dev-form label {
  display: grid;
  gap: 7px;
  color: #e8eeff;
  font-size: 13px;
  font-weight: 900;
}

.dev-form input,
.dev-form textarea,
.dev-form select,
.dev-toolbar input,
.code-editor textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(115, 160, 255, .24);
  border-radius: 8px;
  background: rgba(5, 10, 22, .76);
  color: var(--dev-text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.dev-form input,
.dev-form select,
.dev-toolbar input {
  min-height: 46px;
  padding: 0 13px;
}

.dev-form textarea,
.code-editor textarea {
  padding: 13px;
  resize: vertical;
}

.dev-form input:focus,
.dev-form textarea:focus,
.dev-form select:focus,
.dev-toolbar input:focus,
.code-editor textarea:focus {
  border-color: rgba(44, 213, 255, .74);
  box-shadow: 0 0 0 4px rgba(44, 213, 255, .10);
}

.dev-toolbar {
  margin-bottom: 16px;
}

.dev-toolbar input {
  flex: 1;
}

/* 31 Aug 2026: the presence form's forwardNumber input sat in a flex row
   beside a <select> and a <button>, both of which kept their content-based
   width - measured live, the input was squeezed to 30px, far too narrow to
   show its own "+447700900123" placeholder. It read as a near-invisible,
   broken control next to "Go on duty". Scoped rather than widening every
   .dev-toolbar input, which would fight other forms (news title/slug,
   account search) that legitimately want an even, flexible split. */
.dev-toolbar input[name="forwardNumber"] {
  flex: 0 1 220px;
  min-width: 160px;
}

.split-pane {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.dev-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.dev-table th,
.dev-table td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(115, 160, 255, .14);
  vertical-align: top;
  text-align: left;
}

.dev-table th {
  color: var(--dev-soft);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dev-table td {
  color: #e8eeff;
  font-size: 13px;
}

.dev-list {
  display: grid;
  gap: 10px;
}

.dev-list-item {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(115, 160, 255, .18);
  border-radius: 8px;
  background: rgba(8, 14, 26, .64);
}

.dev-list-item button {
  justify-self: start;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(44, 213, 255, .30);
  border-radius: 999px;
  color: #c8f7ff;
  background: rgba(44, 213, 255, .08);
  font-size: 12px;
  font-weight: 850;
}

.badge.danger {
  border-color: rgba(251, 113, 133, .36);
  color: #ffe2e7;
  background: rgba(251, 113, 133, .10);
}

.badge.green {
  border-color: rgba(78, 230, 169, .36);
  color: #d8fff0;
  background: rgba(78, 230, 169, .10);
}

.code-card {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 16px;
}

.code-file-list {
  display: grid;
  gap: 8px;
  align-self: start;
}

.code-file {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(115, 160, 255, .18);
  border-radius: 8px;
  background: rgba(8, 14, 26, .64);
  color: var(--dev-text);
  text-align: left;
}

.code-file.active {
  border-color: rgba(44, 213, 255, .56);
  background: rgba(23, 132, 196, .18);
}

.code-file small {
  color: var(--dev-soft);
  word-break: break-all;
}

.code-editor {
  min-width: 0;
}

/* Only shown before mountEditor() has run once - it replaces this element's
   whole innerHTML the moment a real file loads, so nothing here needs to be
   cleared by hand. */
.code-editor-empty {
  margin: 0;
  padding: 14px 16px;
  color: var(--dev-muted);
  font-size: 13px;
}

.code-editor-head {
  justify-content: space-between;
  margin-bottom: 10px;
}

.code-editor-head strong {
  overflow: hidden;
  color: var(--dev-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-editor textarea {
  /* !important because simco-unified.css (the shared theme this page also
     loads) carries `textarea{resize:vertical;min-height:112px!important}` -
     a bare, unscoped rule with no !important-free counterpart to beat on
     specificity alone. This selector is more specific (.code-editor
     textarea vs bare textarea), but !important always wins over a plain
     declaration regardless of specificity, so without matching it the
     editor was silently squashed to 112px - about five or six lines of a
     monospace file that can run to hundreds of thousands of characters
     (news.html: 444,227). Real, reachable via the theme, and part of why
     the code editor read as unusable. */
  min-height: 560px !important;
  font: 500 13px/1.55 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  tab-size: 2;
}

.log-box {
  max-height: 540px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(115, 160, 255, .16);
  border-radius: 8px;
  background: rgba(3, 7, 18, .86);
  color: #dbeafe;
  font: 500 12px/1.55 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.dev-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  max-width: min(420px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 1px solid rgba(44, 213, 255, .34);
  border-radius: 8px;
  background: rgba(7, 17, 31, .96);
  box-shadow: var(--dev-shadow);
  color: var(--dev-text);
  font-weight: 850;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.dev-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.loading-block,
.empty-block {
  display: grid;
  place-items: center;
  min-height: 160px;
  border: 1px dashed rgba(115, 160, 255, .22);
  border-radius: 8px;
  color: var(--dev-soft);
  text-align: center;
}

.danger-text { color: var(--dev-red); }
.success-text { color: var(--dev-green); }
.muted { color: var(--dev-soft); }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

@media (max-width: 1180px) {
  .dev-shell {
    grid-template-columns: 1fr;
  }

  .dev-sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--dev-line);
  }

  .dev-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .dev-nav button {
    text-align: center;
  }

  .dev-hero,
  .split-pane,
  .code-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.dev-body {
    cursor: auto;
  }

  body.dev-body a,
  body.dev-body button,
  body.dev-body input,
  body.dev-body textarea,
  body.dev-body select {
    cursor: auto;
  }

  .dev-cursor {
    display: none;
  }

  .dev-main {
    padding: 18px 12px 44px;
  }

  .dev-topbar,
  .section-head,
  .dev-toolbar,
  .code-editor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dev-top-actions,
  .dev-actions {
    width: 100%;
  }

  .dev-pill,
  .dev-button {
    flex: 1 1 150px;
  }

  .dev-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dev-grid.metrics,
  .dev-grid.two,
  .dev-command-panel {
    grid-template-columns: 1fr;
  }

  .dev-hero h2 {
    font-size: 30px;
  }

  .dev-alert {
    align-items: flex-start;
    flex-direction: column;
  }

  .dev-alert a {
    margin-left: 0;
  }

  .dev-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

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

/* ==========================================================================
   D2 - 19 Aug 2026. The dev portal, brought back to the SIMCOAI aesthetic.

   Isaac: "the dev.simcoai.co.uk page is also bad looking it all needs to look
   less vibe coded but still have the same asthetic".

   THIS PAGE ALREADY LOADS simco-unified.css AND THEN OVERRODE ALL OF IT with a
   parallel palette of its own (--dev-bg, --dev-cyan, --dev-panel ...), a third
   primary gradient, an 8px card against the site's 22px, and its own type
   scale. So it did not diverge for want of the site's stylesheet; it diverged
   by redeclaring everything the stylesheet already said.

   EVERY VALUE BELOW WAS MEASURED FROM THE LIVE SITE, not taken from :root.
   CLAUDE.md records four times over that the theme's variables are stale -
   --radius still says 8px against a rendered 22px, --bg says #05070d against a
   rendered #030712 - so a rule written from a token is a rule written from the
   value that loses.

   THE TYPE SCALE IS THE DASHBOARD'S, NOT THE MARKETING SITE'S, and that is the
   substantive judgement here. This is a console, not a page: L78 settled the
   dashboard at a 27px page title over 19.5px card headings, and the dev portal
   was running a 57.6px title with a 38px sentence-as-heading under it and a
   further 48px heading below that. Three competing display headings on one
   screen is what "vibe coded" looks like from across the room.
   ========================================================================== */

/* --- the custom cursor. Deleted, and it is the clearest single tell on the
   page: `body{cursor:none}` plus a glowing cyan ring with a drop-shadowed
   chevron chasing the pointer, composited with mix-blend-mode:screen.
   IT IS ALSO A REAL FAULT, NOT ONLY A STYLE. Hiding the real cursor throws
   away every cursor the browser was going to give you - the I-beam over text,
   the resize handle, the not-allowed over a disabled control - and the
   replacement is drawn by JavaScript, so if dev.js fails before its mousemove
   handler binds, an internal console is left with NO POINTER AT ALL. */
body.dev-body { cursor: auto; }
.dev-cursor { display: none !important; }

/* --- surfaces. The site's own page colour and card treatment. */
/* The page background is left ALONE. It was already byte-identical to
   simcoai.co.uk - the same two radials over the same linear - because the theme
   sets it and pins it. An earlier draft of this layer set `background-image:none`
   here on the assumption that the violet wash was this page's own invention; it
   is the site's, so the rule would have made the portal LESS like the rest of
   SIMCOAI had it ever applied. Measure before removing decoration. */
body.dev-body { color: #f8f7ff; }
.dev-card,
.dev-hero,
.dev-command-panel > div,
.dev-grid.metrics > * {
  border-radius: 22px;
  border-color: rgba(109, 153, 255, .22);
  background-color: transparent;
  background-image:
    radial-gradient(circle at 92% 14%, rgba(47, 212, 255, .08), rgba(0, 0, 0, 0) 208px),
    linear-gradient(150deg, rgba(13, 20, 38, .94), rgba(8, 12, 27, .94));
  box-shadow: none;
}

/* --- type. A console reads top-down, so the page title has to be the largest
   thing on it and everything else has to get out of the way. */
.dev-shell .dev-topbar h1 { font-size: 27px !important; font-weight: 700; letter-spacing: -.01em; line-height: 1.2 !important; max-width: none !important; margin-inline: 0 !important; }
/* THE SAME BLANKET RULE L78 RECORDS. The theme carries several
   `html body h2{font-size:clamp(...)!important}` declarations in different media
   queries, so a plain per-component size loses however specific it is - which is
   why dev.css's own heading sizes have never applied either. Out-specified
   rather than escalated with a second !important at equal specificity, which
   would tie and break on source order. */
.dev-shell .dev-hero h2 { font-size: 21px !important; font-weight: 700; line-height: 1.35 !important; letter-spacing: 0 !important; max-width: none !important; }
.dev-shell .dev-section .section-head h2 { font-size: 19.5px !important; font-weight: 700; line-height: 1.25 !important; max-width: none !important; }
.dev-card h3 { font-size: 15.5px; font-weight: 700; }
.dev-hero p,
.dev-section .section-head p { color: #bcb7dd; font-size: 15px; line-height: 1.6; }

/* --- the eyebrow. The gradient dash before it is the one this project already
   removed everywhere else: the theme still DECLARES `.eyebrow::before` and a
   later layer kills it with `content:none`, so no other page on the estate
   draws it and this page was the last one still doing so. */
.dev-eyebrow {
  color: #98edff;
  font-size: 12.5px;
  font-weight: 1000;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.dev-eyebrow::before,
.dev-eyebrow::after { content: none !important; display: none !important; }

/* --- the primary action. The site's gradient, not a third approximation of it
   (this page had #24c7f7 -> #5b72f8 -> #b548e6 against the site's own four
   stops), and reserved for the primary per L87 - everything else is quiet. */
.dev-button.primary {
  background-color: #1388ff;
  background-image: linear-gradient(135deg, #25e7ff, #1388ff 43%, #7442ff 72%, #a43cff);
  border-color: transparent;
  font-weight: 800;
  color: #fff;
}
.dev-pill,
.dev-button:not(.primary),
.dev-sidebar-foot a {
  background-color: rgba(255, 255, 255, .067);
  background-image: none;
  border-color: rgba(255, 255, 255, .12);
  font-weight: 700;
}

/* --- NOTHING MOVES UNDER THE POINTER. `transform:translateY(-1px)` was on
   every nav item, pill and button here. CLAUDE.md records that same hover
   twice as a real defect - it shifts a control as the cursor arrives, and it
   is what made Playwright refuse to click the microphone button as "not
   stable". A control should change colour when you are about to press it, not
   position. */
.dev-nav button:hover,
.dev-sidebar-foot a:hover,
.dev-pill:hover,
.dev-button:hover,
.dev-card:hover { transform: none !important; }

/* --- the sidebar. It was eleven full-width bordered rectangles at weight 900,
   which reads as a column of buttons rather than as navigation. Quiet by
   default, tinted when current - the same treatment the dashboard's own nav
   uses. */
.dev-nav button {
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  font-weight: 600;
  color: #bcb7dd;
}
.dev-nav button:hover {
  background-color: rgba(255, 255, 255, .05);
  border-color: transparent;
  color: #f8f7ff;
}
.dev-nav button.active {
  background-color: rgba(37, 231, 255, .12);
  border-color: rgba(37, 231, 255, .28);
  color: #f8f7ff;
  font-weight: 700;
}

/* --- A WHOLE SENTENCE IN LETTER-SPACED CAPITALS IS NOT A LABEL. The overview
   metric cards set their descriptions in uppercase ("USE A SUPABASE-BACKED
   SIMCOAI DEVELOPER ACCOUNT."), which is markedly harder to read than the
   sentence it is - capitals remove the word shapes a reader scans by. Caps stay
   on the eyebrows and the short status labels, where the string is one or two
   words and the shape is the point. */
.dev-shell .dev-grid.metrics small,
.dev-shell .dev-grid.metrics .metric small,
.dev-shell .dev-grid.metrics p {
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #bcb7dd !important;
  font-weight: 500 !important;
  font-size: 13px;
  line-height: 1.5;
}

/* THE CARDS WERE ALIGNED AND THEIR CONTENTS WERE NOT. These reuse the site's
   own `.metric` class, so they inherit `align-content:end` - every card the
   same height with its content pushed to the bottom edge. A description that
   wraps to three lines therefore starts 20px higher than one that wraps to
   two, and the four eyebrows sat on two different baselines across one row.
   Aligned from the TOP so the slack falls at the bottom where nothing reads
   against it, which is the same fix L65 used on the plan cards. */
.dev-shell .dev-grid.metrics > * { align-content: start; }

/* --- videos ----------------------------------------------------------------
   Marketing video library. A grid of cards rather than the .dev-list rows
   used elsewhere, because a thumbnail is the thing worth showing here - the
   whole point of this page is picking a clip quickly, and a text-only row
   forces opening each one to see what it is. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.video-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--dev-line);
  border-radius: 8px;
  background: var(--dev-panel);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
}

/* Fixed at the export's own 9:16 rather than left to the image's natural
   size, so a row of cards lines up before any thumbnail has loaded - the
   layout does not jump once the <img> requests resolve. */
.video-card-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--dev-bg-2);
}

.video-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(5, 9, 19, .78);
  color: var(--dev-text);
  font-size: 12px;
  font-weight: 850;
}

.video-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}

.video-card-body h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.video-card-meta {
  color: var(--dev-muted);
  font-size: 12px;
  line-height: 1.5;
}

.video-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.video-card-actions .dev-button {
  flex: 1;
  text-align: center;
}

/* The card itself is clickable (opens the posting-copy modal) as well as its
   Download/thumbnail actions, so it needs its own affordance and cursor, and
   the hint line has to read as secondary to the title/meta above it. */
.video-card {
  cursor: pointer;
}

.video-card-hint {
  margin: 0;
  color: var(--dev-cyan);
  font-size: 12px;
  font-weight: 700;
}

/* --- video posting-copy modal -----------------------------------------------
   Opened by clicking a card (never its actions, which stop propagation).
   Fixed, centred, dismissible by backdrop click, close button or Escape -
   the same three exits every other overlay on this page offers. */
.video-copy-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-copy-modal.hidden {
  display: none;
}

.video-copy-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 14, .74);
  backdrop-filter: blur(3px);
}

.video-copy-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--dev-line-strong);
  border-radius: 8px;
  background: var(--dev-panel-2);
  box-shadow: var(--dev-shadow);
}

.video-copy-panel h2 {
  margin: 0 0 4px;
  padding-right: 96px;
  font-size: 18px;
}

.video-copy-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

.video-copy-meta {
  margin: 0 0 12px;
  color: var(--dev-muted);
  font-size: 13px;
}

.video-copy-warning {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(251, 113, 133, .36);
  border-radius: 8px;
  background: rgba(251, 113, 133, .10);
  color: #ffe2e7;
  font-size: 13px;
  line-height: 1.5;
}

.copy-platform {
  margin-bottom: 18px;
}

.copy-platform h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--dev-cyan);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.copy-field {
  margin-bottom: 10px;
}

.copy-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--dev-soft);
  font-size: 12px;
  font-weight: 700;
}

.copy-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--dev-line);
  border-radius: 8px;
  background: var(--dev-bg-2);
  color: var(--dev-text);
  font: 500 13px/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  resize: vertical;
}