/* ============================================================
   INAJ — editorial concierge theme on top of Bootstrap 5.3.
   Warm cream paper, deep forest brand, coral signal accent.
   Display: Source Serif 4 (variable, opsz). Body: Geist. Mono: JetBrains Mono.
   ============================================================ */

:root {
  /* Palette */
  --inaj-paper:      #F4EFE5;
  --inaj-paper-deep: #EBE3D2;
  --inaj-paper-edge: #E2D8C1;
  --inaj-surface:    #FFFFFF;
  --inaj-ink:        #1A1614;
  --inaj-ink-soft:   #3A332D;
  --inaj-stone:      #6F665B;
  --inaj-stone-soft: #948A7C;
  --inaj-hairline:   #DDD3BE;
  --inaj-hairline-soft: #ECE3D0;

  --inaj-brand:      #0F3E36;   /* deep forest */
  --inaj-brand-deep: #082822;
  --inaj-brand-soft: #D6E1DC;

  --inaj-accent:     #C9442B;   /* signal coral */
  --inaj-accent-deep:#9D2F1B;
  --inaj-accent-soft:#F4D9CC;

  --inaj-good:       #2D6A4F;
  --inaj-good-soft:  #D5E5DB;
  --inaj-warn:       #B47B1F;
  --inaj-warn-soft:  #F2E1BE;
  --inaj-danger:     #A33024;
  --inaj-danger-soft:#F2D2CC;
  --inaj-info:       #3D5A80;
  --inaj-info-soft:  #D3DCE8;

  /* Type stacks */
  --inaj-display: "Source Serif 4", "Source Serif Pro",
                  "Iowan Old Style", "Charter", Georgia, serif;
  --inaj-sans:    "Geist", "Inter", ui-sans-serif, system-ui,
                  -apple-system, "Segoe UI", Roboto, sans-serif;
  --inaj-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular,
                  "SF Mono", Menlo, Consolas, monospace;

  /* Bootstrap variable overrides (5.3) */
  --bs-body-bg:               var(--inaj-paper);
  --bs-body-color:            var(--inaj-ink);
  --bs-body-secondary-color:  var(--inaj-stone);
  --bs-body-tertiary-color:   var(--inaj-stone-soft);
  --bs-body-tertiary-bg:      var(--inaj-paper-deep);
  --bs-body-secondary-bg:     var(--inaj-paper);
  --bs-border-color:          var(--inaj-hairline);
  --bs-border-color-translucent: var(--inaj-hairline);

  --bs-primary:       var(--inaj-brand);
  --bs-primary-rgb:   15, 62, 54;
  --bs-link-color:    var(--inaj-brand);
  --bs-link-color-rgb: 15, 62, 54;
  --bs-link-hover-color: var(--inaj-accent);
  --bs-link-hover-color-rgb: 201, 68, 43;

  --bs-success: var(--inaj-good);
  --bs-warning: var(--inaj-warn);
  --bs-danger:  var(--inaj-danger);
  --bs-info:    var(--inaj-info);

  --bs-font-sans-serif: var(--inaj-sans);
  --bs-font-monospace:  var(--inaj-mono);

  --bs-border-radius:    3px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 4px;

  --inaj-shadow-sm: 0 1px 0 rgba(26,22,20,.04), 0 1px 2px rgba(26,22,20,.04);
  --inaj-shadow:    0 1px 0 rgba(26,22,20,.05), 0 8px 24px -12px rgba(26,22,20,.18);
  --inaj-shadow-lg: 0 2px 0 rgba(26,22,20,.05), 0 24px 60px -28px rgba(26,22,20,.28);
}

/* ============================================================
   Page chrome: warm paper, subtle grain, opentype niceties
   ============================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--inaj-sans);
  font-feature-settings: "ss01", "ss02", "cv11", "cv10", "tnum" 0;
  letter-spacing: -0.005em;
  background-color: var(--inaj-paper);
  /* Hairline grain — pure SVG, inline, no extra HTTP. Keeps the cream
     surface from looking flat under big monitors. */
  background-image:
    radial-gradient(1100px 600px at 88% -10%, rgba(15,62,54,0.05), transparent 60%),
    radial-gradient(900px 500px at -5% 8%, rgba(201,68,43,0.04), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed, fixed;
  background-size: auto, auto, 180px 180px;
}

main { min-height: calc(100vh - 110px); }

/* ============================================================
   Typography
   ============================================================ */

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--inaj-display);
  font-weight: 460;
  letter-spacing: -0.018em;
  color: var(--inaj-ink);
  /* Engage Source Serif 4's optical-size axis for big headlines */
  font-variation-settings: "opsz" 56;
}
h1, .h1 { font-size: clamp(2.1rem, 3.6vw, 2.85rem); line-height: 1.05; }
h2, .h2 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); line-height: 1.12; }
h3, .h3 { font-size: 1.35rem; line-height: 1.2;
          font-variation-settings: "opsz" 36; }
h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--inaj-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--inaj-ink);
}
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1.0rem; }
h6, .h6 { font-size: 0.875rem; }

.lead {
  font-family: var(--inaj-display);
  font-weight: 380;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--inaj-ink-soft);
  font-variation-settings: "opsz" 30;
  letter-spacing: -0.008em;
}

p { color: var(--inaj-ink-soft); }
.text-body-secondary { color: var(--inaj-stone) !important; }

a {
  color: var(--inaj-brand);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover {
  color: var(--inaj-accent);
  text-decoration: underline;
  text-decoration-color: var(--inaj-accent);
}
a.text-decoration-none:hover { text-decoration: none; color: var(--inaj-accent); }

code, pre, .font-monospace {
  font-family: var(--inaj-mono);
  font-feature-settings: "ss03", "ss05";
}
code {
  font-size: 0.85em;
  color: var(--inaj-accent-deep);
  background: var(--inaj-accent-soft);
  padding: 0.05em 0.35em;
  border-radius: 2px;
}

/* A small reusable "kicker" — uppercase, tracked, hairline */
.eyebrow,
.kicker {
  font-family: var(--inaj-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inaj-stone);
}

/* ============================================================
   Navbar — wordmark with tracked monogram + hairline under-rule
   ============================================================ */

.navbar {
  background-color: var(--inaj-paper) !important;
  border-bottom: 1px solid var(--inaj-hairline) !important;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  position: relative;
}
.navbar::after {
  /* a second, almost-imperceptible rule for an editorial double-line */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--inaj-hairline-soft);
}

.navbar-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0.15rem;
}
.navbar-brand .brand-mark {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 480;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  color: var(--inaj-ink);
  font-variation-settings: "opsz" 48;
}
.navbar-brand .brand-mark .amp,
.navbar-brand .brand-mark em {
  color: var(--inaj-accent);
  font-style: italic;
  margin: 0 0.04em;
  font-variation-settings: "opsz" 48;
}
.navbar-brand .brand-sub {
  font-family: var(--inaj-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--inaj-stone);
}
.navbar-brand:hover .brand-mark { color: var(--inaj-brand); }

.navbar .nav-link {
  font-family: var(--inaj-sans);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--inaj-ink-soft) !important;
  padding: 0.45rem 0.85rem;
  position: relative;
  border-radius: 0;
  letter-spacing: -0.003em;
}
.navbar .nav-link:hover { color: var(--inaj-accent) !important; }
.navbar .nav-link.active {
  color: var(--inaj-ink) !important;
  font-weight: 600;
}
/* Underline indicator only makes sense when the navbar is horizontal.
   Below the md breakpoint (navbar-expand-md collapses to a vertical
   dropdown), `bottom: -0.95rem` puts the bar INSIDE the next stacked
   nav item — observed on mobile 2026-05-17 where the underline cut
   through "Job Preferences" below the active "Dashboard". The
   font-weight + color shift from `.active` still distinguishes the
   active item on mobile. */
@media (min-width: 768px) {
  .navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.85rem; right: 0.85rem;
    bottom: -0.95rem;
    height: 2px;
    background: var(--inaj-accent);
  }
}

.navbar-toggler {
  border-color: var(--inaj-hairline);
  border-radius: 2px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 0.15rem var(--inaj-accent-soft); }

/* Mobile navbar controls (dashboard only): the hamburger and the search
   toggle render as one matched pair of equal boxes. Both live in a d-md-none
   group, so this is mobile-only. The brand tagline is dropped on phones — at
   ~222px it overflows and pushes the controls onto a second line; the
   "i need a job" mark alone is the brand here. See base.html navbar. */
@media (max-width: 767.98px) {
  .navbar-brand .brand-sub { display: none; }

  .navbar-toggler,
  .navbar-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.4rem;
    padding: 0;
    border: var(--bs-border-width) solid var(--inaj-hairline);
    border-radius: 2px;
    line-height: 1;
  }
  .navbar-search-toggle {
    color: var(--bs-body-color);
    background: transparent;
    cursor: pointer;
  }
  .navbar-search-toggle:hover { color: var(--inaj-brand); }
  .navbar-search-toggle:focus { box-shadow: 0 0 0 0.15rem var(--inaj-accent-soft); }
}

/* ============================================================
   Cards — float on the paper, hairline border, no chunky radius
   ============================================================ */

.card {
  background-color: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--inaj-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card.shadow-sm { box-shadow: var(--inaj-shadow) !important; }

a.text-decoration-none > .card:hover,
.card-link:hover {
  border-color: var(--inaj-brand);
  box-shadow: var(--inaj-shadow);
  transform: translateY(-1px);
}

.card-body { padding: 1.5rem; }
@media (max-width: 576px) { .card-body { padding: 1.1rem; } }

.card.bg-body-tertiary {
  background-color: var(--inaj-paper-deep) !important;
  border-style: dashed;
  border-color: var(--inaj-hairline);
}

/* Subtle warning-tinted card used for "Bad matches" — keep restrained */
.card.border-warning-subtle {
  border-color: var(--inaj-hairline);
  border-left: 3px solid var(--inaj-warn);
  background-color: var(--inaj-surface);
}

/* The JD submit card gets the brand stripe */
#submit-jd .card { border-top: 2px solid var(--inaj-brand); }

/* ============================================================
   Section headings on the dashboard
   ============================================================ */

section > .d-flex > h2,
section > h2 {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.015em;
}
section > .d-flex > h2 .fs-6 {
  font-family: var(--inaj-sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem !important;
  color: var(--inaj-stone);
  margin-left: 0.35rem;
}

/* ============================================================
   Buttons — square corners, confident hover lift
   ============================================================ */

.btn {
  font-family: var(--inaj-sans);
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: 2px;
  padding: 0.5rem 1.1rem;
  border-width: 1px;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, transform .12s ease,
              box-shadow .15s ease;
}
.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
}
.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--inaj-accent-soft);
  outline: none;
}

.btn-primary {
  background-color: var(--inaj-brand);
  border-color: var(--inaj-brand);
  color: #F4EFE5;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--inaj-brand-deep);
  border-color: var(--inaj-brand-deep);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
  color: var(--inaj-brand);
  border-color: var(--inaj-brand);
  background-color: transparent;
}
.btn-outline-primary:hover {
  color: #F4EFE5;
  background-color: var(--inaj-brand);
  border-color: var(--inaj-brand);
}

.btn-outline-secondary {
  color: var(--inaj-ink-soft);
  border-color: var(--inaj-hairline);
  background-color: transparent;
}
.btn-outline-secondary:hover {
  color: var(--inaj-ink);
  background-color: var(--inaj-paper-deep);
  border-color: var(--inaj-stone-soft);
}

.btn-outline-success {
  color: var(--inaj-good);
  border-color: var(--inaj-good);
}
.btn-outline-success:hover {
  background-color: var(--inaj-good);
  border-color: var(--inaj-good);
  color: #F4EFE5;
}

.btn-outline-danger {
  color: var(--inaj-danger);
  border-color: var(--inaj-danger-soft);
}
.btn-outline-danger:hover {
  background-color: var(--inaj-danger);
  border-color: var(--inaj-danger);
  color: #F4EFE5;
}

.btn-warning {
  background-color: var(--inaj-accent);
  border-color: var(--inaj-accent);
  color: #FFFFFF;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--inaj-accent-deep);
  border-color: var(--inaj-accent-deep);
  color: #FFFFFF;
}

/* "Sign out" is small in the nav — keep it discreet */
.navbar .btn-outline-secondary {
  border-color: var(--inaj-hairline);
  color: var(--inaj-stone);
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
}

/* ============================================================
   Forms
   ============================================================ */

.form-label {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  margin-bottom: 0.4rem;
}
.form-control,
.form-select {
  background-color: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: 2px;
  color: var(--inaj-ink);
  padding: 0.6rem 0.85rem;
  font-family: var(--inaj-sans);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* Bootstrap reserves padding-right: 2.25rem on .form-select for its caret
   SVG (16px wide at right 0.75rem). The combined rule above clobbers
   that, so the chevron paints on top of the selected option's last
   characters ("anthropi⌄" eating the final "c"). Put it back. */
.form-select { padding-right: 2.25rem; }
.form-control:focus,
.form-select:focus {
  background-color: var(--inaj-surface);
  border-color: var(--inaj-brand);
  box-shadow: 0 0 0 3px var(--inaj-brand-soft);
  color: var(--inaj-ink);
}
.form-control::placeholder { color: var(--inaj-stone-soft); }
.form-text { color: var(--inaj-stone); font-size: 0.8rem; }
.form-control.is-invalid {
  border-color: var(--inaj-danger);
  background-image: none;
  padding-right: 0.85rem;
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--inaj-danger-soft);
}
.invalid-feedback { color: var(--inaj-danger); font-size: 0.8rem; }

textarea.form-control { font-family: var(--inaj-mono); font-size: 0.9rem; line-height: 1.55; }

/* ============================================================
   Alerts
   ============================================================ */

.alert {
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
}
/* The flat 1rem inline padding above wipes Bootstrap's reserved
   right-padding for `.alert-dismissible`, which is what keeps the
   absolutely-positioned `.btn-close` from sitting on top of the
   message text. Restore it explicitly. */
.alert-dismissible {
  padding-right: 3rem;
}
.alert-success {
  background-color: var(--inaj-good-soft);
  border-color: var(--inaj-good);
  color: #163A2C;
}
.alert-danger,
.alert-error {
  background-color: var(--inaj-danger-soft);
  border-color: var(--inaj-danger);
  color: var(--inaj-danger);
}
.alert-warning {
  background-color: var(--inaj-warn-soft);
  border-color: var(--inaj-warn);
  color: #5A3D0A;
}
.alert-info {
  background-color: var(--inaj-info-soft);
  border-color: var(--inaj-info);
  color: var(--inaj-info);
}

/* ============================================================
   Badges — small caps, tracked
   ============================================================ */

.badge {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.55em;
  border-radius: 2px;
  vertical-align: 0.18em;
}
.badge.text-bg-success {
  background-color: var(--inaj-good-soft) !important;
  color: var(--inaj-good) !important;
  border: 1px solid var(--inaj-good);
}
.badge.text-bg-warning {
  background-color: var(--inaj-warn-soft) !important;
  color: #5A3D0A !important;
  border: 1px solid var(--inaj-warn);
}
.badge.text-bg-danger {
  background-color: var(--inaj-danger-soft) !important;
  color: var(--inaj-danger) !important;
  border: 1px solid var(--inaj-danger);
}
.badge.text-bg-info {
  background-color: var(--inaj-info-soft) !important;
  color: var(--inaj-info) !important;
  border: 1px solid var(--inaj-info);
}
.badge.text-bg-secondary {
  background-color: var(--inaj-paper-deep) !important;
  color: var(--inaj-stone) !important;
  border: 1px solid var(--inaj-hairline);
}

/* ============================================================
   List groups
   ============================================================ */

.list-group { border-radius: var(--bs-border-radius); overflow: hidden; }
.list-group-item {
  background-color: var(--inaj-surface);
  border-color: var(--inaj-hairline);
  padding: 1rem 1.25rem;
  transition: background-color .15s ease;
}
.list-group-item:hover { background-color: var(--inaj-paper-deep); }

/* ============================================================
   Pagination
   ============================================================ */

.page-link {
  color: var(--inaj-ink-soft);
  background-color: var(--inaj-surface);
  border-color: var(--inaj-hairline);
  font-family: var(--inaj-sans);
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
}
.page-link:hover {
  color: var(--inaj-accent);
  background-color: var(--inaj-paper-deep);
  border-color: var(--inaj-stone-soft);
}
.page-item.active .page-link {
  background-color: var(--inaj-brand);
  border-color: var(--inaj-brand);
  color: #F4EFE5;
}
.page-item.disabled .page-link { color: var(--inaj-stone-soft); background-color: var(--inaj-paper); }

/* ============================================================
   Impersonation banner — keep it loud but on-theme
   ============================================================ */

.alert.rounded-0 {
  background-color: var(--inaj-accent);
  color: #FFFFFF;
  border: 0;
  border-bottom: 1px solid var(--inaj-accent-deep);
}
.alert.rounded-0 .btn { background-color: #FFFFFF; color: var(--inaj-accent-deep); border-color: #FFFFFF; }
.alert.rounded-0 .btn:hover { background-color: var(--inaj-paper); color: var(--inaj-accent-deep); }

/* ============================================================
   Dev-VM banner — unmistakable "not production" strip
   ============================================================ */
.dev-env-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;               /* above the navbar */
  padding: 0.4rem 1rem;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1b1b1b;
  background-color: #f0b000;
  background-image: repeating-linear-gradient(
    45deg, rgba(0,0,0,0.12) 0 12px, transparent 12px 24px);
  border-bottom: 2px solid #8a6500;
}
body.dev-banner-active { padding-top: 2.2rem; }

/* ============================================================
   Hero treatment used on welcome / login / signup pages
   ============================================================ */

.inaj-hero {
  padding: 2.5rem 0 1rem;
  text-align: left;
}
.inaj-hero .kicker { margin-bottom: 0.75rem; }
.inaj-hero h1 {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1.0;
  margin: 0 0 0.5rem;
  font-variation-settings: "opsz" 60;
}
.inaj-hero h1 em {
  font-style: italic;
  color: var(--inaj-accent);
  font-variation-settings: "opsz" 60;
}
.inaj-hero .lead { max-width: 38em; margin-bottom: 1.5rem; }
.inaj-hero .rule {
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--inaj-accent);
  margin: 1.25rem 0 1.5rem;
}

/* Centered hero (login / signup) */
.inaj-hero.is-centered { text-align: center; }
.inaj-hero.is-centered .rule,
.inaj-hero.is-centered .lead { margin-left: auto; margin-right: auto; }

/* ============================================================
   Report body — keep readable, but switch to editorial type
   ============================================================ */

.report-body { font-size: 1rem; line-height: 1.65; }
.report-body h1:first-child { display: none; }
/* The h1 above is display:none, so the first visible child is usually
   an h2 ("JD Requirements") whose 2rem top margin compounds with the
   card-body padding into a wedge of empty space. Zero that margin
   when the h2 is the first or second child (the h1 sibling counts
   even though it's hidden). */
.report-body > h2:first-child,
.report-body > h1:first-child + h2 {
  margin-top: 0;
}
.report-body h2 {
  margin-top: 2rem;
  font-size: 1.45rem;
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-variation-settings: "opsz" 48;
  color: var(--inaj-ink);
  border-bottom: 1px solid var(--inaj-hairline);
  padding-bottom: 0.4rem;
}
.report-body h3 {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  font-family: var(--inaj-sans);
  font-weight: 600;
  letter-spacing: 0.005em;
}
.report-body p { color: var(--inaj-ink-soft); }
.report-body blockquote {
  border-left: 3px solid var(--inaj-accent);
  margin: 1.25rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--inaj-ink-soft);
  font-family: var(--inaj-display);
  font-style: italic;
  font-size: 1.1rem;
  font-variation-settings: "opsz" 30;
}

/* Tables inside reports / customization plan */
.report-body table,
.customization-plan table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92rem;
  font-family: var(--inaj-sans);
  table-layout: auto;
  background-color: var(--inaj-surface);
}
.report-body th,
.report-body td,
.customization-plan th,
.customization-plan td {
  border: 1px solid var(--inaj-hairline);
  padding: 0.65rem 0.85rem;
  vertical-align: top;
  /* break-word, not anywhere: the browser breaks inside a word only
     as a last resort, so "Performance" / "ER + risk + judgment" /
     similar short JD requirements stay intact instead of splitting
     into "Performan / ce". Long URLs are still handled — there's a
     more specific `.report-body a / code` rule below that re-enables
     mid-string breaks on anchor and code elements. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.report-body th,
.customization-plan th {
  background: var(--inaj-paper-deep);
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  text-align: left;
}
.customization-plan th:first-child,
.customization-plan td:first-child {
  width: 2.75rem;
  text-align: center;
  font-weight: 600;
}

/* gaps block */
.gaps-block pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--inaj-mono);
  font-size: 0.85rem;
  margin: 0;
  color: var(--inaj-ink-soft);
}

/* ============================================================
   Long-URL handling (preserved from original)
   ============================================================ */

.card a,
.card code,
.list-group-item a,
.list-group-item code,
.breadcrumb a,
.report-body a,
.report-body code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.card object,
.card iframe,
.card img,
.card embed { max-width: 100%; }

/* Flex children default to min-width:auto, which refuses to shrink below
   their longest unbreakable content — so a long JD URL or title pushes
   the card wider than the viewport on mobile instead of wrapping. */
.min-w-0 { min-width: 0; }

/* ============================================================
   Mobile refinements (carried forward + retuned)
   ============================================================ */

@media (max-width: 575.98px) {
  main.container { padding-left: 0.85rem; padding-right: 0.85rem; }
  .card > .card-body.p-0 > object[type="application/pdf"] {
    height: 50vh;
    min-height: 320px;
  }
  .inaj-hero { padding-top: 1.5rem; }
}

@media (max-width: 575.98px) {
  .report-body table,
  .customization-plan table { display: block; width: 100%; border: 0; }
  .report-body thead,
  .customization-plan thead { display: none; }
  .report-body tbody,
  .report-body tr,
  .customization-plan tbody,
  .customization-plan tr { display: block; width: 100%; }
  .report-body tr,
  .customization-plan tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--inaj-hairline);
    border-radius: var(--bs-border-radius);
    padding: 0.6rem 0.85rem;
    background: var(--inaj-surface);
  }
  .report-body td,
  .customization-plan td {
    display: block;
    width: 100%;
    border: 0;
    padding: 0.15rem 0;
    font-size: 0.9rem;
    /* Reset the compact-first-col / compact-last-col rules that pin
       label columns to `white-space: nowrap; width: 1%` on desktop —
       when the table stacks into per-row cards, the "label" cell is
       full-width and long prose in it must wrap, not overflow. */
    white-space: normal;
  }
  .report-body td:first-child,
  .customization-plan td:first-child {
    font-weight: 600;
    font-size: 0.95rem;
    padding-bottom: 0.25rem;
  }
  .report-body td:nth-child(2),
  .customization-plan td:nth-child(2) { color: var(--inaj-stone); }
  .report-body td:last-child:not(:only-child),
  .customization-plan td:last-child:not(:only-child) {
    margin-top: 0.25rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--inaj-hairline);
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .report-body th,
  .report-body td,
  .customization-plan th,
  .customization-plan td {
    padding: 0.45rem 0.55rem;
    font-size: 0.875rem;
  }
}

/* ============================================================
   HOMEPAGE — public marketing page
   Full-bleed sections via .home / .home-section
   ============================================================ */

.home {
  display: block;
  min-height: calc(100vh - 110px);
  padding-bottom: 0;
}

/* shared anchor-link "see how it works" affordance */
.btn-text-link {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--inaj-ink-soft);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  padding: 0.55rem 0;
}
.btn-text-link:hover {
  color: var(--inaj-accent);
  border-color: var(--inaj-accent);
}

/* Big "accent" CTA button — used in the final CTA strip */
.btn-accent {
  background-color: var(--inaj-accent);
  border-color: var(--inaj-accent);
  color: #FFFFFF;
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--inaj-accent-deep);
  border-color: var(--inaj-accent-deep);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.btn-lg {
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* ============================================================
   Hero
   ============================================================ */

.home-hero {
  position: relative;
  padding: 3.5rem 0 3rem;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(15,62,54,0.08), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(201,68,43,0.06), transparent 55%);
}
@media (min-width: 992px) {
  .home-hero { padding: 5.5rem 0 5rem; }
}

.home-hero__title {
  font-family: var(--inaj-display);
  font-weight: 380;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--inaj-ink);
  font-variation-settings: "opsz" 60;
  margin: 0.5rem 0 1.25rem;
}
.home-hero__title em {
  font-style: italic;
  color: var(--inaj-accent);
  font-variation-settings: "opsz" 60;
}

.home-hero__lead {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  line-height: 1.45;
  color: var(--inaj-ink-soft);
  max-width: 34em;
  margin-bottom: 1.8rem;
  font-variation-settings: "opsz" 30;
}

.home-hero__fineprint {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--inaj-stone);
  font-family: var(--inaj-sans);
  letter-spacing: 0.005em;
}

.home-hero__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--inaj-hairline);
}

/* Hero side-panel mini-mockup */
.home-hero__card {
  position: relative;
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-top: 2px solid var(--inaj-brand);
  border-radius: var(--bs-border-radius);
  padding: 1.5rem 1.4rem;
  box-shadow:
    0 1px 0 rgba(26,22,20,.04),
    0 24px 60px -28px rgba(26,22,20,.22);
  transform: rotate(0.4deg);
}
@media (max-width: 991px) {
  .home-hero__card { transform: none; margin-top: 1.5rem; }
}

.mock-stamp {
  display: inline-block;
  font-family: var(--inaj-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inaj-accent);
  background: var(--inaj-accent-soft);
  border: 1px solid var(--inaj-accent);
  border-radius: 2px;
  padding: 0.25rem 0.55rem;
  margin-bottom: 0.75rem;
}
.mock-stamp--corner {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  margin-bottom: 0;
  z-index: 2;
}

.mock-row {
  padding: 0.7rem 0;
  border-top: 1px solid var(--inaj-hairline-soft);
}
.mock-row:first-of-type { border-top: 0; }
.mock-row__title {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--inaj-ink);
  line-height: 1.25;
  margin-bottom: 0.2rem;
}
.mock-row__meta {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  color: var(--inaj-stone);
}
.mock-row--good { border-left: 2px solid var(--inaj-good); padding-left: 0.65rem; margin-left: -0.65rem; }
.mock-row--applied { border-left: 2px solid var(--inaj-info); padding-left: 0.65rem; margin-left: -0.65rem; }

.mock-tag {
  display: inline-block;
  font-family: var(--inaj-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  vertical-align: 0.1em;
  margin-left: 0.35em;
}
.mock-tag--good { background: var(--inaj-good-soft); color: var(--inaj-good); border: 1px solid var(--inaj-good); }
.mock-tag--warn { background: var(--inaj-warn-soft); color: #5A3D0A; border: 1px solid var(--inaj-warn); }
.mock-tag--bad  { background: var(--inaj-danger-soft); color: var(--inaj-danger); border: 1px solid var(--inaj-danger); }

/* ============================================================
   Generic home section
   ============================================================ */

.home-section {
  padding: 5rem 0;
  position: relative;
}
.home-section--dim {
  background: var(--inaj-paper-deep);
  border-top: 1px solid var(--inaj-hairline);
  border-bottom: 1px solid var(--inaj-hairline);
}

.home-section__title {
  font-family: var(--inaj-display);
  font-weight: 420;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--inaj-ink);
  margin: 0.4rem 0 0.75rem;
  font-variation-settings: "opsz" 56;
}
.home-section__title em {
  font-style: italic;
  color: var(--inaj-accent);
  font-variation-settings: "opsz" 56;
}
.home-section__lead {
  font-family: var(--inaj-display);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 360;
  line-height: 1.5;
  color: var(--inaj-ink-soft);
  font-variation-settings: "opsz" 30;
  max-width: 36em;
}

/* ============================================================
   How-it-works steps
   ============================================================ */

.home-step {
  padding-top: 1rem;
  border-top: 2px solid var(--inaj-ink);
}
.home-step__num {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 320;
  font-size: 3rem;
  color: var(--inaj-accent);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 60;
  margin-bottom: 0.6rem;
}
.home-step__title {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--inaj-ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.4rem;
}
.home-step__body {
  color: var(--inaj-ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   Pillars (why it's different)
   ============================================================ */

.home-pillar {
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  height: 100%;
  transition: border-color .15s ease, transform .15s ease;
}
.home-pillar:hover { border-color: var(--inaj-brand); transform: translateY(-2px); }
.home-pillar__title {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-size: 1.45rem;
  color: var(--inaj-ink);
  margin-bottom: 0.5rem;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
}
.home-pillar p {
  margin: 0;
  color: var(--inaj-ink-soft);
  font-size: 0.96rem;
  line-height: 1.55;
}

/* ============================================================
   Dashboard mockup ("browser chrome" wrapper)
   ============================================================ */

.mock-frame {
  margin: 1.5rem 0 0;
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(26,22,20,.04),
    0 40px 100px -40px rgba(26,22,20,.35);
}
.mock-frame__chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--inaj-paper-deep);
  border-bottom: 1px solid var(--inaj-hairline);
  padding: 0.65rem 0.85rem;
}
.mock-frame__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--inaj-hairline);
  display: inline-block;
}
.mock-frame__dot--r { background: #E66B5C; }
.mock-frame__dot--y { background: #E7B83C; }
.mock-frame__dot--g { background: #6FB37D; }
.mock-frame__url {
  margin-left: 0.9rem;
  font-family: var(--inaj-mono);
  font-size: 0.78rem;
  color: var(--inaj-stone);
  background: var(--inaj-paper);
  border: 1px solid var(--inaj-hairline);
  border-radius: 2px;
  padding: 0.15rem 0.6rem;
}

.mock-frame__body {
  position: relative;
  padding: 1.75rem 1.75rem 2rem;
  background: var(--inaj-paper);
}
@media (max-width: 575.98px) {
  .mock-frame__body { padding: 1.1rem 1rem 1.4rem; }
  .mock-frame__url { display: none; }
}

.mock-card {
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.8rem;
}
.mock-card--brand { border-top: 2px solid var(--inaj-brand); margin-bottom: 1.5rem; }
.mock-card--good  { border-top: 2px solid var(--inaj-good); }
.mock-card--bad   { border-top: 2px solid var(--inaj-warn); border-left: 3px solid var(--inaj-warn); }

.mock-card__title {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--inaj-ink);
  margin-bottom: 0.2rem;
  letter-spacing: -0.005em;
}
.mock-card__sub {
  font-family: var(--inaj-sans);
  font-size: 0.85rem;
  color: var(--inaj-stone);
  margin: 0 0 0.85rem;
}
.mock-card__meta {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  color: var(--inaj-stone);
}
.mock-card__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
/* The content column holds a `white-space: nowrap` URL. Without this,
   the flex item's default `min-width: auto` resolves to that URL's
   full width — the column balloons past the card and the URL never
   reaches its `text-overflow: ellipsis`. min-width:0 lets it shrink
   so the URL truncates as designed. */
.mock-card__row > div:first-child { min-width: 0; }
.mock-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mock-note {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  color: var(--inaj-ink-soft);
}

.mock-section { margin-top: 1.75rem; }
.mock-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.mock-section__title {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-size: 1.35rem;
  color: var(--inaj-ink);
  margin: 0;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
}
.mock-section__sub {
  font-family: var(--inaj-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  margin-left: 0.35rem;
}
.mock-section__count {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  color: var(--inaj-stone);
}

.mock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  background: var(--inaj-surface);
  overflow: hidden;
}
.mock-list__item {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--inaj-hairline);
  border-left: 2px solid var(--inaj-info);
}
.mock-list__item:first-child { border-top: 0; }
.mock-list__title {
  font-family: var(--inaj-sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--inaj-ink);
  margin-bottom: 0.15rem;
}
.mock-list__meta {
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
  color: var(--inaj-stone);
}

.mock-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.55rem;
}
.mock-input {
  flex: 1 1 260px;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--inaj-hairline);
  border-radius: 2px;
  background: var(--inaj-paper);
  font-family: var(--inaj-mono);
  font-size: 0.82rem;
  color: var(--inaj-stone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--inaj-sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.005em;
  padding: 0.4rem 0.85rem;
  border-radius: 2px;
  border: 1px solid var(--inaj-hairline);
  background: var(--inaj-surface);
  color: var(--inaj-ink-soft);
  white-space: nowrap;
}
.mock-btn--primary { background: var(--inaj-brand); border-color: var(--inaj-brand); color: #F4EFE5; }
.mock-btn--warn    { background: var(--inaj-accent); border-color: var(--inaj-accent); color: #FFFFFF; }
.mock-btn--outline { color: var(--inaj-brand); border-color: var(--inaj-brand); background: transparent; }
.mock-btn--outline-mute { color: var(--inaj-ink-soft); }
.mock-btn--outline-good { color: var(--inaj-good); border-color: var(--inaj-good); background: transparent; }
.mock-btn--outline-danger { color: var(--inaj-accent); border-color: var(--inaj-hairline); background: transparent; }

.mock-card__url {
  margin-top: 0.35rem;
  font-family: var(--inaj-mono);
  font-size: 0.72rem;
  color: var(--inaj-stone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 38em;
}

.mock-row__url {
  font-family: var(--inaj-mono);
  font-size: 0.72rem;
  color: var(--inaj-stone);
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.mock-pager {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 0.85rem;
  font-family: var(--inaj-sans);
  font-size: 0.78rem;
}
.mock-pager__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--inaj-hairline);
  background: var(--inaj-surface);
  color: var(--inaj-ink-soft);
  border-radius: 2px;
}
.mock-pager__page {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-top: 1px solid var(--inaj-hairline);
  border-bottom: 1px solid var(--inaj-hairline);
  border-left: 0;
  border-right: 0;
  background: var(--inaj-brand);
  color: #F4EFE5;
  font-weight: 600;
  font-size: 0.78rem;
}

/* ---- Kanban board preview (mirrors the real .board on the dashboard) ----
   Self-contained mock-* classes so the marketing page never breaks when the
   live dashboard CSS changes. Visual parity with .board / .board-col /
   .board-card is intentional but the rules are independent. */
.mock-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: start;
  margin-top: 1.5rem;
}
@media (max-width: 991px)    { .mock-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .mock-board { grid-template-columns: 1fr; } }

.mock-col {
  background-color: var(--inaj-paper-deep);
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  padding: 0 0.85rem 1rem;
  min-width: 0;
  overflow: hidden;
}
.mock-col__rule {
  height: 4px;
  margin: 0 -0.85rem;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  background-color: var(--inaj-stone-soft);
}
.mock-col__rule--good { background-color: var(--inaj-good); }
.mock-col__rule--info { background-color: var(--inaj-info); }
.mock-col__rule--warn { background-color: var(--inaj-accent); }

.mock-col__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.9rem 0.2rem 0.1rem;
}
.mock-col__title {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.015em;
  font-size: 1.3rem;
  color: var(--inaj-ink);
  margin: 0;
}
.mock-col__count {
  margin-left: auto;
  background-color: var(--inaj-hairline);
  color: var(--inaj-ink-soft);
  border-radius: 20px;
  padding: 0.1rem 0.6rem;
  font-family: var(--inaj-sans);
  font-size: 0.74rem;
  font-weight: 600;
}
.mock-col__sub {
  color: var(--inaj-stone);
  font-family: var(--inaj-sans);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 0.2rem 0.7rem;
}

/* Cards inside a column: the colored top rule lives on the column, so
   neutralize the standalone .mock-card--good/--bad borders here. */
.mock-col .mock-card {
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.7rem;
  box-shadow: var(--inaj-shadow-sm);
}
.mock-col .mock-card:last-child { margin-bottom: 0; }
.mock-col .mock-card--good { border-top: 0; }
.mock-col .mock-card--bad {
  border-top: 0;
  border-left: 0;
  background-color: var(--inaj-paper);
}

.mock-card__company {
  font-family: var(--inaj-sans);
  color: var(--inaj-accent);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.mock-card__role {
  font-family: var(--inaj-display);
  font-weight: 560;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--inaj-ink);
  margin: 0.2rem 0 0.4rem;
  overflow-wrap: anywhere;
}
.mock-card__loc {
  font-family: var(--inaj-sans);
  color: var(--inaj-stone);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}
.mock-card__score { font-weight: 700; color: var(--inaj-ink-soft); }
.mock-card__score--bad { color: var(--inaj-accent); }

.mock-col .mock-note { margin-top: 0.6rem; font-size: 0.82rem; }

/* ============================================================
   Mock Actions panel — docs illustration of the workspace
   Actions bar: a collapsible brand bar + a checklist of rows.
   Static (no JS); mirrors the live .actions-* component in look
   only, so the docs render the same thing users see in the app.
   ============================================================ */
.mock-actions { margin: 1.5rem 0; }
.mock-actions__bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  background: var(--inaj-brand);
  color: #fff;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  padding: 0.7rem 1.05rem;
}
.mock-actions__chev { font-size: 0.8rem; opacity: 0.85; display: inline-block; }
.mock-actions__ttl {
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--inaj-sans);
}
.mock-actions__pill {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  font-family: var(--inaj-sans);
}
.mock-actions__body {
  border: 1px solid var(--inaj-hairline);
  border-top: none;
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  background: var(--inaj-surface);
  overflow: hidden;
}
.mock-actions__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--inaj-hairline);
  font-family: var(--inaj-sans);
}
.mock-actions__row:last-child { border-bottom: none; }
.mock-actions__ico {
  flex: 0 0 1.3rem;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}
.mock-actions__ico--done { background: var(--inaj-good); color: #fff; }
.mock-actions__ico--box { border: 2px solid var(--inaj-brand); border-radius: 3px; }
.mock-actions__ico--running { color: var(--inaj-warn); }
.mock-actions__ico--lock { color: var(--inaj-stone-soft); }
.mock-actions__label { flex: 1 1 auto; font-weight: 560; color: var(--inaj-ink); }
.mock-actions__sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--inaj-stone);
}
.mock-actions__meta {
  flex: 0 0 auto;
  font-size: 0.82rem;
  text-align: right;
  color: var(--inaj-stone);
}
.mock-actions__meta--link { color: var(--inaj-brand); font-weight: 600; }
.mock-actions__row--locked { background: var(--inaj-paper-deep); }
.mock-actions__row--locked .mock-actions__label {
  font-weight: 500;
  color: var(--inaj-stone-soft);
}
.mock-actions__row--locked .mock-actions__meta { font-style: italic; }
.mock-actions__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.1rem;
  background: var(--inaj-paper-deep);
  border-top: 1px solid var(--inaj-hairline);
  font-family: var(--inaj-sans);
  font-size: 0.85rem;
  color: var(--inaj-stone);
}

/* ============================================================
   Pricing
   ============================================================ */

.home-price {
  background: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-top: 3px solid var(--inaj-brand);
  border-radius: var(--bs-border-radius);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--inaj-shadow);
}
@media (min-width: 768px) { .home-price { padding: 3rem 3rem 2.5rem; } }

.home-price__amount {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  margin-bottom: 0.4rem;
}
.home-price__dollar {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2rem;
  color: var(--inaj-ink-soft);
  align-self: flex-start;
  margin-top: 0.6rem;
  font-variation-settings: "opsz" 60;
}
.home-price__num {
  font-family: var(--inaj-display);
  font-weight: 380;
  font-size: clamp(4.5rem, 9vw, 6.5rem);
  line-height: 1;
  color: var(--inaj-ink);
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 60;
}
.home-price__per {
  font-family: var(--inaj-sans);
  font-size: 1rem;
  color: var(--inaj-stone);
  margin-left: 0.3rem;
}
.home-price__tag {
  font-family: var(--inaj-sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inaj-accent);
  margin-bottom: 1.5rem;
}

.home-price__list {
  list-style: none;
  margin: 0 auto 1.75rem;
  padding: 0;
  max-width: 32em;
  text-align: left;
  border-top: 1px solid var(--inaj-hairline);
  border-bottom: 1px solid var(--inaj-hairline);
  padding: 1rem 0;
}
.home-price__list li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--inaj-ink-soft);
  line-height: 1.4;
}
.home-price__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0.55rem;
  color: var(--inaj-accent);
  font-weight: 600;
  font-family: var(--inaj-sans);
}
.home-price__list li:not(:first-child) {
  border-top: 1px dashed var(--inaj-hairline-soft);
}

.home-price__fineprint {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--inaj-stone);
  line-height: 1.5;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   FAQ
   ============================================================ */

.home-faq {
  padding: 1.25rem 0;
  border-top: 1px solid var(--inaj-hairline);
}
.home-faq__q {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-size: 1.25rem;
  color: var(--inaj-ink);
  margin-bottom: 0.5rem;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.008em;
}
.home-faq__a {
  font-size: 0.95rem;
  color: var(--inaj-ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   Final CTA strip
   ============================================================ */

.home-cta {
  background: var(--inaj-brand);
  color: #F4EFE5;
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 200px at 10% 100%, rgba(201,68,43,0.22), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.86  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, 180px 180px;
  pointer-events: none;
}
.home-cta > .container { position: relative; }
.home-cta__title {
  font-family: var(--inaj-display);
  font-weight: 380;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: #F4EFE5;
  margin: 0;
  font-variation-settings: "opsz" 56;
}
.home-cta__title em {
  font-style: italic;
  color: #F2D5C7;
  font-variation-settings: "opsz" 56;
}
.home-cta__sub {
  font-family: var(--inaj-sans);
  font-size: 0.8rem;
  color: rgba(244,239,229,0.7);
  margin-top: 0.6rem;
  letter-spacing: 0.005em;
}

/* ============================================================
   About page — small LinkedIn-style avatar + long-form prose
   ============================================================ */

.about-hero { padding-top: 4rem; }
.about-hero__title { margin-top: 0.5rem; }
.about-hero__lead {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.about-avatar {
  margin: 0 0 1rem 0;
  display: flex;
  justify-content: center;
}
.about-avatar img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--inaj-surface);
  box-shadow:
    0 0 0 1px var(--inaj-hairline),
    0 10px 28px -16px rgba(15, 23, 32, 0.35);
  background: var(--inaj-paper);
}

.about-byline {
  font-family: var(--inaj-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  margin: 0 0 0.25rem 0;
}

.about-prose p {
  font-family: var(--inaj-display);
  font-size: 1.125rem;
  line-height: 1.72;
  color: var(--inaj-ink);
  margin: 0 0 1.15rem 0;
}
.about-prose p:last-child { margin-bottom: 0; }
.about-prose em {
  font-style: italic;
  color: var(--inaj-ink);
}

.about-signoff p {
  font-family: var(--inaj-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--inaj-ink);
  margin: 0;
}

/* ============================================================
   Footer
   ============================================================ */

.home-footer {
  background: var(--inaj-paper);
  border-top: 1px solid var(--inaj-hairline);
  padding: 2.25rem 0 2.5rem;
}
.home-footer__mark {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-size: 1.35rem;
  color: var(--inaj-ink);
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.012em;
}
.home-footer__mark em {
  color: var(--inaj-accent);
  font-variation-settings: "opsz" 48;
  margin: 0 0.04em;
}
.home-footer__sub {
  font-family: var(--inaj-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inaj-stone);
  margin-top: 0.15rem;
}
.home-footer a {
  color: var(--inaj-ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
}
.home-footer a:hover { color: var(--inaj-accent); }
.home-footer__sep {
  margin: 0 0.4rem;
  color: var(--inaj-stone-soft);
}
.home-footer__legal {
  font-size: 0.72rem;
  color: var(--inaj-stone);
  margin-top: 0.6rem;
  letter-spacing: 0.005em;
}

@media (max-width: 575.98px) {
  .home-section { padding: 3rem 0; }
  .home-hero { padding: 2.5rem 0 2.5rem; }
  .home-cta { padding: 2.5rem 0; }
  .mock-card__actions { width: 100%; }
}

/* ============================================================
   Navbar report-search autocomplete
   ============================================================ */

.navbar-search {
  width: 18rem;
}
#navbar-search-results {
  max-width: 24rem;
  right: 0;
  left: auto;
}
#navbar-search-results .list-group-item.active,
#mobile-search-results .list-group-item.active {
  background-color: var(--bs-tertiary-bg);
  color: inherit;
  border-color: rgba(0, 0, 0, 0.08);
}
#navbar-search-results .list-group-item-action:hover,
#mobile-search-results .list-group-item-action:hover {
  background-color: var(--bs-tertiary-bg);
}

.mobile-search-overlay {
  position: absolute;
  left: 0; right: 0; top: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  z-index: 1080;
}
.mobile-search-bar .form-control { padding-right: 2.25rem; }
.mobile-search-close {
  position: absolute; right: 0.5rem; top: 50%;
  transform: translateY(-50%);
  border: 0; background: transparent; line-height: 1; cursor: pointer;
}

/* ============================================================
   Workspace stage flowchart (/report/<f> top of page)
   ============================================================ */

.stage-flow .stage-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.stage-flow .disabled-card {
  cursor: not-allowed;
}
.stage-flow .stage-arrow {
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.25rem;
  user-select: none;
}

/* ============================================================
   Report tables: shrink narrow label columns to fit content so
   short labels like "Work mode" and "✅ Moderate" don't wrap when
   the prose column otherwise dominates the table width. Tables
   get tagged in views.py based on their header structure.
   ============================================================ */

.report-body table.compact-first-col th:first-child,
.report-body table.compact-first-col td:first-child,
.report-body table.compact-last-col th:last-child,
.report-body table.compact-last-col td:last-child {
  white-space: nowrap;
  width: 1%;
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* ── Docs ───────────────────────────────────────────────── */

.docs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .docs-layout {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }
}

.docs-sidebar {
  position: sticky;
  top: 1.5rem;
}

.docs-sidebar__heading {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: .5rem;
  padding-left: .5rem;
}

.docs-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-sidebar__link {
  display: block;
  padding: .35rem .5rem;
  border-radius: .375rem;
  color: var(--bs-body-color);
  text-decoration: none;
  font-size: .9rem;
}

.docs-sidebar__link:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.docs-sidebar__link--active {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-weight: 600;
}

.docs-body h1 { font-size: 1.75rem; margin-bottom: 1rem; }
.docs-body h2 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: .75rem; }
.docs-body h3 { font-size: 1.05rem; margin-top: 1.5rem; margin-bottom: .5rem; }
.docs-body p, .docs-body li { line-height: 1.7; }
.docs-body .docs-callout {
  background: var(--bs-primary-bg-subtle);
  border-left: 3px solid var(--bs-primary);
  padding: .75rem 1rem;
  border-radius: 0 .375rem .375rem 0;
  margin: 1.25rem 0;
}

/* ============================================================
   Kanban dashboard board — responsive columns of triage cards.
   Replaces the old stacked-list dashboard. Uses --inaj-* tokens
   throughout (no hardcoded hex). Columns: Good, Applied, Bad,
   and (gated) Discarded.
   ============================================================ */

/* Dashboard-only wide container. Other pages use Bootstrap's ~1140px
   .container (via base.html's `main` block); the dashboard overrides that
   block to use this class so the board has room to breathe. Capped at
   1680px so columns don't sprawl on ultra-wide monitors; 95vw on smaller
   screens keeps sensible side gutters. The mobile single-column behaviour
   is governed by the .board breakpoints below, not by this width. */
.dashboard-main {
  width: 100%;
  max-width: min(1680px, 95vw);
  margin-inline: auto;
  padding-inline: var(--bs-gutter-x, 1.5rem);
}

/* Bootstrap only flex-lays-out its own container classes when they're a direct
   navbar child (.navbar > .container, .container-md, …). The dashboard navbar
   uses .dashboard-main instead (so the brand/links line up with the wide
   board), which isn't on that list — without this it loses display:flex and
   the brand, links and search stack vertically. Mirror Bootstrap's rule. */
.navbar > .dashboard-main {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: start;
}
.board--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.board--1 { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 991px) {
  .board,
  .board--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .board,
  .board--4,
  .board--1 { grid-template-columns: 1fr; }
}

/* ---- Column panel ---- */
.board-col {
  background-color: var(--inaj-paper-deep);
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  padding: 0 0.85rem 1.1rem;
  min-width: 0;          /* WebKit flex/grid min-width: auto guard */
  overflow: hidden;
}
.board-col__rule {
  height: 4px;
  margin: 0 -0.85rem 0;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  background-color: var(--inaj-stone-soft);
}
.board-col__rule--good  { background-color: var(--inaj-good); }
.board-col__rule--info  { background-color: var(--inaj-info); }
.board-col__rule--warn  { background-color: var(--inaj-accent); }
.board-col__rule--stone { background-color: var(--inaj-stone-soft); }

.board-col__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 1rem 0.2rem 0.1rem;
}
.board-col__title {
  font-family: var(--inaj-display);
  font-style: italic;
  font-weight: 460;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.015em;
  font-size: 1.4rem;
  margin: 0;
}
.board-col__count {
  margin-left: auto;
  background-color: var(--inaj-hairline);
  color: var(--inaj-ink-soft);
  border-radius: 20px;
  padding: 0.1rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.board-col__sub {
  color: var(--inaj-stone);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 0.2rem 0.75rem;
}
.board-col__sub a { text-transform: none; letter-spacing: 0; }
.board-col__sort {
  color: var(--inaj-stone);
  font-size: 0.8rem;
  padding: 0 0.2rem 0.75rem;
}
.board-col__empty {
  color: var(--inaj-stone);
  font-size: 0.9rem;
  padding: 0.4rem 0.2rem;
  margin: 0;
}

/* ---- New-client onboarding hint (dismissable banner above the board) ---- */
.onboarding-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  background: var(--inaj-good-soft);
  border: 1px solid var(--inaj-hairline);
  border-left: 4px solid var(--inaj-good);
  border-radius: var(--bs-border-radius);
}
.onboarding-hint__icon {
  flex: none;
  font-size: 1.15rem;
  line-height: 1.35;
}
.onboarding-hint__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--inaj-ink-soft);
}
.onboarding-hint__text strong { color: var(--inaj-ink); }
.onboarding-hint__close {
  flex: none;
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--inaj-stone);
  cursor: pointer;
  padding: 0 0.15rem;
}
.onboarding-hint__close:hover,
.onboarding-hint__close:focus { color: var(--inaj-ink); }

/* ---- Card ---- */
.board-card {
  position: relative;
  background-color: var(--inaj-surface);
  border: 1px solid var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--inaj-shadow-sm);
  padding: 0.95rem 1rem;
  margin-bottom: 0.75rem;
  min-width: 0;
  /* Clip the diagonal "New" corner ribbon's tails to the rounded card
     edge. The card's own box-shadow renders outside this clip, so the
     shadow is unaffected; the gold left border on .board-card--mine sits
     inside the box and reads cleanly under the corner cut. */
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.board-card:hover,
.board-card:focus-within {
  box-shadow: var(--inaj-shadow);
  border-color: var(--inaj-brand);
  transform: translateY(-1px);
}
.board-card--bad { background-color: var(--inaj-paper); }
.board-card--compact { padding: 0.8rem 0.9rem; }

.board-card__company {
  color: var(--inaj-accent);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.3;
  /* A long single-token company name must break within the text column
     instead of forcing this line wider than .board-card__text. */
  overflow-wrap: anywhere;
}

.board-card__role {
  font-family: var(--inaj-display);
  font-weight: 560;
  font-size: 1.08rem;
  line-height: 1.25;
  margin: 0.2rem 0 0.45rem;
  overflow-wrap: anywhere;
}
.board-card--compact .board-card__role { font-size: 0.98rem; }
.board-card__role a { color: inherit; }
.board-card__loc {
  color: var(--inaj-stone);
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
}
.board-card__meta {
  color: var(--inaj-stone);
  font-size: 0.82rem;
}
.board-card__score { color: var(--inaj-ink); font-weight: 700; }
.board-card__score--bad { color: var(--inaj-accent); }
.board-card__note {
  color: var(--inaj-ink-soft);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0.55rem 0 0;
  border-top: 1px solid var(--inaj-hairline-soft);
  padding-top: 0.5rem;
}
.board-card__note strong { color: var(--inaj-stone); font-weight: 600; }

/* ---- Card title block: company / role span the FULL card width.
       The actions no longer share a flex row here, so the title wraps at
       word boundaries across the whole card instead of being squeezed into
       a narrow column beside a reserved actions slot. ---- */
.board-card__text {
  min-width: 0;             /* a no-space megastring still breaks gracefully */
  /* A uniform right gutter so a long company name or role-title first line
     clears the diagonal "New" ribbon's top-right corner triangle. Applied
     to every card (not just New ones) so the text column's left edge and
     wrap width stay identical card-to-card — no per-line notch. */
  padding-right: 2.6rem;
}

/* ---- "New" corner ribbon ----
   The freshness indicator is a small diagonal banner pinned to the
   TOP-RIGHT corner of the card. It is taken
   out of normal flow via position:absolute, so it adds no inline width
   after the company name and can't push or overlap the text. Purely
   decorative: pointer-events:none keeps it from ever eating a click that
   should hit the card's stretched-link. */
/* Specificity + !important deliberately match/beat the site-wide soft
   badge rule (.badge.text-bg-success → soft mint bg, dark-green text):
   the corner ribbon wants the INVERTED, high-contrast treatment (white
   "New" on solid --inaj-good) so it reads as a banner, not a chip. */
.board-card__new-ribbon.badge.text-bg-success {
  position: absolute;
  top: 0.62rem;
  right: -1.55rem;
  width: 6rem;
  padding: 0.08rem 0;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--inaj-surface) !important;
  background-color: var(--inaj-good) !important;
  border: 0;
  transform: rotate(45deg);
  transform-origin: center;
  border-radius: 0;
  box-shadow: var(--inaj-shadow-sm);
  pointer-events: none;
  z-index: 3;               /* above the stretched-link and actions slot */
}

/* ---- Triage actions: a bottom row revealed on hover/focus on POINTER
       devices, always visible on touch / small screens (see media query
       below). They sit above the stretched-link (z-index + relative) so
       clicking a button does its action while a click elsewhere on the card
       opens the report.

       At REST the row is COLLAPSED (max-height:0, no top margin, clipped) so
       there is no empty gap below the card body. On hover/focus-within it
       EXPANDS downward: the hovered card's top stays anchored and only the
       cards below it nudge down. pointer-events flips so the stretched-link
       wins clicks at rest and the buttons win on hover. ---- */
.board-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-top: 0;             /* no reserved gap at rest */
  max-height: 0;
  overflow: hidden;          /* clip the collapsed row — no empty space */
  z-index: 2;                /* sit above the stretched-link */
  opacity: 0;
  pointer-events: none;      /* let the stretched-link win clicks at rest */
  transition: max-height .2s ease, margin-top .2s ease, opacity .2s ease;
}
.board-card:hover .board-card__actions,
.board-card:focus-within .board-card__actions {
  max-height: 7rem;          /* room for up to ~3 wrapped rows of sm buttons */
  margin-top: 0.6rem;
  opacity: 1;
  pointer-events: auto;      /* clickable above the stretched-link on hover */
}
.board-card__actions .btn,
.board-card__actions form {
  position: relative;        /* above the stretched-link, keep clickable */
}

/* Touch / no-hover devices and the mobile single-column layout can't hover,
   so the action row is ALWAYS expanded there. Covers both the lack of a
   hover-capable pointer AND the narrow viewport. */
@media (hover: none), (max-width: 560px) {
  .board-card__actions {
    max-height: none;
    margin-top: 0.6rem;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
}

/* ---- "You submitted" treatment ---- */
.board-card--mine {
  border-left: 4px solid var(--inaj-warn);
  background-color: var(--inaj-warn-soft);
}
.board-card--mine.board-card--bad {
  background-color: var(--inaj-warn-soft);
}
.board-card__star {
  /* Higher-contrast coral (was faint gold on the warm submitted bg) and a
     touch larger, so a submitted card is identifiable beyond the left
     border alone. */
  color: var(--inaj-accent);
  font-size: 1.05em;
  line-height: 1;
  margin-right: 0.3rem;
}
.board-card__evaluating {
  color: var(--inaj-accent-deep);
  font-weight: 600;
  font-size: 0.82rem;
}

/* ---- Load more ---- */
.board-loadmore {
  display: block;
  text-align: center;
  color: var(--inaj-good);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px dashed var(--inaj-hairline);
  border-radius: var(--bs-border-radius);
  padding: 0.6rem;
  margin-top: 0.25rem;
}
.board-loadmore:hover {
  color: var(--inaj-brand-deep);
  border-color: var(--inaj-stone-soft);
  background-color: var(--inaj-hairline-soft);
}

/* ---- Actions panel (collapsed bar + expanded rows) ---- */
.actions-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  background: var(--inaj-brand);
  color: #fff;
  border: none;
  border-radius: var(--bs-border-radius);
  padding: 0.7rem 1.05rem;
  text-align: left;
  cursor: pointer;
}
.actions-bar .chev {
  font-size: 0.8rem;
  opacity: 0.85;
  transition: transform 0.15s;
  display: inline-block;
}
.actions-bar.is-open .chev { transform: rotate(90deg); }
.actions-bar .ttl { font-weight: 600; letter-spacing: 0.02em; }
.actions-bar .pill {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.actions-bar .pill .spinner-border {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 0.12em;
  color: #fff;
}
/* Running state carries a full task label + ETA, so drop the uppercase
   short-token styling and let it read as a normal sentence. */
.actions-bar .pill--running {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.actions-panel-body {
  border: 1px solid var(--inaj-hairline);
  border-top: none;
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  background: var(--inaj-surface);
  display: none;
}
.actions-panel-body.is-open { display: block; }

.action-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--inaj-hairline);
  background: var(--inaj-surface);
}
.action-row:last-of-type { border-bottom: none; }
.action-row .state-ico {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-row .state-box {
  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--inaj-brand);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--inaj-surface);
}
.action-row .label {
  flex: 1 1 auto;
  font-weight: 560;
}
.action-row .label .sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--inaj-stone);
}
.action-row .meta {
  flex: 0 0 auto;
  font-size: 0.82rem;
  text-align: right;
}
/* Done-status meta: full date on desktop, compact "Applied" tag on phones,
   so the verbose string can't squeeze the label. See _macros.html action_row. */
.action-row .meta-applied { display: none; }
@media (max-width: 767.98px) {
  .action-row.done .meta-note { display: none; }
  .action-row.done .meta-applied {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--inaj-good);
    white-space: nowrap;
  }
}
.action-row.locked {
  background: var(--inaj-paper-deep);
  color: var(--inaj-stone-soft);
}
.action-row.locked .label { font-weight: 500; }
.action-row.locked .meta { color: var(--inaj-stone); font-style: italic; }
.action-row .ico-check circle { fill: var(--inaj-good); }
.action-row .ico-lock { fill: var(--inaj-stone-soft); }
.action-row .state-box-check { display: none; }
.action-row .state-box:has(.actions-check:checked) {
  background: var(--inaj-brand);
  border-color: var(--inaj-brand);
}
.action-row .state-box:has(.actions-check:checked) .state-box-check { display: block; }
.action-row .spinner-border {
  width: 1.05rem;
  height: 1.05rem;
  border-width: 0.16em;
  color: var(--inaj-warn);
}

.actions-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.1rem;
  background: var(--inaj-paper-deep);
  border-top: 1px solid var(--inaj-hairline);
}

.actions-discard-row {
  display: flex;
  align-items: center;
  padding: 0.65rem 1.1rem;
  border-top: 2px solid var(--inaj-hairline);
  background: var(--inaj-surface);
}