/* ─────────────────────────────────────────────────────────────────────────
   surfaces/matching/matching.css — this surface's own layer, and only its own.

   The palette, the type scale, the card, the eyebrow, the button, the header
   and the footer are all `surfaces/_shell/shell.css`. Nothing here redeclares
   any of them. What is here is the two things no other surface in the network
   has: a birth FORM, and a deduction laid out as claim-and-value rows.

   ── NOT ONE HARD-CODED COLOUR ──────────────────────────────────────────────
   Every colour below is a shell token or a color-mix() of one, which is what
   lets all four skins work without this file knowing they exist. Run the
   instrument before committing anything here — build.py runs it too, but a
   failing build is a slower way to learn the same thing:

       python3 surfaces/_shell/check_css.py

   ── QUALITY IS NEVER COLOUR ALONE ──────────────────────────────────────────
   A kuta that scored full and a kuta that scored nothing are marked by an edge
   rule AND by the printed "4 of 4" or "0 of 8" in the same line, because
   roughly one man in twelve cannot separate the green from the rose. Remove
   every colour from this page and it still says everything it says.

   ── WHERE THE `carries:` COMMENTS COME FROM ────────────────────────────────
   `I446`. check_css.py measures a foreground against the ground it is actually
   painted on, and it cannot infer that `.mt-say` sits inside `.mt-score.is-good`
   — no single rule names both. So the tinted block declares what it carries and
   the instrument composites each tone against each wash in all four palettes.
   Rename a class below and the check fails here rather than going quiet.

   THE THREE TINTED BLOCKS ARE THE ONLY ONES. The eight kuta cards deliberately
   keep the plain panel and take an edge rule instead — a page with eight
   washed cards on it is a page where the wash means nothing.               */


/* ── 1 · THE TWO FORMS ─────────────────────────────────────────────────────
   Side by side where there is room and stacked on a phone, which is where this
   page will mostly be read. They are <fieldset>s because that is what they
   are: two groups of controls with a legend each, and a screen reader
   announces the role before every field rather than leaving "date of birth"
   ambiguous between two people. */

.mt-forms{display:grid;gap:14px;margin:0 0 16px;}
@media (min-width:560px){ .mt-forms{grid-template-columns:1fr 1fr;} }

.mt-form{margin:0;padding:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);}
/* A <legend> is painted ON the fieldset's top border and holds exactly one
   line — a two-line legend puts its second line across the border and the
   border through the words, which is what the first render of this page did.
   So the role is the legend and the hint is a paragraph inside the box. */
.mt-legend{padding:0 6px;margin-left:-6px;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--moon-deep);font-weight:600;}
.mt-hint{font-size:var(--t-xs);line-height:1.5;color:var(--faint);margin:2px 0 0;}

.mt-l{display:block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  margin:14px 0 6px;}
.mt-l em{display:block;font-family:var(--sans);font-style:normal;
  text-transform:none;letter-spacing:0;font-size:var(--t-xs);
  color:var(--faint);margin-top:2px;}

/* 16px on the input is not a type choice. iOS Safari zooms the viewport on
   focus for anything under 16px and then does not zoom back out, which on a
   two-form page leaves the reader scrolled sideways inside a control they
   cannot see the end of. --t-md is 15px, so this one value is stated. */
.mt-i{width:100%;font-family:var(--sans);font-size:16px;line-height:1.3;
  padding:10px 12px;color:var(--text);background:var(--ink);
  border:1px solid var(--line2);border-radius:var(--radius);}
.mt-i::placeholder{color:var(--faint);}
.mt-i:focus-visible{outline:2px solid var(--moon-deep);outline-offset:1px;}
.mt-i:disabled{opacity:.45;}

.mt-check{display:flex;align-items:center;gap:8px;margin-top:9px;
  font-size:var(--t-sm);color:var(--muted);cursor:pointer;}
.mt-check input{width:16px;height:16px;accent-color:var(--moon-deep);}

.mt-place{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:left;cursor:pointer;font-family:var(--sans);
  padding:9px 12px;background:var(--ink);
  border:1px solid var(--line2);border-radius:var(--radius);color:var(--text);}
.mt-place:hover{border-color:var(--moon-deep);}
.mt-place-n{font-size:var(--t-md);font-weight:600;}
.mt-place-h{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.05em;
  color:var(--faint);}

.mt-pick{margin-top:8px;padding:12px;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--radius);}
.mt-pick[hidden]{display:none;}
.mt-hits{display:flex;flex-direction:column;gap:1px;margin-top:8px;}
.mt-hits:empty{display:none;}
.mt-hit{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  cursor:pointer;padding:9px 10px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--text);
  font-family:var(--sans);font-size:var(--t-sm);}
.mt-hit:hover{background:var(--panel);border-color:var(--line);}
.mt-hit b{font-weight:600;}
.mt-hit span{color:var(--muted);font-size:var(--t-xs);}
.mt-pick-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.mt-msg{font-size:var(--t-xs);color:var(--muted);margin:8px 0 0;}
.mt-msg:empty{margin:0;}

/* The action bar, and the sentence beside it. A disabled button that will not
   say what it is waiting for is the commonest bad form on the internet, so
   `.mt-why` names the missing field for each side by name. */
.mt-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 8px;}
.mt-why{font-size:var(--t-sm);color:var(--muted);margin:0;}
.mt-why:empty{display:none;}


/* ── 2 · THE DEDUCTION ROW ─────────────────────────────────────────────────
   The whole differentiator, in one primitive: a claim on the left in prose and
   the value it produced on the right in mono. Three of these per kuta — what
   the vara is, what the vadhu is, which cell that lands on — and the third row
   is always the one carrying the points.

   The value is `white-space:nowrap` and the claim wraps, because "2.0 of 2"
   broken across two lines stops looking like a number. */

.mt-rows{margin:12px 0 0;}
.mt-row{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--line);}
.mt-row-l{font-size:var(--t-sm);line-height:1.45;color:var(--muted);}
.mt-row-v{font-family:var(--mono);font-size:var(--t-xs);color:var(--text);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}


/* ── 3 · THE EIGHT CARDS ───────────────────────────────────────────────────
   An edge rule and nothing else. Full marks and nought are the two states
   worth marking, and both are already printed as words in the same line — see
   the header on why the colour is never the message. */

.mt-kuta{position:relative;overflow:hidden;}
.mt-kuta::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--line2);}
.mt-kuta.is-full::before{background:var(--green);}
.mt-kuta.is-zero::before{background:var(--rose);}

.mt-kuta-h{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin:0 0 8px;}
.mt-kuta-h b{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;
  color:var(--text);}
.mt-pts{font-family:var(--mono);font-size:var(--t-md);color:var(--text);
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.mt-pts em{font-style:normal;font-size:var(--t-xs);color:var(--faint);}
.mt-tests{font-size:var(--t-sm);line-height:1.5;color:var(--muted);margin:0;}
.mt-swapnote{margin-top:10px;}

.mt-sect{margin:26px 0 6px;}
.mt-sect-note{margin:0 0 14px;}


/* ── 4 · THE SCORE ─────────────────────────────────────────────────────────
   The one block on this page that is answering the question rather than
   showing the working, so it takes the wash. It is deliberately NOT the first
   thing in the result when a birth time is missing: the flag goes above it. */

.mt-score{position:relative;overflow:hidden;padding-left:20px;}
.mt-score::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--line2);}
.mt-score.is-good::before{background:var(--green);}
.mt-score.is-hard::before{background:var(--rose);}

/* Declared as nothing first: a browser that cannot parse color-mix() keeps the
   plain panel and the block still reads.

   THE EYEBROW IS LIFTED OFF --faint INSIDE ALL THREE WASHED BLOCKS, and the
   instrument is the reason: --faint on the green wash measures 4.48:1 in
   Midnight and in Abyss, which is a fail by two hundredths and would have
   shipped invisibly. It is also the right call on its own terms — in these
   three blocks the eyebrow carries the two names and the verdict word, which
   is content, while everywhere else on the page it is a label. Each is its own
   rule rather than a comma group, because check_css.py's rules() yields only
   the LAST selector of a group and the other two would go unmeasured. */
.mt-score .sh-eyebrow{color:var(--muted);}
.mt-flag .sh-eyebrow{color:var(--muted);}
.mt-mangal .sh-eyebrow{color:var(--muted);}

/* carries: .mt-score .sh-eyebrow, .mt-total b, .mt-total span, .mt-band, .mt-say, .sh-note */
.mt-score.is-good{background:var(--panel);
  background:color-mix(in srgb,var(--green) 7%,var(--panel));}
/* carries: .mt-score .sh-eyebrow, .mt-total b, .mt-total span, .mt-band, .mt-say, .sh-note */
.mt-score.is-hard{background:var(--panel);
  background:color-mix(in srgb,var(--rose) 7%,var(--panel));}

.mt-total{margin:6px 0 2px;display:flex;align-items:baseline;gap:8px;}
.mt-total b{font-family:var(--mono);font-size:var(--t-2xl);line-height:1;
  font-weight:600;color:var(--moon);font-variant-numeric:tabular-nums;}
.mt-total span{font-family:var(--mono);font-size:var(--t-md);color:var(--muted);}
.mt-band{font-family:var(--serif);font-size:var(--t-lg);color:var(--text);
  margin:0 0 10px;}

.mt-say{font-size:var(--t-sm);line-height:1.55;color:var(--text);margin:0 0 9px;}
.mt-say:last-child{margin-bottom:0;}
.mt-mono{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
  line-height:1.6;}


/* ── 5 · THE TWO CAUTION BLOCKS ────────────────────────────────────────────
   The unknown-birth-time flag and a one-sided Mangal dosha. Both are washed
   for the same reason the score is: they are conclusions, not workings. */

.mt-flag{position:relative;overflow:hidden;padding-left:20px;margin-bottom:14px;}
.mt-flag::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--amber);}
.mt-flag.is-hard::before{background:var(--rose);}

/* carries: .mt-flag .sh-eyebrow, .mt-say, .sh-note */
.mt-flag{background:var(--panel);
  background:color-mix(in srgb,var(--amber) 6%,var(--panel));}
/* carries: .mt-flag .sh-eyebrow, .mt-say, .sh-note */
.mt-flag.is-hard{background:var(--panel);
  background:color-mix(in srgb,var(--rose) 7%,var(--panel));}

.mt-mangal{position:relative;overflow:hidden;padding-left:20px;}
.mt-mangal::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--line2);}
.mt-mangal.is-hard::before{background:var(--amber);}
/* carries: .mt-mangal .sh-eyebrow, .mt-say, .sh-note */
.mt-mangal.is-hard{background:var(--panel);
  background:color-mix(in srgb,var(--amber) 6%,var(--panel));}

/* What the strict reading cost this pair, in points. It is the sentence that
   distinguishes a strict tool from an arbitrary one, so it is marked — and it
   is marked by a rule and a weight rather than by a colour on the text. */
.mt-cost{border-left:2px solid var(--amber);padding-left:11px;margin-top:12px;}


/* ── 6 · THE STATIC PAGES ──────────────────────────────────────────────────
   /kutas and /method are prose and compute nothing. What they need that the
   shell does not already give them is a definition list that stays readable at
   340 pixels — the eight kutas, and the conventions table. */

.mt-def{margin:12px 0 0;}
.mt-def > div{padding:11px 0;border-top:1px solid var(--line);}
.mt-def > div:first-child{border-top:0;padding-top:0;}
.mt-def dt{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;font-family:var(--serif);font-size:var(--t-md);font-weight:600;
  color:var(--text);}
.mt-def dt span{font-family:var(--mono);font-size:var(--t-xs);color:var(--faint);
  white-space:nowrap;}
.mt-def dd{margin:5px 0 0;font-size:var(--t-sm);line-height:1.55;
  color:var(--muted);}

.mt-quiet{font-size:var(--t-xs);line-height:1.7;color:var(--faint);
  margin:22px 0 0;}