/* =========================================================
   Do3d — "Blood Ronin" theme
   ---------------------------------------------------------
   Single source of truth for the palette. Every page used to
   carry its own copy of this :root block, which meant a colour
   change was six edits and they had already drifted apart
   (index.html ran a lighter --bg and --text than the rest).
   Now each page links this file before its own <style>, so
   page-specific rules still win where they need to — this only
   supplies the tokens they read.

   Direction: crimson on bone over near-black, zero radius,
   one corner clipped off primary buttons. Angular, high
   contrast, no glow.

   Two notes if you retune it:
   • --accent used to be called --gold. The name changed with
     the colour so nothing reads as gold-but-red.
   • --danger is AMBER, not red, on purpose. Red is the accent
     here, so an error painted red would look like a button.
   ========================================================= */
:root{
  /* -- grounds ------------------------------------------- */
  --bg:#0A0708;          /* app background */
  --bg-soft:#0E0A0B;     /* marketing sections on index.html */
  --panel:#150F10;       /* cards, top bar, side panels */
  --panel-2:#1E1516;     /* inputs, wells, rows inside a panel */
  --rail:#0E0A0B;        /* the icon rail */
  --surface-3:#261B1C;   /* hover states, raised chips */

  /* -- edges --------------------------------------------- */
  --line:#2C1F21;        /* visible borders */
  --line-soft:#1F1516;   /* hairlines and dividers */

  /* -- accent (was --gold) -------------------------------- */
  --accent:#E01A2B;
  --accent-bright:#F5333F;
  --accent-dim:#7E1017;             /* borders, focus rings */
  --accent-glow:rgba(224,26,43,0.28);
  --on-accent:#FFF4F0;              /* text sitting on the accent */

  /* -- secondary + semantic ------------------------------- */
  --bone:#E8DCC8;        /* the calm counterweight to the crimson */
  --cyan:#45C8A0;        /* "live"/ok dots — jade reads as success next to red */
  --indigo:#7A5CE0;
  --danger:#FFB020;      /* amber: see the note above */
  --ok:#4FD17A;

  /* -- type ---------------------------------------------- */
  --text:#F0E9E4;
  --text-muted:#998682;
  --text-faint:#6B5A57;

  /* -- geometry ------------------------------------------ */
  --radius:0px;          /* the theme is square; kept as a token so
                            it can be dialled back up in one place */
  --notch:9px;           /* size of the clipped corner on primary buttons */
}

/* The signature move: the bottom-right corner is cut off every
   primary action. Declared here rather than per page so all six
   stay identical, and because no page sets clip-path itself —
   nothing downstream can accidentally override it. */
.generate-btn,
.btn-primary,
.btn-add,
.tb-cta,
.console-cta,
.gt-feature,
.upgrade-btn,
.tool-action-btn,
.d3k-btn-gold,
.lb-actions a.primary{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}

/* Focus has to stay visible once radius is gone and the accent is
   the same family as the old error colour. A hard offset ring
   suits the angular direction better than a soft glow. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

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

/* =========================================================
   TOP NAV — one centred pill of chips, same shape as the
   login page's sector switcher. Every page used to carry its
   own topbar links plus two loose "3D Workspace" buttons off
   to the left; this puts all four in one group and centres it.
   Opt in per page with <nav class="tb-nav chips">.
   The double class is deliberate: it outranks each page's own
   .tb-nav a rules no matter which stylesheet loads last.
   (No progress bar here — that belongs to the login carousel,
   which is stepping through sectors on a timer. This isn't.)
   ========================================================= */
.tb-nav.chips{
  margin:0 auto; flex:0 1 auto; display:flex; align-items:center; gap:4px;
  padding:5px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  overflow-x:auto; scrollbar-width:none; max-width:100%;
}
.tb-nav.chips::-webkit-scrollbar{ display:none; }
.tb-nav.chips a{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border:none; border-bottom:none; border-radius:999px; background:transparent;
  color:var(--text-muted); font:600 13px 'Outfit',sans-serif; text-decoration:none; white-space:nowrap;
  transition:color .25s, background .25s;
}
.tb-nav.chips a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.tb-nav.chips a.active,
.tb-nav.chips a[aria-current="page"]{
  color:#FFF4F0; font-weight:600; border-bottom:none;
  background:linear-gradient(180deg, rgba(224,26,43,.9), rgba(160,14,27,.9));
  box-shadow:0 4px 18px rgba(224,26,43,.35);
}
@media (max-width:900px){
  .tb-nav.chips{ display:flex; }                 /* pages that hid the nav on mobile keep it here */
  .tb-nav.chips a{ padding:8px 12px; font-size:12px; }
}

/* Centred on the viewport, not on the leftover space: the logo and the
   right-hand controls are different widths on every page, so plain auto
   margins land the pill off-centre (‑244px on the Workspace 2 header). */
.topbar, .topbar-inner{ position:relative; }
.tb-nav.chips{ position:absolute; left:50%; transform:translateX(-50%); margin:0; }
.tb-nav.chips + *{ margin-left:auto; }     /* the right-hand group keeps its edge */
@media (max-width:1180px){                  /* too tight to overlap — back into the row */
  .tb-nav.chips{ position:static; transform:none; margin:0 auto; }
  .tb-nav.chips + *{ margin-left:0; }
}