/* ============================================================
   GIN Anatomy subject and topic styles.

   This file is a SUPPLEMENT to the global Micro-Kit, not a
   replacement for it. Pages compose mk- classes; nothing here is
   per-page. Every rule below already exists verbatim under
   .gin-phys (modules/gin/physiology/physiology.css) and/or
   .gin-pharm (modules/gin/pharmacology/pharmacology.css) — this is
   the third instance of the same three kit corrections, not a new
   design. If one of those changes, keep this in step.

   The scope class is `.gin-anat`, added by each page's init as its
   FIRST line. It is NOT the router's scope: the router derives
   `gin-topic-content` from the lowercase `gin` prefix of the
   contentId and puts it on the mount. `.gin-anat` sits on the same
   element as a second class and carries only the subject-level
   corrections below.
   ============================================================ */

/* 1 — mk-hue-* only define the pill tokens, so a hued card has no
       visible hue. Spend the token on a left border. */
.gin-anat .mk-factor[class*="mk-hue-"],
.gin-anat .mk-card[class*="mk-hue-"] {
    border-left: 4px solid var(--mk-pill-bd, #cbd5e1);
}

/* 2 — The kit sets a titled-list's leading strong to 14.5px, BELOW the
       15px body text, which reads as a broken title. A title must
       always outrank the text under it. */
.gin-anat .mk-symptoms > li > strong:first-of-type,
.gin-anat .mk-titled-list > li > strong:first-of-type,
.gin-anat .mk-titled-list > li > .cav-term:first-of-type {
    font-size: 15.75px;
    font-weight: 800;
}

/* 3 — A lead paragraph is reader text: black, not the kit's muted grey.
       This page axis opens with the module's anatomical-position
       statement as a lead, so it has to read as body copy. */
.gin-anat .mk-lead {
    color: #111111;
}

/* ------------------------------------------------------------
   LONG ROW LISTS STAY ONE COLUMN ON THIS AXIS.

   MicroKit.mount toggles `.mk-symptoms--2col` onto any list with more
   than 5 rows, and the kit caps that class at max-width 620px so the two
   columns sit close together. In a full-width anatomy card that strands
   the right half of the card and, worse, forces the page author to split
   otherwise-continuous lists into chunks of five to avoid it — which
   leaves a visible seam in the middle of one idea-per-line stack.

   Anatomy rows are long sentences, not two-word symptoms, so two 300px
   columns would be wrong here anyway. Neutralise the toggle for this
   subject and let a list of any length run full width in one column with
   one even rhythm. The kit keeps `--2col` for every other axis.
   ------------------------------------------------------------ */
.gin-anat .mk-symptoms.mk-symptoms--2col {
    columns: auto;
    max-width: none;
}

/* ------------------------------------------------------------
   NO DEAD CELL at the end of a card grid.

   A 5-card set in a 3-column grid renders 3 + 2 and strands an empty
   third cell; the white gap reads as a layout fault. Cards are never
   merged and the gap is always kept — only a SHORT TRAILING ROW is
   elongated to fill the width.

   Implemented on a 6-track (--3) / 4-track (--2) grid with every card
   spanning 2, so a trailing card can widen without disturbing the rest.
   Scoped to .gin-anat so no other module's grids shift.
   Ported unchanged from .gin-phys.
   ------------------------------------------------------------ */
.gin-anat .mk-grid--3 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gin-anat .mk-grid--3 > * { grid-column: span 2; }

/* one card alone on the last row → full width */
.gin-anat .mk-grid--3 > :last-child:nth-child(3n + 1) { grid-column: span 6; }

/* two cards alone on the last row → half each */
.gin-anat .mk-grid--3 > :nth-last-child(2):nth-child(3n + 1),
.gin-anat .mk-grid--3 > :nth-last-child(2):nth-child(3n + 1) ~ * { grid-column: span 3; }

.gin-anat .mk-grid--2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gin-anat .mk-grid--2 > * { grid-column: span 2; }

/* one card alone on the last row → full width */
.gin-anat .mk-grid--2 > :last-child:nth-child(2n + 1) { grid-column: span 4; }

@media (max-width: 720px) {
    .gin-anat .mk-grid--3,
    .gin-anat .mk-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .gin-anat .mk-grid--3 > *,
    .gin-anat .mk-grid--2 > *,
    .gin-anat .mk-grid--3 > :last-child:nth-child(3n + 1),
    .gin-anat .mk-grid--3 > :nth-last-child(2):nth-child(3n + 1),
    .gin-anat .mk-grid--3 > :nth-last-child(2):nth-child(3n + 1) ~ *,
    .gin-anat .mk-grid--2 > :last-child:nth-child(2n + 1) { grid-column: auto; }
}

/* ------------------------------------------------------------
   FIGURE THUMBNAIL SIZING — undo the RAR letterbox on this axis.

   modules/rar/pathology/path-figure.css is the shared figure +
   lightbox engine and it pins a 168px height on the thumbnail with no
   width constraint; combined with micro-kit's `width: 100%`,
   `object-fit` falls back to `fill`, so any image that is not ~2:1 is
   STRETCHED. The distortion is silent — nothing errors, the page just
   looks wrong. Anatomy is full of portrait figures (a sagittal
   section, an inferior view of the palate), so this matters here more
   than on most axes.

   path-figure.css loads AFTER this file in index.html, so an
   equal-specificity rule would lose. This selector carries more
   class-level units than its three.

   The fix lets the image keep its own aspect ratio and caps its HEIGHT
   instead of its width, so a portrait plate renders tall-and-narrow and
   centred rather than letterboxed inside a 940px band. `width: auto` is
   the load-bearing half: micro-kit's `width: 100%` is what forces a
   square image into a wide box in the first place.
   ------------------------------------------------------------ */
.gin-anat .atl-figure .atl-figure__btn .atl-figure__img,
[id^="ginAnat"] .atl-figure .atl-figure__btn .atl-figure__img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    margin-inline: auto;
}

/* ============================================================
   ANATOMY DATA TABLE  (.anat-table)
   ------------------------------------------------------------
   Added 2026-09-14 after Chris reviewed the first build: the
   authored-SVG tables were "square, bland and sad", capped at
   940px, too small to read, and with no way to tell where to
   look. An SVG cannot hover, cannot reflow, and cannot be
   re-weighted without redrawing it.

   So the TABLES became real HTML and the SVGs kept the DIAGRAMS.
   A table of rows and columns is a table; a flow, a stack or a
   pair of panels stays a picture.

   What this gives that the SVG could not:
     · full card width, so the type can be 15-16px instead of 11.5
     · a hover row, so the eye can hold its place across columns
     · real <strong> inside cells, so the answer is findable
     · an accent rail + tint on the row that is the exception
     · reflow + horizontal scroll on a narrow screen

   MARKUP CONTRACT — wrap every table so it can scroll on mobile:
     <div class="anat-table">
       <table>
         <caption>…optional lead line…</caption>
         <thead><tr><th>…</th></tr></thead>
         <tbody>
           <tr class="is-key">            <- the exception row
             <th scope="row">Name<span class="anat-flag">the exception</span></th>
             <td>…</td>
           </tr>
         </tbody>
       </table>
     </div>
     <p class="anat-banner">…the lecturer's own bolded line…</p>
     <p class="anat-caption">…the italic teaching line…</p>
   ============================================================ */

.gin-anat .anat-table {
    margin: 16px 0 0;
    max-width: 100%;
    min-width: 0;      /* so a flex parent can shrink past the table's min-width */
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    -webkit-overflow-scrolling: touch;
}

.gin-anat .anat-table > table {
    width: 100%;
    min-width: 680px;            /* below this it scrolls rather than crushes */
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
    color: #111111;
}

.gin-anat .anat-table caption {
    caption-side: top;
    text-align: left;
    padding: 13px 16px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* Header — dark bar, the same weight the SVG versions carried. */
.gin-anat .anat-table thead th {
    text-align: left;
    padding: 11px 16px;
    background: #3E3E3E;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gin-anat .anat-table tbody td,
.gin-anat .anat-table tbody th {
    padding: 13px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.09);
    vertical-align: top;
    text-align: left;
}

/* The first cell of a row is its subject — it outranks the cells beside it. */
.gin-anat .anat-table tbody th[scope="row"] {
    font-size: 16px;
    font-weight: 800;
    color: #111111;
    white-space: normal;
}

/* Hover holds the eye across a wide row — the thing an SVG cannot do. */
.gin-anat .anat-table tbody tr { transition: background 0.12s ease; }
.gin-anat .anat-table tbody tr:hover { background: #f4f9fd; }

/* THE EXCEPTION ROW. Tint + a left rail + a flag word, so it is marked
   three ways and never by colour alone. */
.gin-anat .anat-table tbody tr.is-key { background: #FDF3E3; }
.gin-anat .anat-table tbody tr.is-key:hover { background: #fbead2; }
.gin-anat .anat-table tbody tr.is-key > *:first-child {
    box-shadow: inset 5px 0 0 0 #B8651B;
}

/* A quieter variant for a row that is merely grouped, not exceptional. */
.gin-anat .anat-table tbody tr.is-grouped > *:first-child {
    box-shadow: inset 5px 0 0 0 #1F5C8B;
}

.gin-anat .anat-flag {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #B8651B;
}
.gin-anat .anat-flag--muted {
    color: #555e6b;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 11.5px;
}

/* An em-dash cell, for a row that genuinely has nothing in that column —
   the emptiness is the teaching, so it is drawn rather than left blank. */
.gin-anat .anat-none {
    color: #8a93a0;
    font-weight: 700;
}

/* The lecturer's own bolded line, carried out of the SVG so it can wrap. */
.gin-anat .anat-banner {
    margin: 12px 0 0;
    padding: 12px 16px;
    border: 1.6px solid #B8651B;
    border-radius: 10px;
    background: #FDF3E3;
    font-size: 14.5px;
    font-weight: 700;
    color: #111111;
}
.gin-anat .anat-banner--danger {
    border-color: #A32020;
    background: #FDECEC;
}

/* The italic teaching line that used to sit inside the SVG. */
.gin-anat .anat-caption {
    margin: 10px 0 0;
    font-size: 13.5px;
    font-style: italic;
    color: #3d4654;
}

/* ------------------------------------------------------------
   FIGURES, AFTER THE SAME REVIEW
   ------------------------------------------------------------
   1 — Authored diagrams run FULL CARD WIDTH, not the kit's 940px
       band. An SVG scales, so widening it enlarges every label
       for free: the 11.5px table text Chris could not read
       becomes ~16px at 1380px. Use `.anat-fig--wide` INSTEAD OF
       `mk-fig--band` on an authored diagram.
   2 — A portrait photo inside a 940px band left grey gutters
       down both sides ("overhanging grey ... does not belong").
       `.anat-fig--fit` shrinks the figure to the picture instead
       of padding it out to a fixed band.
   3 — A small figure beside a tall card stack looked "tacky".
       `.mk-fig-row--match` makes the picture fill the row's
       height and take a real share of its width.
   ------------------------------------------------------------ */

.gin-anat .anat-fig--wide {
    width: 100%;
    max-width: none;
    margin: 14px 0 16px;
}

/* Shrink-wrap a figure to its image so no empty band is drawn either side. */
.gin-anat .anat-fig--fit {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

/* A picture beside copy: exactly the height of the column next to it.

   The load-bearing part is that the IMAGE IS TAKEN OUT OF FLOW. Left in
   flow, a tall plate sets the row's height and the short text column is
   stretched to match it, which is how a two-line chip roster ended up with
   380px of white under it. Absolutely positioned, the picture fills
   whatever height the COPY decides, and can never push the row taller than
   its own content needs. `min-height` is the floor so a very short column
   cannot shrink the picture to a stamp. */
.gin-anat .mk-fig-row--match { align-items: stretch; }
.gin-anat .mk-fig-row--match > .mk-fig {
    flex: 0 0 clamp(260px, 34%, 430px);
    display: flex;
    flex-direction: column;
    margin-top: 0;
    min-height: 240px;
}
.gin-anat .mk-fig-row--match > .mk-fig > .atl-figure__btn {
    flex: 1 1 auto;
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;            /* the crop below has to be clipped */
    border-radius: 10px;
}
/* FILL, DO NOT PAD (format rule F5). `contain` kept the whole picture but
   letterboxed it — a portrait plate drew 136px of picture inside a 430px box
   and the bands either side are exactly what Chris rejected. `cover` fills the
   box and crops instead.

   `object-position: center top` is the load-bearing half: anatomical figures
   put their title and their most-labelled structures at the TOP, so when a
   crop is unavoidable the bottom is the safe edge to lose. A figure that
   cannot survive any crop should not use --match; give it a full-width row. */
.gin-anat .mk-fig-row--match > .mk-fig .atl-figure__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    margin: 0;
}
@media (max-width: 820px) {
    .gin-anat .mk-fig-row--match { align-items: flex-start; }
    .gin-anat .mk-fig-row--match > .mk-fig { flex: 1 1 auto; width: 100%; min-height: 0; }
    .gin-anat .mk-fig-row--match > .mk-fig > .atl-figure__btn { position: static; }
    .gin-anat .mk-fig-row--match > .mk-fig .atl-figure__img {
        position: static; height: auto; max-height: 420px; margin-inline: auto;
        object-fit: contain;     /* stacked on mobile there is room, so show it whole */
    }
}

/* A compact chip roster — for a bare list of NAMES with no body text.
   Ten one-word `mk-factor` cards read as ten empty boxes and ate half a
   screen; as chips they take four lines and sit beside a figure. */
.gin-anat .anat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.gin-anat .anat-chips > li {
    padding: 7px 14px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    background: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    color: #111111;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}