/* ───────────────────────────────────────────────────────────────────────── 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
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 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;} /* ══ THE KIT, APPLIED — 2026-08-13 ═════════════════════════════════════════ Ether asked for a design revamp across Prahar, Overhead, Umbra and Yuti with uiverse deployed heavily on each. `kit.css` is the shared answer and it is linked ahead of this file on all three matching pages; this block is Yuti's own half. YUTI HAD THE WORST OF IT OF THE FOUR, and it is worth naming why rather than just fixing it. This page asks for two complete birth charts — eight controls before anything happens — and it asked for them with bare inputs, a native date picker and a mono label stacked above each one. It is the one surface in the network where a reader has to WORK before the product does anything, and it was the one with the least done for it. Every colour is a token or a color-mix() of one. Run `python3 surfaces/_shell/check_css.py` before committing. */ /* ── the two forms ───────────────────────────────────────────────────────── The lit hairline and the rise from kit.css. Written out rather than applied as `.uv-card`, because a
with a painted on its top border has to keep its own border shorthand — swapping to a transparent border and a two-layer background is what makes the legend's notch work, so the recipe goes here where the legend rule can be seen next to it. */ .mt-form{box-shadow:var(--rise-1),var(--edge-lit); border-color:transparent; background: linear-gradient(var(--panel),var(--panel)) padding-box, var(--edge-grad) border-box;} /* ── the eight controls ──────────────────────────────────────────────────── `.uv-field`'s focus treatment, and the recessed well that says a field is something you type INTO. The 16px on `.mt-i` is untouched and stays where it is: it is the iOS zoom fix, it is not a type choice, and the comment above it says so. THE FOCUS RING REPLACES AN `outline` WITH ONE THAT DOES NOT CLIP. The old `:focus-visible{outline:2px solid var(--moon-deep);outline-offset:1px}` is correct and invisible at the top of a `.mt-pick` panel, where the parent's own border sits a pixel away from it. A 3px wash outside the border reads at any offset and against any neighbour, and it is the same wash Prahar's city search and every `.uv-field` on the network use — so a tab key looks the same everywhere. */ .mt-i{outline:none; box-shadow:inset 0 1px 3px rgb(0 0 0 / .22); transition:border-color var(--dur-move) var(--ease-out), box-shadow var(--dur-move) var(--ease-out);} .mt-i:focus,.mt-i:focus-visible{ outline:none; border-color:var(--moon-deep); box-shadow:inset 0 1px 3px rgb(0 0 0 / .22), 0 0 0 3px color-mix(in srgb,var(--moon) 18%,transparent);} /* The place button is the one control here that is a button pretending to be a field, so it takes the field's well and the button's press. */ .mt-place{box-shadow:inset 0 1px 3px rgb(0 0 0 / .22); transition:border-color var(--dur-move) var(--ease-out), box-shadow var(--dur-move) var(--ease-out), transform var(--dur-tap) var(--ease-press);} .mt-place:active{transform:translateY(1px);} .mt-place:focus-visible{outline:2px solid var(--moon);outline-offset:3px;} /* ── the eight kuta cards ────────────────────────────────────────────────── The rail is new markup in matching.js and its own comment there explains why. What is here is only its placement: hard against the header line it belongs to, and clear of the prose below. `.mt-kuta` SETS `overflow:hidden` FOR ITS 3px EDGE, which means the rail's glowing head is clipped at the right-hand end when a kuta scores full marks — the cap would be half outside the card. That is what `.uv-rail--done` exists for and matching.js sets it at exactly 100%: full marks has no leading edge, because nothing is still moving. */ .mt-kuta-rail{margin:0 0 10px;} /* The hover line, from `.uv-draw` — one edge, drawn from the left. Eight cards in a column, and a shadow on hover would make the column twitch as the pointer crosses it. kit.css records the argument at length; this is the same three declarations against a class that already exists. https://uiverse.io/xopc333/soft-shrimp-30 (MIT) IT IS `::after` BECAUSE `::before` IS THE VERDICT EDGE and that edge is the card's one colour signal. */ .mt-kuta::after{content:"";position:absolute;inset:0 0 auto 0;height:1px; background:var(--moon);opacity:0;transform:scaleX(0); transform-origin:left center;pointer-events:none; transition:transform var(--dur-sweep) var(--ease-out), opacity var(--dur-move) var(--ease-out);} .mt-kuta:hover::after{transform:scaleX(1);opacity:.55;} /* ── the score ───────────────────────────────────────────────────────────── The one block on the page that answers the question, so it gets the lift Prahar's status block gets and for the same reason. The wash is untouched: those two rules are annotated and measured across four palettes, and folding anything into them would take the guard's eyes off the page's most careful colour decision. THE TOTAL IS LIT. `.mt-total b` is the 36-point number set at `--t-2xl` in `--moon`, and a text-shadow in its own tone is the cheapest way to say "this is the answer" — no layout, no second element, and it degrades to a plain number rather than to nothing. Same treatment as Umbra's magnitude, so the two surfaces' headline numbers read as one idea. NOT `background-clip:text`, for the reason eclipse.css gives: it needs the `-webkit-` form on iOS and a gradient numeral that falls back to transparent is a page with no answer on it. */ .mt-score{box-shadow:var(--rise-2),var(--edge-lit);} .mt-total b{text-shadow:0 0 22px color-mix(in srgb,var(--moon) 34%,transparent);} :root[data-skin="7"] .mt-total b{text-shadow:none;} /* The result arrives when the button is pressed — it is not on the page at load. `.uv-in` plays once as it is inserted. It is applied to the score block only, and not to the eight cards below it: a stagger down a column of eight is a page that takes a second to settle, which kit.css's own comment caps at four for the same reason. */ .mt-score{animation:uv-rise var(--dur-enter) var(--ease-out) both;} @media (prefers-reduced-motion:reduce){ .mt-score{animation:none;} }