/* The moult card (ruikaart), drawn after the printed EURING card: two wings
   of numbered feathers, the percentage covert tracts, the tail and the body
   feather scores. Shared by the capture form, the photo page and the
   read-only card on the capture detail page.

   Sizes and colours follow the "Ruikaart v2" design. */

.moult-card {
    --mc-feather-w: 30px;
    --mc-line: #b9bfa8;
    --mc-panel: #f9faf5;
    --mc-ink: #422a27;
    --mc-muted: #7a7c79;
    color: #555752;
}

/* --- toolbar above the card --- */

.mc-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.mc-toolbar__count { font-size: 12px; color: var(--mc-muted); margin-right: auto; }
.mc-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--mc-line);
    background: #fff;
    color: var(--primary, #5f3f3b);
    cursor: pointer;
}
.mc-btn:hover { background: #f4f5ee; }
.mc-btn--primary {
    border-color: var(--primary, #5f3f3b);
    background: var(--primary, #5f3f3b);
    color: #fff;
}
.mc-btn--primary:hover { background: var(--primary-dark, #422a27); }
/* Copying needs a scored wing to copy from. */
.mc-btn--disabled, .mc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mc-btn--disabled:hover, .mc-btn:disabled:hover { background: var(--primary, #5f3f3b); }

/* --- feathers shown per tract --- */

.mc-counts {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    border: 1px solid var(--mc-line);
    border-radius: var(--radius);
    background: var(--mc-panel);
    padding: 10px 14px;
    margin-bottom: 12px;
}
.mc-counts__title {
    font-size: 11px; font-weight: 700; color: var(--mc-ink);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px;
}
.mc-counts__field {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 11px; color: #5a6150; font-weight: 500;
}
.mc-counts__field input {
    width: 56px; height: 26px; text-align: center; font-size: 13px;
    border: 1px solid var(--mc-line); border-radius: var(--radius);
    background: #fff; color: var(--mc-ink); padding: 0;
}
.mc-counts__help { font-size: 11px; color: var(--mc-muted); margin-bottom: 6px; }

/* --- the card itself --- */

.moult-card__frame {
    border: 1px solid var(--mc-line);
    border-radius: var(--radius);
    background: #fff;
    padding: 12px;
}
/* No gap: the body mark between the wings takes its 16px (WINGS_GAP in
   moult-card.js), so the card fits exactly as it did without it. */
.moult-card__wings { display: flex; gap: 0; overflow-x: auto; }
/* The bird's body, where the two arms meet: an orientation mark, nothing to
   fill in. */
.mc-body-mark {
    flex: 0 0 16px; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius); background: #e0e0dc;
    writing-mode: vertical-rl;
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--mc-muted);
}

.mc-wing {
    border: 1px solid var(--mc-line);
    border-radius: var(--radius);
    /* Tight side padding: every pixel here decides whether both wings fit. */
    padding: 10px 8px 12px;
    background: var(--mc-panel);
    flex: 1 1 0%;
    min-width: 0;
    box-sizing: border-box;
    scroll-snap-align: start;
    overflow-x: auto;
}
.mc-wing__title {
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--mc-ink); margin-bottom: 8px;
}
.mc-wing--R .mc-wing__title { text-align: right; }
/* Outer and inner edge of a wing, only where one wing is shown at a time
   and the body mark between the wings is gone. */
.mc-wing__ends {
    display: none; justify-content: space-between;
    font-size: 9px; color: var(--mc-muted); margin: -4px 0 4px;
}
.mc-wing--R .mc-wing__ends { flex-direction: row-reverse; }

/* Hand at the wing tip, arm towards the body; the right wing mirrors it.
   Both wings hug the middle of the card -- the left one aligned right, the
   right one left -- so the two arms meet at the bird's back, the way the
   printed card lies. (flex-end is the inner edge in both directions: the
   right wing runs row-reverse.) */
.mc-wing__grid {
    display: flex; gap: 14px; align-items: flex-start;
    min-width: min-content; justify-content: flex-end;
}
.mc-wing--R .mc-wing__grid { flex-direction: row-reverse; }

.mc-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mc-wing--R .mc-block { align-items: flex-end; }
/* The top band of both blocks (alula + carpal covert on one side, the
   percentage tracts on the other) is levelled by JS, so the greater coverts
   land beside the primary coverts and the secondaries beside the primaries,
   the way the printed card reads. */
.mc-block__top { align-items: flex-end; align-self: stretch; }

.mc-tract-pair { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; }
.mc-wing--R .mc-tract-pair { flex-direction: row-reverse; }
.mc-tract-pair--flight { align-items: flex-start; justify-content: flex-start; }

.mc-tract__label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #5a6150;
    margin-bottom: 3px; white-space: nowrap;
}
.mc-wing--R .mc-tract__label { text-align: right; }

.mc-feathers { display: flex; gap: 2px; }
.mc-wing--R .mc-feathers { flex-direction: row-reverse; }
/* The carpal covert lies over the innermost primary covert, so it sits above
   primary covert 1: the inner edge of the hand block (right on the left
   wing, left on the right one — row-reverse takes care of the mirroring). */
.mc-tract--CC .mc-feathers { justify-content: flex-end; }
.mc-tract--CC .mc-tract__label { text-align: right; }
.mc-wing--R .mc-tract--CC .mc-tract__label { text-align: left; }
/* No primary covert lies over the outermost primaries, so the covert row
   starts that many feathers in — keeping covert N above primary N. */
.mc-tract--inset .mc-feathers { margin-left: var(--mc-inset); }
.mc-wing--R .mc-tract--inset .mc-feathers { margin-left: 0; margin-right: var(--mc-inset); }
.mc-tract--inset { --mc-inset: calc((var(--mc-feather-w) + 2px) * var(--mc-inset-count, 0)); }

/* A feather: the silhouette of the printed card, number above a score box. */
.mc-feather {
    width: var(--mc-feather-w);
    flex: 0 0 var(--mc-feather-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-top: 4px;
    background: #e9ecdd;
}
.mc-feather--covert { height: 56px; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
.mc-feather--flight { height: 104px; clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%); }
/* The outermost primary of a songbird (P10) is much shorter than the rest. */
.mc-feather--flight.mc-feather--short { height: 60px; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
.mc-feather--tertial { height: 88px; clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%); }
.mc-tail .mc-feather { height: 96px; clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); }

.mc-feather__num { font-size: 10px; font-weight: 700; line-height: 1; }
.mc-feather input,
.mc-feather .mc-value {
    /* Scales with the feather, so a narrower card stays usable. */
    width: calc(var(--mc-feather-w) - 8px);
    height: 20px; padding: 0;
    text-align: center; font-size: 12px; font-weight: 700;
    border: 1px solid var(--mc-line); border-radius: var(--radius);
    background: #fff; color: var(--mc-ink);
}
.mc-feather .mc-value { display: flex; align-items: center; justify-content: center; }
.moult-card input:focus-visible,
.moult-card textarea:focus-visible {
    outline: none;
    border-color: var(--accent-dark, #97a566) !important;
    box-shadow: 0 0 0 3px rgba(151, 165, 102, 0.35);
}
.moult-card input[type="number"]::-webkit-outer-spin-button,
.moult-card input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Percentage tracts (marginal / median coverts). The three percentages sit
   under the tract's name: side by side they set a floor on how narrow the
   arm block can get, which cost the second wing on a laptop. */
/* Marginal and median coverts as one compact table, so they fit the same
   band of height as the alula opposite them. */
.mc-percents { display: flex; align-items: flex-end; }
.mc-wing--R .mc-percents { justify-content: flex-end; }
.mc-percent-table {
    border: 1px solid var(--mc-line); border-radius: var(--radius);
    padding: 4px 8px; background: #fff;
    display: flex; flex-direction: column; gap: 2px;
}
.mc-percent-row {
    display: grid;
    grid-template-columns: minmax(0, 5.2rem) repeat(3, 2.5rem);
    gap: 4px; align-items: center;
}
.mc-percent-row--head span {
    font-size: 9px; color: var(--mc-muted); text-align: center; line-height: 1.1;
    white-space: nowrap;
}
.mc-percent-row--head span:first-child { text-align: left; font-weight: 700; }
.mc-percent-row__label {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: #5a6150; line-height: 1.15;
}
.mc-percent-row input,
.mc-percent-row .mc-value {
    width: 100%; height: 18px; padding: 0;
    text-align: center; font-size: 11px;
    border: 1px solid var(--mc-line); border-radius: var(--radius);
    background: var(--mc-panel); color: var(--mc-ink);
}

/* --- comments, tail and body feathers --- */

/* Under the wings: the score scale, the tail and the body feathers with the
   comments. MoultCardInstance.fitBottom picks the layout that fits:

   beside   scale | tail | body + comments, one row; the two outer columns
            are equal, so the tail's middle lands exactly under the middle
            between the two wings;
   stacked  the tail alone directly under the wings, the rest in a wrapping
            row below it -- the score drawing only where it costs no line. */
.moult-card__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 12px;
    align-items: flex-start;
}
.moult-card__tail { display: flex; justify-content: center; min-width: 0; }
.moult-card__side { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; min-width: 0; }
.moult-card__bottom--beside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
}
.moult-card__bottom--beside .moult-card__side { justify-content: flex-end; flex-wrap: nowrap; }
.moult-card__bottom--beside .mc-comments { min-width: 140px; }
.moult-card__bottom--stacked .moult-card__tail { flex-basis: 100%; order: -1; }
/* Scale drawing and its key side by side, so the row stays short enough
   for the whole card to fit a laptop screen without scrolling. */
.mc-scale { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-start; min-width: 0; }
.mc-scale__image { display: block; flex: 0 1 260px; max-width: 260px; min-width: 180px; }
.mc-scale__image[hidden] { display: none; }
.mc-scale__image img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--mc-line); border-radius: var(--radius); background: #fff;
}
.mc-comments { flex: 1 1 160px; max-width: 320px; min-width: 0; }
.mc-comments textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    background: var(--mc-panel); border: 1px solid var(--mc-line);
    border-radius: var(--radius); color: var(--mc-ink);
    font-size: 11px; padding: 5px 7px; min-height: 46px;
}
.mc-comments__text { font-size: 12px; white-space: pre-wrap; }

.mc-tail { overflow-x: auto; max-width: 100%; }
.mc-tail__title { text-align: center; }
.mc-tail__halves { display: flex; gap: 14px; align-items: flex-end; justify-content: center; min-width: min-content; }
.mc-tail__ends {
    display: flex; justify-content: space-between;
    font-size: 9px; color: var(--mc-muted); margin-top: 2px;
    margin-inline: auto; width: min-content; min-width: 100%;
}

.mc-body {
    border: 1px solid var(--mc-line); border-radius: var(--radius);
    overflow: hidden; background: #fff; flex: 0 0 auto;
}
.mc-body__title {
    padding: 4px 10px; background: #e2e8d1;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--mc-ink);
}
.mc-body-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center; gap: 8px;
    padding: 2px 8px; border-top: 1px solid #e2e8d1;
}
.mc-body-row__label { font-size: 11px; color: #555752; }
.mc-body-row__input,
.mc-body-row .mc-value {
    width: 24px; height: 22px; padding: 0;
    text-align: center; font-size: 13px; font-weight: 700;
    border: 1px solid var(--mc-line); border-radius: var(--radius);
    background: #fff; color: var(--mc-ink);
}
/* The score drawing bottom left: a click blows it up over the page, because
   on a laptop the printed scale is drawn smaller than a feather. */
.mc-scale__image { position: relative; display: block; cursor: zoom-in; }
.mc-scale__zoom {
    position: absolute; right: 4px; bottom: 4px;
    width: 20px; height: 20px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.85); border: 1px solid var(--mc-line);
    font-size: 12px; line-height: 1; color: var(--mc-ink);
}
.mc-zoom {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; background: rgba(20, 22, 16, 0.8); cursor: zoom-out;
}
.mc-zoom img {
    max-width: 96vw; max-height: 92vh;
    background: #fff; border-radius: var(--radius); padding: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.mc-body-row--total { border-top: 1px solid var(--mc-line); background: var(--mc-panel); padding: 3px 8px; }
/* The total may be typed while no tract is scored; once one is, the tracts
   decide it and the box only reports. */
.mc-body-row__input--total { font-weight: 700; color: var(--accent-dark, #97a566); }
.mc-body-row__input--total[readonly] { background: transparent; border-color: transparent; }
.mc-body-row--total .mc-body-row__label { font-weight: 700; color: var(--mc-ink); }
.mc-body-total { font-size: 13px; font-weight: 700; color: var(--accent-dark, #97a566); text-align: center; }
.mc-body__scale {
    padding: 4px 8px; border-top: 1px solid #e2e8d1;
    font-size: 9.5px; color: var(--mc-muted); max-width: 15rem; line-height: 1.3;
}

/* --- legend --- */

.mc-legend {
    display: flex; flex-direction: column; gap: 1px;
    flex: 0 1 auto; min-width: 0;
}
.mc-legend__item { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #5a6150; }
.mc-legend__swatch {
    width: 13px; height: 13px; border-radius: var(--radius);
    display: inline-block; border: 1px solid var(--mc-line);
}

/* --- one wing per screen on phones --- */

.mc-wing-tabs { display: none; gap: 6px; margin-bottom: 10px; }
.mc-wing-tab {
    flex: 1; font-size: 13px; font-weight: 500; padding: 7px 0;
    border-radius: var(--radius); cursor: pointer;
    border: 1px solid var(--mc-line); background: #fff; color: var(--primary, #5f3f3b);
}
.mc-wing-tab--active {
    border-color: var(--primary, #5f3f3b);
    background: var(--primary, #5f3f3b);
    color: #fff;
}
/* A dot on the tab of a wing that carries scores: with one wing on screen,
   nothing else says that the other one was filled in too. */
.mc-wing-tab__mark { margin-left: 5px; font-size: 9px; vertical-align: 1px; color: var(--accent-dark, #97a566); }
.mc-wing-tab--active .mc-wing-tab__mark { color: #dfe7c4; }

/* One wing at a time — only when two will not fit even at the smallest
   feather size (see MoultCardInstance.fit). The wing keeps its own width and
   is centred, rather than stretching across the card with its rows hugging
   one edge. */
.moult-card--single .mc-wing-tabs { display: flex; }
.moult-card--single .moult-card__wings { justify-content: center; }
.moult-card--single .mc-wing { display: none; flex: 0 1 auto; }
.moult-card--single .mc-wing--active { display: block; }
.moult-card--single .mc-body-mark { display: none; }
.moult-card--single .mc-wing__ends { display: flex; }

/* Hand above arm, so a whole wing fits a phone screen. */
.moult-card--stacked .mc-wing__grid,
.moult-card--stacked .mc-wing--R .mc-wing__grid { flex-direction: column; }
.moult-card--stacked .mc-block,
.moult-card--stacked .mc-wing--R .mc-block { align-items: flex-start; }

/* Last resort, for the narrowest screens: one tract per row, in the order
   the card is read and the order it is typed (see chain()). It undoes the two
   pairs the printed card puts side by side -- alula beside the carpal covert,
   secondaries beside the tertials -- which is the last width the card has to
   give up. Ten primaries next to each other is the floor below this: they
   already had a row to themselves, so a screen narrower than that has to
   shrink the boxes. The card only grows downwards from here, and scrolls. */
.moult-card--rows .mc-tract-pair,
.moult-card--rows .mc-wing--R .mc-tract-pair {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
/* The tertials step up on the printed card because they lie under the
   secondaries beside them; on a row of their own that offset is only a gap. */
.moult-card--rows .mc-tract--TE .mc-feather { margin-top: 0 !important; }
/* Nothing left to level: the two blocks no longer stand side by side. */
.moult-card--rows .mc-block__top { height: auto !important; align-items: flex-start; }

/* The scale in one line, above the card — the design's subtitle. */
.moult-card__scale { font-size: 12px; color: #7a7c79; margin-bottom: 10px; }

/* The moult card's modal takes as much of the screen as it can, so both
   wings fit side by side on a laptop and the card needs no scrolling. */
.moult-modal {
    max-width: none;
    margin: 0.5rem;
    height: calc(100% - 1rem);
}

/* Read-only rendering (capture detail): the score is just a number on the
   feather, with no box around it. That reads better than a grid of empty
   input boxes, and lets the card be drawn small enough to keep both wings in
   view in a narrow column. */
.moult-card--readonly .mc-feather .mc-value {
    width: auto; height: auto; min-height: 14px;
    border: none; background: none; font-size: 12px;
}
/* Without the feather numbers the score is all a read-only feather holds; it
   sits a little down from the top so it reads as the feather's own. */
.moult-card--readonly .mc-feather { padding-top: 7px; }
.moult-card--readonly .mc-percent .mc-value { border: none; background: none; }

/* A score box also takes a single letter, which counts as 0. */
.mc-legend__note { font-size: 10px; font-style: italic; color: var(--mc-muted); margin-top: 3px; }

/* --- filling every empty feather in one go --- */

.mc-fill { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mc-fill__label { font-size: 11px; color: var(--mc-muted); margin-right: 2px; }
.mc-btn--fill { padding: 5px 9px; }
.mc-btn--small { padding: 4px 8px; font-size: 11px; align-self: flex-end; }
/* Which wing, and what to put in every empty box: a score, or a letter of
   your own. The box is one character wide, like the ones on the card. */
.mc-fill__scope {
    font-size: 11px; padding: 4px 6px;
    border: 1px solid var(--mc-line); border-radius: var(--radius);
    background: #fff; color: var(--mc-ink);
}
.mc-fill__value {
    width: 2.4rem; text-align: center; font-size: 13px; font-weight: 600;
    padding: 4px 2px; border: 1px solid var(--mc-line);
    border-radius: var(--radius); background: #fff; color: var(--mc-ink);
}

/* --- U (unknown) and X (not examined): explicit non-scores --- */

.mc-feather--unknown input,
.mc-feather--unknown .mc-value,
.mc-feather--not-examined input,
.mc-feather--not-examined .mc-value { color: var(--mc-muted); font-weight: 500; }
.mc-feather--not-examined {
    background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(0, 0, 0, 0.06) 4px 6px);
}
.mc-legend__swatch--X {
    background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(0, 0, 0, 0.08) 3px 5px);
}
.mc-legend__item--non-score { color: var(--mc-muted); }

/* --- a letter of the ringer's own: its own colour, so shorthand does not
   read as a score of 0 --- */

.mc-feather--letter input,
.mc-feather--letter .mc-value { color: #2b4470; font-weight: 700; }
.mc-legend__swatch--letter { border-color: #9fb0d0; }
.mc-legend__item--letter { color: #2b4470; }

/* --- primary score per wing, in the tract label --- */

.mc-primary-score { font-weight: 700; color: var(--accent-dark, #97a566); text-transform: none; letter-spacing: 0; }

/* --- body-feather scale: one line per score --- */

.mc-body__scale { display: flex; flex-direction: column; gap: 1px; }
.mc-body__scale-line b { color: var(--mc-ink); margin-right: 1px; }

/* --- feathers per tract: where the numbers come from --- */

.mc-counts { flex-direction: column; align-items: stretch; gap: 8px; }
.mc-counts__fields { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.mc-counts__fields .mc-counts__title { flex-basis: 100%; margin-bottom: 0; }
.mc-counts__source { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 11px; color: var(--mc-muted); }
.mc-counts__origin { font-weight: 700; color: var(--mc-ink); }
.mc-counts__own { color: var(--primary, #5f3f3b); font-weight: 600; }
.mc-counts__hint { flex-basis: 100%; }
.mc-counts__message {
    flex-basis: 100%; padding: 5px 8px; border-radius: var(--radius);
    background: #eef2dd; border: 1px solid #cdd7a8; color: #42452e; font-size: 11px;
}
.mc-counts__source .mc-counts__help { flex-basis: 100%; margin-bottom: 0; }

/* --- a refused value: a digit above the scale is never clamped --- */

.mc-rejected {
    margin-bottom: 8px; padding: 6px 10px; border-radius: var(--radius);
    background: #fbe9e7; border: 1px solid #d9796c; color: #8a2a1e;
    font-size: 12px; font-weight: 500;
}
/* The feather is clipped to its silhouette, so no outline would show: the
   whole feather turns red instead (over the heat-map colour set inline). */
.mc-feather--rejected { background: #f2b8ae !important; }
.moult-card input.mc-input--rejected {
    color: #c0392b !important; font-weight: 700;
    border-color: #c0392b !important; background: #fbe9e7 !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.3);
}

/* --- what the card records, and how to fill it in after the moult --- */

.mc-legend__note--scope { font-style: normal; color: var(--mc-ink); }
.mc-after-moult { margin-top: 6px; font-size: 11px; color: #555752; }
.mc-after-moult__title { cursor: pointer; font-weight: 600; color: var(--primary, #5f3f3b); }
.mc-after-moult__draft {
    display: inline-block; padding: 0 5px; border-radius: 8px;
    background: #f3efe4; border: 1px solid var(--mc-line);
    font-size: 10px; font-weight: 500; color: var(--mc-muted); text-transform: lowercase;
}
.mc-after-moult__lines { margin: 4px 0 0; padding-left: 16px; }
.mc-after-moult__lines li { margin-bottom: 2px; }