/* ============================================================================
   swot-docs.css — shared stylesheet for Salesmatrix product documentation.
   Deploy to:  /docs/assets/swot-docs.css
   Load AFTER /css/style.css.

   Everything is scoped under .swot-doc for two reasons:

   1. style.css resets headings site-wide —
         h1,h2,h3,h4 { font-size: inherit; font-weight: inherit; margin: 0; padding: 0; }
      — and relies on .title-big / .title-medium classes instead. A document dropped
      in raw would render as flat, undifferentiated text. Every rule here is
      class-qualified (specificity 0,1,1 or higher) so it beats that reset without
      needing !important.

   2. Nothing here can leak out and affect the rest of the site. The custom
      properties sit on .swot-doc, not :root, for the same reason.

   Palette is taken from style.css, not invented:
      #5271A5  primary blue    (headings, menu links, borders)
      #7AA9F9  secondary blue  (secondary links, accents)
      #F07B71  coral           (buttons/CTAs — reused here for danger callouts)
      #292C47  dark text
      #f7faff  light blue wash (banner/section backgrounds)
   Amber is derived: style.css has no caution colour and a doc needs three
   distinct callout levels.

   Light only, deliberately: style.css has no prefers-color-scheme block, so a
   dark document inside a light site would be wrong. Colours are all painted
   explicitly rather than inherited.
   ============================================================================ */

.swot-doc {
  --brand:        #5271A5;
  --brand-deep:   #3d5880;
  --brand-2:      #7AA9F9;
  --coral:        #F07B71;
  --coral-wash:   #fdeeed;
  --coral-ink:    #a8352c;
  --amber:        #b07a18;
  --amber-wash:   #fdf6e7;
  --ink:          #292C47;
  --ink-soft:     #454a68;
  --slate:        #6b7590;
  --paper:        #ffffff;
  --wash:         #f7faff;
  --wash-2:       #eaf0fb;
  --rule:         #dbe3f0;

  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Cascadia Mono', Consolas, ui-monospace, 'SF Mono', Menlo, monospace;
  --measure: 68ch;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- shell ---------- */

.swot-doc .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 6rem;
}

@media (min-width: 1000px) {
  .swot-doc .shell {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
}

/* ---------- masthead ---------- */

.swot-doc .masthead {
  grid-column: 1 / -1;
  border-bottom: 3px solid var(--brand);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.75rem;
  margin-bottom: 3rem;
}

.swot-doc .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1rem;
}

.swot-doc h1 {
  font-family: var(--sans);
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--brand);
  text-wrap: balance;
  margin: 0 0 0.9rem;
  padding: 0;
}

.swot-doc .standfirst {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.08rem;
  margin: 0;
}

.swot-doc .masthead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate);
}

.swot-doc .masthead-meta b { color: var(--ink); font-weight: 600; }

/* ---------- contents rail ---------- */

.swot-doc .rail { display: none; }

@media (min-width: 1000px) {
  .swot-doc .rail {
    display: block;
    position: sticky;
    top: 2rem;
    font-size: 0.86rem;
  }
}

.swot-doc .rail-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.swot-doc .rail ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  counter-reset: rail;
  margin: 0;
  padding: 0;
}

.swot-doc .rail li { max-width: none; }

.swot-doc .rail a {
  display: flex;
  gap: 0.7rem;
  padding: 0.3rem 0;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 3px;
}

.swot-doc .rail a::before {
  counter-increment: rail;
  content: counter(rail, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate);
  flex: none;
  padding-top: 0.12em;
}

.swot-doc .rail a:hover,
.swot-doc .rail a:hover::before { color: var(--brand); }
.swot-doc .rail a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- content flow ---------- */

.swot-doc main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.swot-doc section {
  scroll-margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.swot-doc h2 {
  font-family: var(--sans);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--brand);
  text-wrap: balance;
  margin: 0;
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.swot-doc h3 {
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.006em;
  color: var(--ink);
  margin: 0.6rem 0 0;
  padding: 0;
}

.swot-doc h4 {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--slate);
  margin: 0.4rem 0 0;
  padding: 0;
}

.swot-doc p,
.swot-doc li { max-width: var(--measure); color: var(--ink-soft); }
.swot-doc p { margin: 0; }
.swot-doc p strong,
.swot-doc li strong { color: var(--ink); font-weight: 700; }

.swot-doc main ul,
.swot-doc main ol {
  padding-left: 1.3rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.swot-doc main ul { list-style: square; }
.swot-doc main li::marker { color: var(--brand); }

/* style.css strips underlines site-wide; put them back inside a document,
   where a link needs to be identifiable in a wall of prose. */
.swot-doc a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.swot-doc a:hover { color: var(--brand-deep); }
.swot-doc a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- code ---------- */

.swot-doc code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--wash-2);
  padding: 0.12em 0.36em;
  border-radius: 3px;
  color: var(--ink);
  word-break: break-word;
}

.swot-doc pre {
  background: var(--wash);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.swot-doc pre code { background: none; padding: 0; font-size: inherit; }
.swot-doc .cmt { color: var(--slate); }
.swot-doc .kw  { color: var(--brand); }

/* ---------- tables ---------- */

.swot-doc .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--wash);
}

.swot-doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.87rem;
  font-variant-numeric: tabular-nums;
}

.swot-doc th,
.swot-doc td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-soft);
}

.swot-doc thead th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--wash-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.swot-doc tbody tr:last-child td { border-bottom: none; }
.swot-doc tbody tr:hover { background: var(--wash-2); }

.swot-doc td.stage,
.swot-doc td.key { white-space: nowrap; }

.swot-doc .tag {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--brand);
  padding: 0.12em 0.5em;
  border-radius: 3px;
  white-space: nowrap;
}

.swot-doc td .slot { color: var(--slate); font-style: italic; }

.swot-doc .group-row td {
  background: var(--wash-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-deep);
  font-weight: 700;
}

/* ---------- callouts ---------- */

.swot-doc .note {
  border-left: 3px solid var(--brand);
  background: var(--wash);
  padding: 0.9rem 1.1rem;
  border-radius: 0 4px 4px 0;
  max-width: var(--measure);
}

.swot-doc .note.caution { border-left-color: var(--amber); background: var(--amber-wash); }
.swot-doc .note.danger  { border-left-color: var(--coral); background: var(--coral-wash); }

.swot-doc .note p { margin: 0; color: var(--ink); }
.swot-doc .note p + p { margin-top: 0.6rem; }

.swot-doc .note-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  color: var(--brand-deep);
  font-weight: 600;
}
.swot-doc .note.caution .note-label { color: var(--amber); }
.swot-doc .note.danger  .note-label { color: var(--coral-ink); }

/* ---------- numbered steps ---------- */

.swot-doc .steps {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
  gap: 1.1rem;
}

.swot-doc .steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.9rem;
  max-width: none;
}

.swot-doc .steps > li::before {
  content: counter(step);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--brand);
  border-radius: 3px;
  height: 1.7rem;
  display: grid;
  place-items: center;
}

.swot-doc .steps > li > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.swot-doc .steps > li > div > *:first-child { margin-top: 0; }

/* ---------- plain contents rail ----------
   For documents whose contents list is already numbered in the link text and
   nests a level — the SWOTAdmin manual uses "2.1 Signing In". The default .rail
   adds its own decimal-leading-zero counter, which would double up as
   "02  2.1 Signing In". This variant suppresses it and styles the nesting. */

.swot-doc .rail-plain ol,
.swot-doc .rail-plain ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.swot-doc .rail-plain a { display: block; padding: 0.28rem 0; }
.swot-doc .rail-plain a::before { content: none; }

.swot-doc .rail-plain ul ul { margin: 0.1rem 0 0.35rem 0.9rem; }
.swot-doc .rail-plain ul ul a { font-size: 0.94em; color: var(--slate); }
.swot-doc .rail-plain ul ul a:hover { color: var(--brand); }

/* ---------- SWOT quadrant colours ----------
   Status colours, deliberately separate from the brand accent — semantic meaning
   should not be carried by the house blue. These are the application's own
   quadrant colours, kept byte-identical so the manual and the dashboard agree. */

.swot-doc .swot-s { color: #27ae60; font-weight: 700; }  /* strengths     */
.swot-doc .swot-w { color: #c0392b; font-weight: 700; }  /* weaknesses    */
.swot-doc .swot-o { color: #2980b9; font-weight: 700; }  /* opportunities */
.swot-doc .swot-t { color: #d35400; font-weight: 700; }  /* threats       */

/* ---------- flow diagram ---------- */

.swot-doc .flow { overflow-x: auto; padding: 0.4rem 0; }
.swot-doc .flow svg { display: block; min-width: 620px; }

/* The inline SVG references these via var() on fill/stroke attributes. */
.swot-doc .flow svg {
  --surface-2: var(--wash-2);
  --accent-wash: #e8f0fe;
  --accent: var(--brand);
  --surface: var(--wash);
  --rule: var(--rule);
  --ink: var(--ink);
  --slate: var(--slate);
}

/* ---------- footer ---------- */

.swot-doc footer {
  grid-column: 1 / -1;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--slate);
}

@media (prefers-reduced-motion: reduce) {
  .swot-doc *, .swot-doc *::before, .swot-doc *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .swot-doc .rail { display: none; }
  .swot-doc .shell { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .swot-doc .table-wrap, .swot-doc pre { break-inside: avoid; }
  .swot-doc a { text-decoration: none; color: var(--ink); }
}