/* ============================================================
   ORORO STUDY BOOKS - coloured content boxes
   ------------------------------------------------------------
   ONE file for every subject. It replaces the five old
   custom-blocks-SUBJECT.css files.

   HOW THE COLOURS ARE ORGANISED
   There are two palettes below.

     PALETTE 1  Boxes that mean the same thing in every subject
                - Definition, Curiosity Corner, Exam Corner and
                  so on. These keep ONE colour across the whole
                  series, so a student who learns "blue means a
                  definition" in Physics reads Biology faster.

     PALETTE 2  Boxes that belong to particular subjects. A
                colour repeats here only between boxes that never
                appear in the same subject, so two boxes sharing
                a colour can never meet on one page.

   BEFORE YOU CHANGE A COLOUR IN PALETTE 2
   Check that nothing else in the SAME subject already uses it.
   The palette was generated with that check applied to all 24
   subjects at once; editing by hand can undo it.

   HOW TO CHANGE A COLOUR
   Each box sets two values:
       --box-accent   strong colour (left bar + title text)
       --box-soft     pale colour   (header background)
   Change those two and the whole box re-themes. Nothing above
   the palettes needs touching.

   WHICH BOXES START COLLAPSED is not set here. That lives in
   the COLLAPSE SETTINGS block near the top of convert-book.ps1.
   ============================================================ */


/* ---- 1. Shared shape and spacing for every Ororo box ------ */
.callout[class*="box-"] {
  --box-accent: #666666;                  /* fallback, overridden below */
  --box-soft:   #f1f3f5;                  /* fallback, overridden below */
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  margin: 1.4rem 0;
  overflow: hidden;
}

/* The coloured bar down the left edge.
   ------------------------------------------------------------
   !important is genuinely needed here. Quarto ships its own
   rule for .callout-note that paints this bar blue, and that
   rule is more specific than ours, so without !important the
   blue wins and every box gets a blue bar whatever its colour.
   Same reason the header background below is forced. */
.callout[class*="box-"],
.callout[class*="box-"].callout-style-default {
  border-left: 5px solid var(--box-accent) !important;
}

/* ---- 2. The title row (header) ---------------------------- */
.callout[class*="box-"] > .callout-header {
  background: var(--box-soft) !important;
  padding: 0.55rem 0.95rem;
  align-items: center;
}

.callout[class*="box-"] .callout-title-container {
  color: var(--box-accent);
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---- 3. The content area ---------------------------------- */
.callout[class*="box-"] .callout-body-container,
.callout[class*="box-"] .callout-body {
  padding: 0.85rem 0.95rem;
  line-height: 1.7;
}

/* ---- 4. Collapsible boxes --------------------------------- */

/* The expand/collapse arrow takes the box's own colour */
.callout[class*="box-"] .callout-btn-toggle,
.callout[class*="box-"] .callout-toggle {
  color: var(--box-accent);
}

/* A collapsible header should look clickable */
.callout[class*="box-"] > .callout-header[data-bs-toggle],
.callout[class*="box-"] > .callout-header.callout-header-collapsible {
  cursor: pointer;
}

.callout[class*="box-"] > .callout-header:hover {
  filter: brightness(0.97);
}

/* ---- 5. Question and answer inside a box ------------------
   Curiosity Corner, Exam Corner and Example all share one
   shape: the question in bold, the answer in normal weight
   under it. The bold comes from the source, so all this rule
   does is stop the two running together and give the answer a
   little breathing room. */
.callout[class*="box-"] .callout-body > p:first-child {
  margin-bottom: 0.55rem;
}

.callout[class*="box-"] .callout-body > p {
  margin-bottom: 0.7rem;
}

.callout[class*="box-"] .callout-body > p:last-child {
  margin-bottom: 0;
}

/* ---- 6. The Source line - no box ---------------------------
   [Source:] is a one-liner: a citation, an attribution,
   "Census of India, 2011". It does not need a box round it.

   These rules strip the box away completely - no border, no
   coloured bar, no header, no tint, no padding - and leave one
   line of small bold coloured text sitting in the page like
   ordinary prose. Small + bold + coloured is difference enough.

   The converter still emits it as a callout; only the look
   changes, so nothing in ororo-tags.ps1 or convert-book.ps1
   needs editing.

   With the header gone there is nothing left to click, so the
   body is forced open here. Source can sit in or out of the
   COLLAPSE SETTINGS list in convert-book.ps1 and will look the
   same either way.

   TO CHANGE THE COLOUR: edit .callout.box-source in Palette 2
   below. This line follows it.
   ------------------------------------------------------------ */
.callout.box-source,
.callout.box-source.callout-style-default {
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  margin: 0.3rem 0 1.15rem;
  overflow: visible;
}

/* The box's own title row goes, and the word "Source:" is put
   back at the head of the line instead - no brackets, no header
   bar, just a label running into the citation:

       Source: Census of India 2011, Table C-8

   It is written once, here. If you ever want it to read
   "Source -" or "Adapted from:", change the content line below
   and every source line in every book follows. */
.callout.box-source > .callout-header {
  display: none !important;
}

.callout.box-source .callout-body > p:first-child::before {
  content: "Source: ";
}

/* nothing can collapse it now, so keep it open whatever the
   collapse setting says */
.callout.box-source .callout-body-container,
.callout.box-source .callout-body,
.callout.box-source .callout-body-container.collapse,
.callout.box-source .callout-body-container.collapsing {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

.callout.box-source .callout-body > p {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--box-accent);
  margin: 0 0 0.25rem;
}

.callout.box-source .callout-body > p:last-child {
  margin-bottom: 0;
}

/* Links take the line's own colour instead of turning blue. */
.callout.box-source a {
  color: inherit;
  font-weight: inherit;
}

/* Nothing in a source line is ever underlined - not the link,
   not a bold wrapper, not an explicit <u>. */
.callout.box-source,
.callout.box-source * {
  text-decoration: none !important;
}


/* ---- 7. Tables inside a box --------------------------------
   Two boxes hold real tables: [Table:] and [Compare Table:].

     [Table:]         pastel header row, faint striped body
     [Compare Table:] pastel header row AND a tinted first
                      column, because the left column is the
                      label column ("Property", "Feature") that
                      you read across from

   The table colours are set as four values per box, right here,
   NOT taken from the palette. A solid palette accent behind a
   header row is too heavy for a page of study material, so
   these are pastel tints of the same family instead - green for
   Table, warm sand for Compare Table. Change a table's look by
   editing its four values below; the box's own colour is not
   affected.

   This applies ONLY inside these two boxes. Ordinary tables in
   the chapter body - match-the-columns questions, data tables -
   keep the plain grey header set in styles.css.
   ------------------------------------------------------------ */
.callout.box-table {
  --tbl-head:      #d3f9d8;    /* header row background   */
  --tbl-head-ink:  #2b8a3e;    /* header row text         */
  --tbl-stripe:    #f4fcf6;    /* every second body row   */
  --tbl-line:      #c5ebcd;    /* cell borders            */
}

.callout.box-compare {
  --tbl-head:      #f3e9d6;
  --tbl-head-ink:  #7a5c2e;
  --tbl-stripe:    #fbf8f2;
  --tbl-line:      #e4d5ba;
  --tbl-firstcol:  #faf4e8;    /* the label column        */
}

.callout.box-table table,
.callout.box-compare table {
  margin: 0.2rem 0 0.3rem;
  font-size: 0.93rem;
  width: 100%;
}

.callout.box-table th,
.callout.box-table td,
.callout.box-compare th,
.callout.box-compare td {
  border: 1px solid var(--tbl-line);
  padding: 0.5rem 0.7rem;
  vertical-align: top;
}

/* --- the header row --- */
.callout.box-table thead th,
.callout.box-compare thead th,
.callout.box-table tr:first-child th,
.callout.box-compare tr:first-child th {
  background: var(--tbl-head) !important;
  color: var(--tbl-head-ink);
  font-weight: 700;
  font-size: 0.79rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* --- body rows: a faint stripe so the eye tracks across --- */
.callout.box-table tbody tr:nth-child(even) td,
.callout.box-compare tbody tr:nth-child(even) td {
  background: var(--tbl-stripe);
}

/* --- Compare Table only: the first column is the label column --- */
.callout.box-compare tbody td:first-child,
.callout.box-compare tbody th:first-child {
  background: var(--tbl-firstcol) !important;
  color: var(--tbl-head-ink);
  font-weight: 700;
  border-right: 2px solid var(--tbl-line);
}


/* ==========================================================
   PALETTE 1 - UNIVERSAL BOXES
   These mean the same thing in every subject, so they keep the
   same colour in every subject. A student learns the colour once.
   ========================================================== */
/* Definition (blue) */
.callout.box-definition     { --box-accent: #1c7ed6; --box-soft: #e7f5ff; }
/* Principle / Law (crimson) */
.callout.box-law            { --box-accent: #e03131; --box-soft: #fff0f0; }
/* Example (violet) */
.callout.box-example        { --box-accent: #7048e8; --box-soft: #f3f0ff; }
/* Numerical (teal) */
.callout.box-numerical      { --box-accent: #0ca678; --box-soft: #e6fcf5; }
/* Exam Corner (pink) */
.callout.box-sidebar        { --box-accent: #d6336c; --box-soft: #fff0f6; }
/* Curiosity Corner (cyan) */
.callout.box-curiosity      { --box-accent: #1098ad; --box-soft: #e3fafc; }
/* Side Note (slate) */
.callout.box-sidenote       { --box-accent: #5c6773; --box-soft: #eef1f4; }
/* Real-World Application (indigo) */
.callout.box-application    { --box-accent: #4263eb; --box-soft: #edf2ff; }
/* Real Incident / Discovery (grape) */
.callout.box-incident       { --box-accent: #9c36b5; --box-soft: #f8f0fc; }
/* Do Not Mix Up (amber) */
.callout.box-mixup          { --box-accent: #f59f00; --box-soft: #fff9db; }
/* Compare Table (sepia) */
.callout.box-compare        { --box-accent: #8a6d3b; --box-soft: #f7f1e4; }
/* Try Yourself (olive) */
.callout.box-tryyourself    { --box-accent: #5c7a29; --box-soft: #f2f7e6; }
/* In-Text Question (rust) */
.callout.box-intext         { --box-accent: #b34700; --box-soft: #ffeee3; }
/* Memory Aid (magenta) */
.callout.box-memory         { --box-accent: #a61e4d; --box-soft: #ffdeeb; }

/* ==========================================================
   PALETTE 2 - SUBJECT BOXES
   A colour repeats here only between boxes that never appear in
   the same subject, so two of these can never meet on one page.
   ========================================================== */
.callout.box-activity         { --box-accent: #1c7ed6; --box-soft: #e7f5ff; }  /* blue */
.callout.box-algorithm        { --box-accent: #f59f00; --box-soft: #fff9db; }  /* amber */
.callout.box-argument         { --box-accent: #9c36b5; --box-soft: #f8f0fc; }  /* grape */
.callout.box-bareact          { --box-accent: #e03131; --box-soft: #fff0f0; }  /* crimson */
.callout.box-bioethics        { --box-accent: #7048e8; --box-soft: #f3f0ff; }  /* violet */
.callout.box-breakdown        { --box-accent: #7048e8; --box-soft: #f3f0ff; }  /* violet */
.callout.box-businessexample  { --box-accent: #e03131; --box-soft: #fff0f0; }  /* crimson */
.callout.box-capstone         { --box-accent: #8a6d3b; --box-soft: #f7f1e4; }  /* sepia */
.callout.box-cartoon          { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-caselaw          { --box-accent: #0ca678; --box-soft: #e6fcf5; }  /* teal */
.callout.box-casesnippet      { --box-accent: #0ca678; --box-soft: #e6fcf5; }  /* teal */
.callout.box-casestudy        { --box-accent: #1c7ed6; --box-soft: #e7f5ff; }  /* blue */
.callout.box-casevignette     { --box-accent: #1c7ed6; --box-soft: #e7f5ff; }  /* blue */
.callout.box-cause            { --box-accent: #4263eb; --box-soft: #edf2ff; }  /* indigo */
.callout.box-commonerror      { --box-accent: #212529; --box-soft: #f1f3f5; }  /* ink */
.callout.box-complexity       { --box-accent: #e03131; --box-soft: #fff0f0; }  /* crimson */
.callout.box-culturelens      { --box-accent: #7048e8; --box-soft: #f3f0ff; }  /* violet */
.callout.box-dataset          { --box-accent: #e03131; --box-soft: #fff0f0; }  /* crimson */
.callout.box-debate           { --box-accent: #8a6d3b; --box-soft: #f7f1e4; }  /* sepia */
.callout.box-diagram          { --box-accent: #212529; --box-soft: #f1f3f5; }  /* ink */
.callout.box-downtheline      { --box-accent: #0ca678; --box-soft: #e6fcf5; }  /* teal */
.callout.box-dryrun           { --box-accent: #2f9e44; --box-soft: #ebfbee; }  /* green */
.callout.box-economist        { --box-accent: #2f6f8f; --box-soft: #e6f1f7; }  /* steel */
.callout.box-economyexample   { --box-accent: #3f7a5e; --box-soft: #e8f5ef; }  /* forest */
.callout.box-ethicscheck      { --box-accent: #2f9e44; --box-soft: #ebfbee; }  /* green */
.callout.box-ethicsnote       { --box-accent: #e03131; --box-soft: #fff0f0; }  /* crimson */
.callout.box-ethicswatch      { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-evidence         { --box-accent: #9c36b5; --box-soft: #f8f0fc; }  /* grape */
.callout.box-figure           { --box-accent: #4263eb; --box-soft: #edf2ff; }  /* indigo */
.callout.box-firstaid         { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-fitness          { --box-accent: #0ca678; --box-soft: #e6fcf5; }  /* teal */
.callout.box-flowchart        { --box-accent: #a3552e; --box-soft: #fdeee6; }  /* clay */
.callout.box-formula          { --box-accent: #a61e4d; --box-soft: #ffdeeb; }  /* magenta */
.callout.box-graph            { --box-accent: #1c7ed6; --box-soft: #e7f5ff; }  /* blue */
.callout.box-historians       { --box-accent: #5c7a29; --box-soft: #f2f7e6; }  /* olive */
.callout.box-howitworks       { --box-accent: #8a6d3b; --box-soft: #f7f1e4; }  /* sepia */
.callout.box-hygiene          { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-illustration     { --box-accent: #2f9e44; --box-soft: #ebfbee; }  /* green */
.callout.box-indiancontext    { --box-accent: #212529; --box-soft: #f1f3f5; }  /* ink */
.callout.box-interpret        { --box-accent: #2f9e44; --box-soft: #ebfbee; }  /* green */
.callout.box-keystudy         { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-lawpolicy        { --box-accent: #7048e8; --box-soft: #f3f0ff; }  /* violet */
.callout.box-legaldebate      { --box-accent: #212529; --box-soft: #f1f3f5; }  /* ink */
.callout.box-legalillustration { --box-accent: #2f9e44; --box-soft: #ebfbee; }  /* green */
.callout.box-legalmaxim       { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-map              { --box-accent: #6b3fa0; --box-soft: #f0e9f8; }  /* plum */
.callout.box-mealplan         { --box-accent: #9c36b5; --box-soft: #f8f0fc; }  /* grape */
.callout.box-mediatext        { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-method           { --box-accent: #7048e8; --box-soft: #f3f0ff; }  /* violet */
.callout.box-modelprofile     { --box-accent: #1c7ed6; --box-soft: #e7f5ff; }  /* blue */
.callout.box-ncertasks        { --box-accent: #f76707; --box-soft: #fff4e6; }  /* orange */
.callout.box-newwords         { --box-accent: #a3552e; --box-soft: #fdeee6; }  /* clay */
.callout.box-nutrient         { --box-accent: #0ca678; --box-soft: #e6fcf5; }  /* teal */
.callout.box-orgprofile       { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-perspective      { --box-accent: #2f9e44; --box-soft: #ebfbee; }  /* green */
.callout.box-photo            { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-practical        { --box-accent: #f59f00; --box-soft: #fff9db; }  /* amber */
.callout.box-exampointer      { --box-accent: #6b3fa0; --box-soft: #f0e9f8; }  /* plum */
.callout.box-practice         { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-practitioner     { --box-accent: #7048e8; --box-soft: #f3f0ff; }  /* violet */
.callout.box-procedure        { --box-accent: #7048e8; --box-soft: #f3f0ff; }  /* violet */
.callout.box-program          { --box-accent: #9c36b5; --box-soft: #f8f0fc; }  /* grape */
.callout.box-projectlink      { --box-accent: #9c36b5; --box-soft: #f8f0fc; }  /* grape */
.callout.box-quickcheck       { --box-accent: #1c7ed6; --box-soft: #e7f5ff; }  /* blue */
.callout.box-quote            { --box-accent: #0ca678; --box-soft: #e6fcf5; }  /* teal */
.callout.box-readit           { --box-accent: #0ca678; --box-soft: #e6fcf5; }  /* teal */
.callout.box-reagent          { --box-accent: #6b3fa0; --box-soft: #f0e9f8; }  /* plum */
.callout.box-recall           { --box-accent: #8a6d3b; --box-soft: #f7f1e4; }  /* sepia */
.callout.box-safety           { --box-accent: #e03131; --box-soft: #fff0f0; }  /* crimson */
.callout.box-scalecheck       { --box-accent: #2f9e44; --box-soft: #ebfbee; }  /* green */
.callout.box-scenario         { --box-accent: #6b3fa0; --box-soft: #f0e9f8; }  /* plum */
.callout.box-signs            { --box-accent: #a3552e; --box-soft: #fdeee6; }  /* clay */
.callout.box-sop              { --box-accent: #7048e8; --box-soft: #f3f0ff; }  /* violet */
.callout.box-source           { --box-accent: #7048e8; --box-soft: #f3f0ff; }  /* violet */
.callout.box-specimen         { --box-accent: #212529; --box-soft: #f1f3f5; }  /* ink */
.callout.box-structure        { --box-accent: #2f6f8f; --box-soft: #e6f1f7; }  /* steel */
.callout.box-syntax           { --box-accent: #4263eb; --box-soft: #edf2ff; }  /* indigo */
.callout.box-systemprofile    { --box-accent: #1c7ed6; --box-soft: #e7f5ff; }  /* blue */
.callout.box-table            { --box-accent: #2f9e44; --box-soft: #ebfbee; }  /* green */
.callout.box-technique        { --box-accent: #e03131; --box-soft: #fff0f0; }  /* crimson */
.callout.box-textile          { --box-accent: #2f6f8f; --box-soft: #e6f1f7; }  /* steel */
.callout.box-textsays         { --box-accent: #212529; --box-soft: #f1f3f5; }  /* ink */
.callout.box-thennow          { --box-accent: #a61e4d; --box-soft: #ffdeeb; }  /* magenta */
.callout.box-theory           { --box-accent: #0ca678; --box-soft: #e6fcf5; }  /* teal */
.callout.box-timeline         { --box-accent: #e03131; --box-soft: #fff0f0; }  /* crimson */
.callout.box-trace            { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-tradeterm        { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-trend            { --box-accent: #212529; --box-soft: #f1f3f5; }  /* ink */
.callout.box-twoviews         { --box-accent: #2f9e44; --box-soft: #ebfbee; }  /* green */
.callout.box-watchout         { --box-accent: #a3552e; --box-soft: #fdeee6; }  /* clay */
.callout.box-whatif           { --box-accent: #f59f00; --box-soft: #fff9db; }  /* amber */
.callout.box-whyhere          { --box-accent: #9c6b30; --box-soft: #f6efe7; }  /* brown */
.callout.box-workedcase       { --box-accent: #a3552e; --box-soft: #fdeee6; }  /* clay */
.callout.box-zoom             { --box-accent: #3f7a5e; --box-soft: #e8f5ef; }  /* forest */


/* ============================================================
   FIGURE PLACEHOLDER
   Used while the real diagram image is not ready yet.
   ============================================================ */
.figure-placeholder {
  border: 2px dashed #adb5bd;
  border-radius: 10px;
  background: #f8f9fa;
  color: #495057;
  padding: 1.1rem 1rem;
  margin: 1.5rem 0;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
}
.figure-placeholder strong {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #868e96;
  margin-bottom: 0.4rem;
}


/* ============================================================
   DARK MODE  (only applies if your Quarto theme has a dark toggle)
   ============================================================ */
[data-bs-theme="dark"] .callout[class*="box-"] > .callout-header,
body.quarto-dark .callout[class*="box-"] > .callout-header {
  background: rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .callout[class*="box-"],
body.quarto-dark .callout[class*="box-"] {
  border-color: rgba(255, 255, 255, 0.08);
}
/* Pastel tints are for a white page. In dark mode the four
   values are simply redefined, and every rule above follows. */
[data-bs-theme="dark"] .callout.box-table,
body.quarto-dark .callout.box-table,
[data-bs-theme="dark"] .callout.box-compare,
body.quarto-dark .callout.box-compare {
  --tbl-head:     rgba(255, 255, 255, 0.10);
  --tbl-head-ink: #e9ecef;
  --tbl-stripe:   rgba(255, 255, 255, 0.03);
  --tbl-line:     rgba(255, 255, 255, 0.13);
  --tbl-firstcol: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .figure-placeholder,
body.quarto-dark .figure-placeholder {
  background: rgba(255, 255, 255, 0.03);
  border-color: #495057;
  color: #ced4da;
}

@media (prefers-reduced-motion: reduce) {
  .callout[class*="box-"] { transition: none; }
}


/* ============================================================
   PHONES - tables in boxes
   A wide comparison table is the one thing that will push a
   page sideways on a phone. This lets the table scroll inside
   its own box instead of dragging the whole layout with it.
   ============================================================ */
@media (max-width: 768px) {
  .callout.box-table .callout-body,
  .callout.box-compare .callout-body {
    overflow-x: auto;
  }

  .callout.box-table table,
  .callout.box-compare table {
    font-size: 0.86rem;
  }

  .callout.box-table th,
  .callout.box-table td,
  .callout.box-compare th,
  .callout.box-compare td {
    padding: 0.42rem 0.55rem;
  }
}