/* ============================================================
   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);
}

/* ------------------------------------------------------------
   MODULE III — THE THREE GUT SEGMENTS, ONE COLOUR EACH.
   The spine of the neurovasculature module is that artery, nerve, vein
   and lymph all change at the same two boundaries. Every authored figure
   in it draws the foregut amber, the midgut blue and the hindgut green;
   these give a TABLE ROW the same colour as the segment it belongs to,
   so the eye can follow one segment down a table and across pages.
   The segment is always also NAMED in the row — colour is the second
   signal, never the only one.
   ------------------------------------------------------------ */
.gin-anat .anat-table tbody tr.seg-fore { background: #FDF3E3; }
.gin-anat .anat-table tbody tr.seg-fore:hover { background: #fbead2; }
.gin-anat .anat-table tbody tr.seg-fore > *:first-child { box-shadow: inset 5px 0 0 0 #B8651B; }
.gin-anat .anat-table tbody tr.seg-mid { background: #EEF5FB; }
.gin-anat .anat-table tbody tr.seg-mid:hover { background: #e2eef8; }
.gin-anat .anat-table tbody tr.seg-mid > *:first-child { box-shadow: inset 5px 0 0 0 #1F5C8B; }
.gin-anat .anat-table tbody tr.seg-hind { background: #EEF7F0; }
.gin-anat .anat-table tbody tr.seg-hind:hover { background: #e1f0e5; }
.gin-anat .anat-table tbody tr.seg-hind > *:first-child { box-shadow: inset 5px 0 0 0 #1F6B3F; }
/* A row the lecture leaves unassigned — drawn grey so the gap reads as a gap. */
.gin-anat .anat-table tbody tr.seg-none > *:first-child { box-shadow: inset 5px 0 0 0 #8a93a0; }

/* The same three colours as an inline word-chip, for naming a segment
   inside running text or a table cell. */
.gin-anat .anat-seg {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.86em;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.gin-anat .anat-seg--fore { background: #FDF3E3; color: #8a4510; border-color: #e9c89f; }
.gin-anat .anat-seg--mid  { background: #DCEBF7; color: #174a72; border-color: #a9c8e3; }
.gin-anat .anat-seg--hind { background: #DFEFE3; color: #185733; border-color: #a8d2b3; }

/* ------------------------------------------------------------
   A RASTER PLATE IN A FULL-WIDTH FIGURE — shrink-wrap it, never pad it.
   `.anat-fig--wide` exists for AUTHORED SVG, which scales to any width.
   A raster plate inside it is capped at 520px tall by the figure kit, so a
   landscape plate drew ~780px of picture inside a 1,390px grey-tinted
   button: ~300px of grey band down each side — exactly the "overhanging
   grey" Chris rejected in module I. Six module II plates shipped that way.
   The button is the only thing a raster figure contains (an authored SVG is
   inserted bare), so `:has()` tells the two apart without a new class.
   ------------------------------------------------------------ */
.gin-anat .anat-fig--wide:has(> .atl-figure__btn) {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}
.gin-anat .anat-fig--wide > .atl-figure__btn { background: transparent; }

/* ------------------------------------------------------------
   `.anat-pair` — TWO PICTURES SIDE BY SIDE AT EQUAL HEIGHT (F6 + F7).
   AnatFigFit gives each figure a flex-grow equal to its own aspect ratio,
   so the row's width is shared in proportion to the pictures and both come
   out exactly the same height, filled edge to edge. The kit's 520px image
   cap is lifted inside a pair because the pair itself sets the size.
   ------------------------------------------------------------ */
.gin-anat .anat-pair {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 16px 0 0;
}
.gin-anat .anat-pair > .mk-fig {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
.gin-anat .anat-pair > .mk-fig > .atl-figure__btn { display: block; width: 100%; background: transparent; }
.gin-anat .anat-pair .atl-figure__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}
@media (max-width: 820px) {
    .gin-anat .anat-pair { flex-direction: column; }
    .gin-anat .anat-pair > .mk-fig { flex-grow: 1 !important; width: 100%; }
}

/* ------------------------------------------------------------
   LEVEL TIERS — table rows grouped by SPINAL LEVEL, not by gut segment.
   The lumbar plexus pairs its six branches by level: two from L1 alone,
   two from two segments, two from L2 to L4. Amber, blue and green already
   mean foregut, midgut and hindgut everywhere in this module, so a level
   grouping takes ONE hue that deepens as the level descends. The segments
   are always also written in the row — the tint is the second signal.
   ------------------------------------------------------------ */
.gin-anat .anat-table tbody tr.tier-1 { background: #F7F4FC; }
.gin-anat .anat-table tbody tr.tier-2 { background: #F0EAF9; }
.gin-anat .anat-table tbody tr.tier-3 { background: #E8E0F5; }
.gin-anat .anat-table tbody tr.tier-1:hover,
.gin-anat .anat-table tbody tr.tier-2:hover,
.gin-anat .anat-table tbody tr.tier-3:hover { background: #E0D5F1; }
.gin-anat .anat-table tbody tr.tier-1 > *:first-child { box-shadow: inset 5px 0 0 0 #B9A7DB; }
.gin-anat .anat-table tbody tr.tier-2 > *:first-child { box-shadow: inset 5px 0 0 0 #8B6FC2; }
.gin-anat .anat-table tbody tr.tier-3 > *:first-child { box-shadow: inset 5px 0 0 0 #5A3D97; }
/* The first row of each tier gets a firmer rule, so the pairs read as pairs. */
.gin-anat .anat-table tbody tr.tier-start > td,
.gin-anat .anat-table tbody tr.tier-start > th { border-top: 2px solid #C9BCE3; }

/* ------------------------------------------------------------
   GROUP-HEAD ROW — names the structure a run of rows shares, so a reader
   sees at a glance that seven findings come from four structures. It spans
   every column and uses scope="rowgroup", so the bold-black first-cell rule
   (th[scope="row"]) does not reach it. Added for the K06 router.
   ------------------------------------------------------------ */
.gin-anat .anat-table tbody tr.anat-grouphead > th {
    padding: 8px 16px;
    background: #F1F3F6;
    border-top: 2px solid #C7CDD6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3E4652;
    text-align: left;
}
.gin-anat .anat-table tbody tr.anat-grouphead:hover { background: transparent; }

/* ------------------------------------------------------------
   A LADDER THAT DESCENDS BESIDE A PICTURE — `.ladder--stack`
   In a figure-row copy column (~800px) the shared auto-fit grid lays four
   steps out as three-and-one, stranding the last step on a line of its own.
   Where the steps DESCEND through the body — K05's L1 → L4 beside a plate
   drawn top to bottom — a single vertical stack reads in the same direction
   as the picture. The connector turns downward exactly as the shared ladder
   does on a phone.
   ------------------------------------------------------------ */
.gin-anat .ladder.ladder--stack { grid-template-columns: minmax(0, 1fr); gap: 18px 0; }
.gin-anat .ladder.ladder--stack .ladder-step { padding: 10px 14px 11px; gap: 4px; }
.gin-anat .ladder.ladder--stack .ladder-step::after {
    top: auto;
    right: 50%;
    bottom: -17px;
    transform: translateX(50%) rotate(90deg);
}

/* ------------------------------------------------------------
   CALLOUT TAGS WRAP INSIDE THEIR COLUMN.
   `.hy-callout__item` gives the provenance tag a fixed 104px column and the
   shared `.hy-tag` is `white-space: nowrap`, so any tag longer than about
   13 characters ("Gastroduodenal artery", "Femoral · obturator") ran out of
   its pill and printed over the first words of the callout. Measured
   2026-09-18: 30 tags across all three anatomy modules overflowed. The gates
   cannot see it — only a rendered page can. Here a long tag wraps onto a
   second centred line inside its own column instead; a short one is
   unchanged.
   ------------------------------------------------------------ */
.gin-anat .hy-callout__item > .hy-tag {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    align-self: start;
    /* a single long word ("JUGULODIGASTRIC") cannot wrap, so give it the
       room: 5px sides instead of 8px and tighter tracking fit a 14-letter
       word in the 104px column without shrinking the type */
    padding-inline: 5px;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   DRAWING-ERROR NOTE — `.anat-fig-note`, inside a plate's figcaption.
   Chris, 2026-09-18: a plate that teaches well but draws one thing wrong
   ships with a small yellow note saying exactly what is wrong, rather than
   being held back for a redraw. Yellow reads as "check this", not as an
   exam trap (purple) or a danger banner (red).
   Markup: <span class="anat-fig-note">&#9888;&#65039; <strong>Drawing error</strong> — …</span>
   ------------------------------------------------------------ */
.gin-anat .anat-fig-note {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid #E5C75A;
    border-radius: 8px;
    background: #FFF6CC;
    color: #4A3900;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}
.gin-anat .anat-fig-note strong { color: #3A2C00; font-weight: 800; }