/* MC-KOS public layer — mobile-first (matches approved Sprint-0 mockups) */ .mckos-card{background:#fff;border:1px solid #E2ECEA;border-radius:12px;padding:14px;margin:0 0 12px} .mckos-card a{text-decoration:none;color:#0A5C5B;font-size:16px} .mckos-n{display:block;color:#5B7470;font-size:12.5px;margin-top:4px} .mckos-note{background:#F2F7F6;border-radius:10px;padding:12px 14px;color:#3E5753;font-size:14px;margin:12px 0} .mckos-note.mckos-soon{background:#FEF5E7;color:#9C640C} .mckos-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0} .mckos-table th{background:#EAF4F3;color:#0A5C5B;text-align:left;padding:8px 6px;font-size:13px;text-transform:uppercase;letter-spacing:.4px} .mckos-table td{padding:9px 6px;border-bottom:1px solid #E2ECEA} .mckos-table td a{color:#0A5C5B;text-decoration:none;font-weight:600} .mckos-ev{color:#0A5C5B;text-decoration:none;font-weight:700;font-size:12.5px;white-space:nowrap} .mckos-warn{color:#B9770E;cursor:help} /* .mckos-search is the old one-input search box and is still a flex row. .mckos-filters is NOT: it was given this rule when it too was a single row of inputs, and kept it after it became a padded panel holding a grid. As a flex container it sized its grid child by CONTENT, so on /colleges/ the five-control row resolved to 510px inside a 1060px form and wrapped onto three lines. The Cutoff Explorer hid the same fault by arithmetic — its four 250px columns happen to add up to the width they would have had anyway — which is why this survived until a page with five controls met it (4 Aug 2026). */ .mckos-search{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px} .mckos-filters{margin:0 0 14px} .mckos-search input{flex:1 1 120px;padding:11px;border:1.5px solid #C9D8D5;border-radius:9px;font-size:15px;min-width:0} .mckos-btn{background:#0E7C7B;color:#fff;border:none;border-radius:9px;padding:11px 18px;font-size:15px;font-weight:700;cursor:pointer} .mckos-trust{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0} .mckos-trust-card{background:#fff;border:1px solid #E2ECEA;border-radius:12px;padding:12px 14px} .mckos-trust-card b{display:block;color:#13343B;font-size:15px;margin-bottom:3px} .mckos-trust-card span{color:#5B7470;font-size:13px} .mckos-college-name{font-size:20px;color:#13343B;margin:4px 0 2px} .mckos-pager{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;font-size:14px} .mckos-pager a{color:#0A5C5B;text-decoration:none;padding:4px 9px;border:1px solid #E2ECEA;border-radius:7px} .mckos-pager b{padding:4px 9px;background:#0E7C7B;color:#fff;border-radius:7px} @media(min-width:600px){.mckos-trust{grid-template-columns:1fr 1fr}} /* Build 3: hero, lifecycle stages, rule chips, link-buttons */ .mckos-hero{background:linear-gradient(135deg,#0E7C7B,#0A5C5B);border-radius:14px;padding:24px 18px;color:#fff;margin-bottom:14px} .mckos-hero h1{font-size:27px;line-height:1.25;margin:0 0 8px;color:#fff} .mckos-hero h1 span{color:#FFD98A} .mckos-hero p{color:#E8F4F3;font-size:15px;margin:0 0 12px} .mckos-hero .mckos-note{background:rgba(255,255,255,.14);color:#fff} .mckos-hero-actions{display:flex;gap:10px;margin-top:12px} .mckos-btn-link{display:inline-block;text-align:center;background:#F4A300;color:#3B2A00;text-decoration:none;font-weight:700;font-size:15px;padding:12px 18px;border-radius:9px;flex:1} .mckos-btn-link.sec{background:#fff;color:#0A5C5B} .mckos-btn-link.mckos-wa{background:#25D366;color:#fff;display:block;margin:10px 0} .mckos-h2{font-size:18px;color:#13343B;margin:20px 0 10px} .mckos-lead{font-size:15px;color:#3E5753} .mckos-stages{margin:8px 0} .mckos-stage{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed #E2ECEA} .mckos-stage i{flex:0 0 28px;height:28px;border-radius:50%;background:#0E7C7B;color:#fff;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px} .mckos-stage b{font-size:15px;color:#13343B} .mckos-stage p{margin:2px 0 0;font-size:13px;color:#5B7470} .mckos-chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:10px;padding:2px 9px;margin:0 6px 4px 0} .mckos-chip.rule{background:#E8F1FB;color:#1A5276;border:1px solid #AED6F1} .mckos-chip.practice{background:#FEF5E7;color:#9C640C;border:1px solid #F8C471} .mckos-chip.blocker{background:#FDEDEC;color:#C0392B} .mckos-chip.warn{background:#FEF9E7;color:#B9770E} .mckos-chip.info{background:#EAFAF1;color:#1E8449} /* Build 4: checklist, sequence, season badge */ .mckos-check{margin:6px 0 0 2px;padding:0;list-style:none} .mckos-check li{padding:7px 0 7px 30px;border-bottom:1px dashed #E2ECEA;position:relative;font-size:14px} .mckos-check li:before{content:"☐";position:absolute;left:4px;color:#0E7C7B;font-size:16px} .mckos-seq{margin:8px 0 0 18px;padding:0} .mckos-seq li{padding:5px 0;font-size:14px} .mckos-chip.season{background:#F2F7F6;color:#3E5753;border:1px dashed #A9C6C2} /* Build 5: workspace accordion, ticklists, progress bar */ .mckos-ws{background:#fff;border:1px solid #E2ECEA;border-radius:12px;margin:0 0 10px;overflow:hidden} .mckos-ws summary{display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;list-style:none;font-size:15.5px} .mckos-ws summary::-webkit-details-marker{display:none} .mckos-ws summary i{flex:0 0 26px;height:26px;border-radius:50%;background:#0E7C7B;color:#fff;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:12.5px} .mckos-ws[open] summary{border-bottom:1px solid #E2ECEA;background:#F2F7F6} .mckos-ws-tag{display:block;flex-basis:100%;margin-left:36px;font-size:12px;color:#5B7470;font-weight:400} .mckos-ws summary{flex-wrap:wrap} .mckos-ws-body{padding:6px 14px 14px} .mckos-ws-body h4{font-size:13.5px;color:#0A5C5B;margin:14px 0 6px;text-transform:none} .mckos-ticks{list-style:none;margin:0;padding:0} .mckos-ticks li{padding:6px 0;border-bottom:1px dashed #EDF3F2;font-size:14px} .mckos-ticks label{display:flex;gap:10px;align-items:flex-start;cursor:pointer} .mckos-ticks input{width:18px;height:18px;margin-top:1px;accent-color:#0E7C7B;flex:0 0 auto} .mckos-ticks span.done{text-decoration:line-through;color:#93A8A4} .mckos-plain{margin:4px 0 0 18px;padding:0;font-size:13.5px;color:#3E5753} .mckos-plain li{padding:3px 0} .mckos-real{font-size:13.5px;color:#3E5753;background:#F7FAF9;border-left:4px solid #F4A300;border-radius:6px;padding:9px 11px;margin:4px 0} .mckos-card.slim{padding:10px 12px;font-size:13.5px;margin:8px 0} .mckos-progress{margin:10px 0 14px} .mckos-progress-bar{height:10px;background:#E2ECEA;border-radius:6px;overflow:hidden} .mckos-progress-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0E7C7B,#1E8449);transition:width .3s} .mckos-progress span{font-size:12.5px;color:#3E5753;display:block;margin-top:5px;font-weight:600} /* Build 6: readiness chips, guided nav, recovery workflow, trust meta */ .mckos-ready{font-size:11px;font-weight:700;border-radius:10px;padding:2px 8px;margin-left:auto} .mckos-ready.ok{background:#EAFAF1;color:#1E8449} .mckos-ready.mid{background:#FEF9E7;color:#B9770E} .mckos-ready.low{background:#F2F7F6;color:#5B7470} .mckos-next{display:block;text-align:center;background:#0E7C7B;color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;padding:12px;border-radius:9px;margin-top:14px} .mckos-next.done{background:#1E8449} .mckos-rec-list{margin:4px 0} .mckos-rec{background:#FDFBF7;border:1px solid #F0E6D6;border-radius:9px;margin:0 0 8px} .mckos-rec summary{padding:10px 12px;cursor:pointer;font-size:13.5px;font-weight:600;color:#7B4A12;list-style:none} .mckos-rec summary::-webkit-details-marker{display:none} .mckos-rec-body{padding:2px 12px 10px} .mckos-fix{display:inline-block;font-size:11.5px;font-weight:700;border-radius:9px;padding:3px 9px;margin:4px 0 8px} .mckos-fix.sd{background:#EAFAF1;color:#1E8449} .mckos-fix.dy{background:#FEF9E7;color:#B9770E} .mckos-fix.ak{background:#E8F1FB;color:#1A5276} .mckos-meta{display:block;font-size:10.5px;color:#93A8A4;margin-top:6px;border-top:1px dashed #EDF3F2;padding-top:5px} /* Step 1: two-journey homepage hero + Find My Chances entry */ /* Three cards: FMC spans the full width because it carries a form — at a third of the row its input and button would be squeezed. MCC and RAJ share the row beneath. Below 600px all three stack (rule further down). */ .mckos-journeys{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0;align-items:stretch} .mckos-journey--fmc{flex:1 1 100%} .mckos-journey{flex:1 1 0;display:flex;flex-direction:column;background:#fff;border:1.5px solid #C9D8D5;border-radius:14px;padding:18px} .mckos-journey--fmc{border-color:#0E7C7B;box-shadow:0 2px 12px rgba(14,124,123,.10)} .mckos-journey--mcc{border-color:#B9CBD8} .mckos-journey__tag{font-size:13px;font-weight:700;color:#0A5C5B;margin-bottom:6px} .mckos-journey h2{font-size:20px;line-height:1.25;margin:0 0 6px;color:#0A2F2E} .mckos-journey p{font-size:14px;color:#39514F;margin:0 0 12px} .mckos-fmc-start{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .mckos-fmc-start input{flex:1 1 130px;min-width:0;padding:12px;border:1.5px solid #C9D8D5;border-radius:9px;font-size:16px} .mckos-fmc-start input:focus{outline:none;border-color:#0E7C7B;box-shadow:0 0 0 3px rgba(14,124,123,.15)} .mckos-btn--outline{margin-top:auto;background:#fff;color:#0A5C5B;border:1.5px solid #0E7C7B;display:inline-block;text-align:center;text-decoration:none;border-radius:9px;padding:12px 18px;font-size:15px;font-weight:700} .mckos-fmc-page{max-width:640px} .mckos-fmc-air-line{font-size:16px;margin:0 0 12px} .mckos-fmc-transition{background:#F2F7F6;border:1px solid #D9E6E4;border-radius:12px;padding:16px 18px;margin:12px 0} .mckos-fmc-transition p{margin:0 0 8px} .mckos-fmc-transition p:last-child{margin-bottom:0} .mckos-fmc-continue{margin-top:14px} /* Rajasthan portal landing (structure only) */ .mckos-raj-hero{background:linear-gradient(135deg,#0E7C7B,#0A5C5B);border-radius:14px;padding:24px 18px;color:#fff;margin-bottom:14px} .mckos-raj-hero h1{font-size:26px;line-height:1.25;margin:0 0 8px;color:#fff} .mckos-raj-hero p{color:#E8F4F3;font-size:15px;margin:0} .mckos-raj-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0} .mckos-raj-card{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #C9D8D5;border-radius:12px;padding:12px 14px;text-decoration:none;color:#0A2F2E} a.mckos-raj-card:hover{border-color:#0E7C7B;box-shadow:0 2px 10px rgba(14,124,123,.12)} .mckos-raj-card i{flex:0 0 auto;font-style:normal;font-weight:700;font-size:13px;color:#fff;background:#0E7C7B;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center} .mckos-raj-card.is-soon i{background:#93A8A4} .mckos-raj-card b{flex:1 1 auto;font-size:14.5px;line-height:1.3} .mckos-raj-card.is-soon{color:#5B7470;background:#F7FAF9} .mckos-raj-chip{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#0A5C5B;background:#E6F2F1;border-radius:9px;padding:3px 9px} .mckos-raj-chip.soon{color:#5B7470;background:#EDF3F2} /* Sprint 1: Find My Chances prediction form + results */ .mckos-fmc-form{display:grid;grid-template-columns:1fr;gap:12px;max-width:520px;margin:12px 0} /* `1fr` ka asli matlab `minmax(auto,1fr)` hai, aur wo `auto` min-content hai — yaani track apne sabse chaude bachche jitna ho jaata hai, container se bada bhi. Course select ka sabse lamba option ("MBBS — Bachelor of Medicine and Bachelor of Surgery") min-content 442px banata hai, to 343px ke form ka column 441.5px ho jaata tha aur page 375px par 82px bahar nikalta tha. min-width:0 track ko sikudne deta hai. Ye ek line result page ko bhi theek karti hai — form wahan bhi hai. Naapa: scrollWidth 457 -> 375. */ .mckos-fmc-form>*{min-width:0} .mckos-fmc-form [hidden]{display:none} .mckos-fmc-field{display:flex;flex-direction:column;gap:4px;font-size:14px} .mckos-fmc-field span{font-weight:600;color:#0A2F2E} .mckos-fmc-field select,.mckos-fmc-field input{padding:10px;border:1.5px solid #C9D8D5;border-radius:9px;font-size:16px} .mckos-fmc-why{display:block;font-size:12px;color:#4A6462;line-height:1.5;margin-top:3px} .mckos-fmc-why:empty{display:none} .mckos-fmc-why.is-bad{color:#8A5A00} .mckos-fmc-field select option:disabled{color:#9AAFAC} .mckos-fmc-check{font-size:14px;display:flex;align-items:center;gap:6px} .mckos-fmc-results{margin-top:18px} /* Compact row. Naapa gaya (375px, asli page par prototype daal kar): purane card 181/208/263px -> ab 63/66/76px, aur 400 rows ka page 83,000px -> 26,500px, yaani 114 screen se 33. Kuch chhupa nahi -- sab kuch ek tap peeche hai. Poora row hi hai, isliye tap target design se hi 44px+ ho jaata hai. */ .mckos-elig{border-left:4px solid #C8A415;background:#FDF9EC} .mckos-elig p{margin:4px 0;font-size:13px;line-height:1.55} .mckos-elig__src{font-size:13px;color:#4A6462} .mckos-elig__cons{border-top:1px solid #EFE3C0;padding-top:6px;margin-top:8px} /* JHANDA AB EK LINK HAI (22 Aug 2026) -- neeche usi quota ke note par le jaata hai, bina JS. Rang aur underline hataye gaye taaki wo table me nishaan hi lage, link jaisa na dikhe -- par wo focus par saaf dikhta hai, kyunki keyboard se chalne wale ko pata hona chahiye ki wo kahan hai. */ .mckos-elig__flag{margin-left:3px;text-decoration:none;color:#C8A415;border:0} .mckos-elig__flag:hover,.mckos-elig__flag:focus{text-decoration:none;color:#8A6F00} .mckos-elig__flag:focus-visible{outline:2px solid #1e4d43;outline-offset:2px;border-radius:2px} .mckos-elig__legend{font-size:12.5px;color:#4A6462;line-height:1.55;margin:10px 0 0; border-left:4px solid #C8A415;background:#FDF9EC;padding:8px 12px;border-radius:2px} .mckos-elig__legend-head{margin:0 0 6px;font-weight:600;color:#3A4F4C} .mckos-elig__item{margin:0 0 8px} /* Anchor par pahunchne par wo panktee thodi neeche rahe, header ke neeche chhup na jaaye. */ .mckos-elig__item:target{scroll-margin-top:80px;background:#F6EDD2;border-radius:2px} .mckos-elig__natija{border-top:1px solid #EFE3C0;padding-top:8px;margin:10px 0 0} .mckos-whatnext ul{margin:6px 0 0;padding:0;list-style:none} .mckos-whatnext li{padding:8px 0;border-top:1px solid #EDF3F2;font-size:13px;line-height:1.55} .mckos-whatnext li:first-child{border-top:0} .mckos-whatnext small{color:#4A6462;font-size:11.5px;display:block;margin-top:3px} .mckos-whatnext a{min-height:44px;display:inline-flex;align-items:center} /* Summary — sirf NAVIGATION. Saare band khule rehte hain. Naapa (375px, deployed page par): 6 line × 46px = 278px, yaani 812px screen ka 34%. Isi liye ye STICKY NAHI hai — 46-screen page par ek tihai screen sthayi roop se chali jaati, aur theek tab jab student list padh raha hota. Compact layout jaan-boojh kar: khule layout me wahi 278px me sirf 4 line aati thin (69px/line); ek line par sab rakhne se 6 aa jaati hain. */ .mckos-fmc-summary{border:1px solid #C9D8D5;border-radius:10px;margin:10px 0 14px;overflow:hidden} .mckos-fmc-summary>a,.mckos-fmc-summary__far{display:flex;align-items:center;gap:6px;padding:0 11px;min-height:46px;border-bottom:1px solid #EDF3F2} .mckos-fmc-summary>a{text-decoration:none;color:inherit} .mckos-fmc-summary>:last-child{border-bottom:0} .mckos-fmc-summary__nm{font-size:13px;font-weight:650;color:#0A2F2E;flex:1 1 auto;line-height:1.25} .mckos-fmc-summary__ct{font-size:13.5px;font-weight:700;color:#0A2F2E} .mckos-fmc-summary__rg{font-size:11.5px;color:#4A6462;white-space:nowrap} /* "दूर" — link nahi, kyunki iske paas jaane ko kuch hai hi nahi. */ .mckos-fmc-summary__far .mckos-fmc-summary__nm,.mckos-fmc-summary__far .mckos-fmc-summary__ct{font-weight:500;color:#4A6462} /* Jhalak — SIRF heading par, poore band par nahi, warna list padhne me khalal. :target se, koi JS nahi. Animation hai transition nahi, isliye ek baar chal kar ruk jaati hai chahe hash bana rahe. */ .mckos-tier{scroll-margin-top:8px} .mckos-tier:target{animation:mckos-flash 1.4s ease-out 1} @keyframes mckos-flash{from{background:#D8ECEA}to{background:transparent}} @media (prefers-reduced-motion:reduce){.mckos-tier:target{animation:none}} .mckos-fmc-cost{font-size:13px;color:#4A6462;margin:8px 0 0} .mckos-fmc-order{font-size:13px;color:#0A2F2E;background:#EDF3F2;border-radius:9px;padding:8px 10px;margin:8px 0 4px} .mckos-tier{font-size:16px;margin:20px 0 2px;padding-bottom:4px;border-bottom:2px solid #EDF3F2} .mckos-tier span{font-weight:400;color:#4A6462} .mckos-tier__win{font-size:13px;font-weight:700;color:#0A2F2E;margin:4px 0 0} .mckos-tier__why{font-size:13px;color:#4A6462;margin:2px 0 6px;line-height:1.5} .mckos-pred-row{border-top:1px solid #E3EBEA;padding:9px 0} .mckos-pred-row>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:3px} .mckos-pred-row>summary::-webkit-details-marker{display:none} .mckos-pred-row>summary b{font-weight:650;font-size:14px;line-height:1.35} .mckos-pred-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:#4A6462} .mckos-pred-cr{font-weight:700;color:#0A2F2E} .mckos-pred-src{font-size:13px;border:1px solid #C9D8D5;border-radius:6px;padding:0 6px;white-space:nowrap} .mckos-pred-more{font-size:13px;color:#4A6462;padding:6px 0 2px;line-height:1.6} .mckos-tier{font-size:18px;margin:18px 0 8px;padding-bottom:4px;border-bottom:2px solid #EDF3F2} .mckos-tier span{color:#5B7470;font-size:14px;font-weight:600} .mckos-tier-ok{color:#1E8449} .mckos-tier-mid{color:#B9770E} .mckos-tier-low{color:#B23A48} .mckos-pred-row{margin:0 0 8px} .mckos-pred-meta{font-size:12.5px;color:#5B7470;margin-top:3px} .mckos-pred-explain{font-size:13.5px;color:#33403E;margin-top:4px} .mckos-muted{color:#93A8A4} .mckos-disclaimer{font-size:12px;color:#7B8C89;margin-top:18px;border-top:1px dashed #EDF3F2;padding-top:8px} @media(min-width:600px){.mckos-raj-grid{grid-template-columns:1fr 1fr}} @media(min-width:900px){.mckos-raj-grid{grid-template-columns:1fr 1fr 1fr}} .mckos-season-chip{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.3px;color:#0A5C5B;background:#FFD98A;border-radius:9px;padding:4px 12px;margin-bottom:10px} .mckos-qa-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0;align-items:stretch} .mckos-qa-card{display:flex;align-items:center;gap:10px;height:100%;background:#fff;border:1.5px solid #0E7C7B;border-radius:12px;padding:14px;text-decoration:none;color:#0A2F2E;font-size:14.5px} .mckos-qa-card:hover{box-shadow:0 2px 12px rgba(14,124,123,.15)} .mckos-qa-ico{flex:0 0 auto;font-size:20px} .mckos-qa-card b{flex:1 1 auto;line-height:1.3} .mckos-qa-go{flex:0 0 auto;font-weight:700;color:#0E7C7B} @media(min-width:600px){.mckos-qa-grid{grid-template-columns:1fr 1fr}} @media(min-width:900px){.mckos-qa-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:600px){.mckos-journeys{flex-direction:column}.mckos-fmc-start{flex-direction:column}.mckos-fmc-start input,.mckos-fmc-start .mckos-btn{width:100%}} /* --- Homepage proof line (numbers under the hero) ------------------------- Mobile first: the three counts stack, so the "·" separators are hidden and each count reads on its own line. From 480px they sit in a row with the separators back. The separators are in the MARKUP (aria-hidden), so the line still reads correctly if this stylesheet never loads. */ /* 6 Aug 2026: 375px par bhi EK LINE, teen panktee nahi. Naapa: pehle teeno item POORI chaudai le rahe the (313px har ek) aur dabba 155px ka tha. Poora vaakya sirf 276px maangta hai aur 343px maujood hai -- yaani jagah hamesha thi, layout use de nahi raha tha. Ab number OOPER aur shabd NEECHE, har item ek teesra hissa: ~48px. `flex-wrap:wrap` isliye ki `__src` apni poori panktee le sake. Separator markup me hain (aria-hidden) taaki ye stylesheet na chale to bhi line "682 colleges · 10,015 cutoffs" ki tarah padhi jaaye; is roop me wo dikhte nahi, kyunki jagah khud alag kar deti hai. */ .mckos-proof{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin:0 0 16px; padding:12px 14px;text-align:center;align-items:flex-start; background:#F2F7F6;border:1px solid #E2ECEA;border-radius:12px;font-size:14px;color:#3E5753} .mckos-proof__item{flex:1 1 0;min-width:0;display:block;font-size:13px;line-height:1.3;color:#3E5753} .mckos-proof__item b{display:block;font-size:20px;line-height:1.15;font-weight:700;color:#0E7C7B} .mckos-proof__sep{display:none} .mckos-proof__src{flex:0 0 100%;text-align:center;margin-top:6px;font-size:13px;color:#5B7470} /* --- Trust card: founder-sourced claim ------------------------------------ One card states the founder's own experience rather than something the data can prove. It stays — it is the strongest thing on the page — but it is marked so a reader can tell the two kinds of claim apart (D-58). Warm tint + tag, deliberately not a warning colour: this is provenance, not a caveat. */ .mckos-trust-card--founder{background:#FFFBF3;border-color:#F0DFC0} .mckos-trust-card__tag{display:inline-block;margin-bottom:6px;padding:2px 8px;border-radius:999px; background:#F6E7CB;color:#8A6420;font-size:11px;font-weight:600;letter-spacing:.02em} /* --- College names: soften the ALL-CAPS entries --------------------------- Official PDFs print institute names inconsistently — some Title Case, some ALL CAPS — and the DB keeps them EXACTLY as published (D2, D-8: display is Layer 3, the master name is never rewritten). small-caps only changes how the existing letters are DRAWN. No text is transformed, so AIIMS / ESIC / RUHS / JIPMER stay intact — a Title-Case transform would have turned them into Aiims / Esic / Ruhs / Jipmer, which is worse than the inconsistency it set out to fix. */ .mckos-card a b, .mckos-card > b{font-variant-caps:all-small-caps;letter-spacing:.01em} /* --- Season alert (rule changes) ----------------------------------------- Amber, not red: this is "read this before you act", not an emergency. The year sits in the heading so a stale box is obvious at a glance. */ .mckos-alert{background:#FEF8EC;border:1.5px solid #F0D9A8;border-left-width:5px;border-radius:12px; padding:14px 16px;margin:0 0 16px} .mckos-alert__head{font-size:16px;font-weight:700;color:#8A5A10;margin-bottom:4px} .mckos-alert__year{display:inline-block;background:#8A5A10;color:#fff;font-size:12px;font-weight:700; padding:1px 7px;border-radius:999px;vertical-align:2px;margin-right:4px} .mckos-alert__lede{font-size:14px;color:#6B4A17;margin:0 0 10px} .mckos-alert ul{margin:0 0 12px;padding-left:20px} .mckos-alert li{font-size:14px;color:#3E3117;margin:0 0 5px} .mckos-alert__point{background:#fff;border:1px solid #F0E2C6;border-radius:10px;padding:11px 13px;margin:0 0 9px} .mckos-alert__point b{display:block;color:#13343B;font-size:15px;margin-bottom:3px} .mckos-alert__point span{display:block;color:#4A5E5B;font-size:14px;line-height:1.55} .mckos-alert__cite{display:inline-block;margin-top:6px;font-style:normal;font-size:12px;color:#8A6420; background:#F6E7CB;border-radius:999px;padding:1px 8px} .mckos-alert__src{font-size:12px;color:#8A6420;margin-top:8px} /* "See all colleges" — a quiet onward link, not a third call to action. */ .mckos-allcolleges{margin:14px 0 0;text-align:center} .mckos-allcolleges a{color:#0A5C5B;font-size:15px;font-weight:600;text-decoration:none} .mckos-allcolleges a:hover{text-decoration:underline} /* --- Journey cards: keep the CTA on the floor ----------------------------- The three cards stretch to a common height, but they do not carry the same amount of content: FMC has an input and two buttons, MCC and RAJ have one button each. Without this the shorter cards leave their gap UNDER the button, which reads as unfinished. margin-top:auto on the last child pushes it down so the slack sits above it instead, and the three CTAs line up. */ .mckos-journey > :last-child{margin-top:auto} /* The badge shown in place of a disabled CTA has to sit there too. */ .mckos-journey > .mckos-note:last-child{margin-bottom:0} /* --- Season Clock --------------------------------------------------------- Each stage is a row: name · dates · note · where-we-are · source. The left border carries the state, so a glance down the page shows what is past, what is live and what is still coming. */ .mckos-round{background:#fff;border:1px solid #E2ECEA;border-radius:12px;padding:4px 0 6px;margin:0 0 16px;overflow:hidden} .mckos-round__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:11px 14px;background:#F2F7F6;border-bottom:1px solid #E2ECEA;margin-bottom:4px} .mckos-round__head b{font-size:16px;color:#0A2F2E} .mckos-round__head span{font-size:13px;color:#5B7470} .mckos-stage{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 14px;border-left:4px solid transparent} .mckos-stage__name{font-weight:600;color:#13343B;font-size:15px} .mckos-stage__when{grid-column:1;color:#3E5753;font-size:14px} .mckos-stage__note{grid-column:1;color:#5B7470;font-size:12.5px} .mckos-stage__state{grid-column:2;grid-row:1;font-size:12px;font-weight:600;color:#5B7470;white-space:nowrap} .mckos-stage__src{grid-column:2;font-size:11px;color:#9FBAB6;white-space:nowrap} .mckos-stage--past{border-left-color:#D5E0DE;opacity:.55} .mckos-stage--upcoming{border-left-color:#C9D8D5} .mckos-stage--active{border-left-color:#0E7C7B;background:#F4FAF9} .mckos-stage--active .mckos-stage__state{color:#0E7C7B} .mckos-stage--today{border-left-color:#C0392B;background:#FDF3F2} .mckos-stage--today .mckos-stage__state{color:#C0392B} .mckos-stage--today .mckos-stage__name::after{content:" ⚠";color:#C0392B} /* The cut-off time. A MORNING deadline is the one people get wrong — MCC closes choice filling at 11:00 AM in R1/R3 but 11:00 PM in R2/Stray — so morning times are marked, not just bolded. */ .mckos-time{background:#F2F7F6;border-radius:6px;padding:1px 7px;font-size:13px;color:#0A5C5B;white-space:nowrap} .mckos-time--morning{background:#FDF0E3;color:#A15C10;font-weight:700} .mckos-time--morning::before{content:"☀ "} .mckos-session{font-size:14px;color:#3E5753;margin:0 0 18px} .mckos-session i{font-style:normal;font-size:11px;color:#9FBAB6} .mckos-srcline{font-size:12px;color:#8A9C99;margin-top:14px} /* State-counselling window — DELIBERATELY a different colour from everything above it. This is MCC instructing the states, not a state's own schedule, and the whole risk is that someone reads it as Rajasthan's dates. */ .mckos-statewin{background:#F5F3FB;border:1.5px solid #D8D0EC;border-left-width:5px;border-radius:12px;padding:14px 16px;margin:18px 0} .mckos-statewin__head{font-size:15px;font-weight:700;color:#4B3E7A;margin-bottom:5px} .mckos-statewin p{font-size:13.5px;color:#514674;margin:0 0 10px} .mckos-statewin__t{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border-radius:8px;overflow:hidden} .mckos-statewin__t th{background:#EDE8F7;color:#4B3E7A;text-align:left;padding:7px 9px;font-size:12px} .mckos-statewin__t td{padding:7px 9px;border-top:1px solid #EDE8F7;color:#3E3557} .mckos-statewin__src{font-size:11px;color:#8A7FB0;margin-top:8px} @media(max-width:600px){ .mckos-stage{grid-template-columns:1fr} .mckos-stage__state{grid-column:1;grid-row:auto} .mckos-stage__src{grid-column:1} } /* --- Header, navigation and footer live in chrome.css --------------------- Those rules dress the site frame, which every page has — including pages with no shortcode on them. This file only loads where a shortcode asked for it, so keeping them here left /about/ and the legal pages with the bilingual nav markup and none of its styling, and would have left the logo with no size at all. Moved out on 4 Aug 2026; see chrome.css. */ /* --------------------------------------------------------------------------- TOOLS STRIP (homepage: under the journey cards, above the trust section) Rows, not cards. The journey cards above ask the visitor to choose a path; giving these the same visual weight would turn one decision into five. A row reads as "a link I can take later", which is what they are. Mobile is the base case here and desktop is the override: on a phone these stack full-width and stay tappable (the whole row is the target, ~64px tall), and only at 640px do they sit side by side. --------------------------------------------------------------------------- */ .mckos-tools{display:grid;gap:10px;margin:22px 0 30px} @media (min-width:640px){.mckos-tools{grid-template-columns:1fr 1fr;gap:12px}} .mckos-tool{display:flex;align-items:center;gap:12px; padding:14px 16px;border:1px solid #e3e6ea;border-radius:10px; background:#fff;text-decoration:none;color:inherit; transition:border-color .15s,box-shadow .15s,transform .15s} .mckos-tool:hover,.mckos-tool:focus-visible{border-color:#1f4e79; box-shadow:0 2px 10px rgba(31,78,121,.10);transform:translateY(-1px)} .mckos-tool:focus-visible{outline:2px solid #1f4e79;outline-offset:2px} .mckos-tool__icon{font-size:20px;line-height:1;flex:0 0 auto} .mckos-tool__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto} .mckos-tool__text b{font-size:15px;font-weight:600;line-height:1.25} .mckos-tool__sub{font-size:12.5px;color:#5c6670;line-height:1.35} /* The live line. It is the reason this row is worth a tap, so it is the one thing here allowed to carry colour. Wraps rather than truncating — a half-shown deadline is worse than a two-line one. */ .mckos-tool__live{margin-top:3px;font-size:12.5px;font-weight:600;line-height:1.35; color:#1f4e79;overflow-wrap:anywhere} .mckos-tool__live--active{color:#1a7f4b} .mckos-tool__live--today{color:#b3261e} /* today IS the deadline */ .mckos-tool__live--upcoming{color:#1f4e79} .mckos-tool__live--past{color:#5c6670;font-weight:400} .mckos-tool__go{flex:0 0 auto;color:#1f4e79;font-size:17px;opacity:.55} .mckos-tool:hover .mckos-tool__go{opacity:1} /* coming_soon: same row, no link, no arrow — nothing that looks clickable. */ .mckos-tool--soon{background:#f7f8f9;border-style:dashed;cursor:default} .mckos-tool--soon .mckos-tool__text b, .mckos-tool--soon .mckos-tool__sub{color:#6b7480} .mckos-tool__badge{flex:0 0 auto;font-size:11px;font-weight:600; padding:3px 8px;border-radius:999px;background:#e8eaed;color:#5c6670} @media (prefers-color-scheme:dark){ .mckos-tool{background:#161a1d;border-color:#2b3238} .mckos-tool__sub{color:#98a2ad} .mckos-tool--soon{background:#14171a} .mckos-tool__badge{background:#242a30;color:#98a2ad} .mckos-tool__live--active{color:#4ec98a} .mckos-tool__live--today{color:#ff8a80} .mckos-tool__live--upcoming,.mckos-tool__go{color:#7fb3e0} } /* --------------------------------------------------------------------------- CUTOFF EXPLORER — filters Ten controls where there used to be three. The layout job is to stop that reading as a wall: four on the first row (the ones people reach for), the rest folded behind a summary that says how many are in there. Mobile first. Below 560px the row is a single column — a half-width select whose longest option is "Employees State Insurance Scheme — ESI-IP (208)" is not usable, and a filter you cannot read is worse than no filter. --------------------------------------------------------------------------- */ .mckos-filters{margin:0 0 18px;padding:14px;border:1px solid #e3e6ea;border-radius:10px;background:#fbfcfd} .mckos-f__row{display:grid;gap:10px;grid-template-columns:1fr} @media (min-width:560px){.mckos-f__row{grid-template-columns:1fr 1fr}} @media (min-width:900px){.mckos-f__row{grid-template-columns:repeat(4,1fr)}} /* THE CONTROLS MUST SHARE A BASELINE. Some labels are one line ("Round"), some are two ("कॉलेज का प्रकार" plus its sub-label), and at narrower widths a sub-label wraps to three. Grid stretches every cell to the tallest, but the control inside each cell used to sit directly under its own label — so the selects landed at 407px, 423px and 443px on the same row. Ragged controls read as a broken grid. margin-top:auto pushes every control to the BOTTOM of its cell, so they line up no matter how many lines the label above takes. */ .mckos-f{display:flex;flex-direction:column;gap:4px;min-width:0} .mckos-f>select,.mckos-f>input{margin-top:auto;flex:0 0 auto;height:44px} .mckos-f__label{display:flex;flex-direction:column;font-size:12px;font-weight:600;color:#3c4650;line-height:1.3} /* The sub-label carries the whole ESIC/Deemed distinction, so it must stay readable rather than shrinking into decoration. */ .mckos-f__hint{font-weight:400;font-size:11px;color:#6b7480;margin-top:1px} /* box-sizing is the whole bug, and it was invisible to the check I ran. The theme leaves form controls on content-box, so width:100% meant 250 (the cell) + 20 padding + 2 border = 272px inside a 250px column — every select hung 22px past its cell and sat 12px on top of its neighbour. Height did the same: 44 + 18 + 2 = 64px, not 44. The page had no horizontal scrollbar and each ROW measured correctly, which is why measuring rows and page overflow missed it entirely. Controls must be measured individually, against each other. */ .mckos-filters select,.mckos-filters input[type=search]{ box-sizing:border-box; width:100%;min-height:44px;padding:9px 10px;font-size:14px; border:1px solid #cfd6dd;border-radius:8px;background:#fff;color:inherit; /* Long option text must not stretch the grid column. */ max-width:100%;text-overflow:ellipsis} .mckos-filters select:focus,.mckos-filters input[type=search]:focus{ outline:2px solid #1f4e79;outline-offset:1px;border-color:#1f4e79} /* The search field spans the row on narrow screens — a name fragment needs more room than a select does. Its WRAPPER is the grid child now, not the input, so the rule applies there. */ .mckos-f__row>.mckos-f:has(>.mckos-f__search){grid-column:1/-1} @media (min-width:560px){.mckos-f__row>.mckos-f:has(>.mckos-f__search){grid-column:auto}} .mckos-f__more{margin-top:12px;border-top:1px dashed #dfe4e9;padding-top:12px} /* min-height 44px: naapa gaya tha 313×30 — 30px ungli ke liye chhota hai. padding badhane ke bajaye min-height + flex, taaki lambaai chaahe jitni ho nishaana kabhi 44 se neeche na jaaye. Ye wahi tareeka hai jo .mckos-pred-row ke summary par pehle se hai. Chaudai 313px thi aur wahi rehti hai. */ .mckos-f__more>summary{cursor:pointer;font-size:13px;font-weight:600;color:#1f4e79; min-height:44px;display:flex;align-items:center; padding:4px 0;list-style:none;user-select:none} .mckos-f__more>summary::-webkit-details-marker{display:none} .mckos-f__more>summary::before{content:"▸ ";display:inline-block;transition:transform .15s} .mckos-f__more[open]>summary::before{content:"▾ "} .mckos-f__more>summary:focus-visible{outline:2px solid #1f4e79;outline-offset:2px;border-radius:4px} .mckos-f__more>.mckos-f__row{margin-top:10px} .mckos-f__note{grid-column:1/-1;margin:2px 0 0;font-size:12px;line-height:1.5;color:#5c6670; padding:8px 10px;border-left:3px solid #cfd6dd;background:#fff;border-radius:0 6px 6px 0} .mckos-f__actions{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap} .mckos-f__clear{font-size:13px;color:#5c6670;text-decoration:underline} .mckos-f__clear:hover,.mckos-f__clear:focus-visible{color:#b3261e} /* Result count. Sticky on small screens only: with the filters open the count is the feedback that a change did anything, and on a phone it would otherwise sit below the fold while you are still choosing. */ .mckos-n{font-size:13.5px;font-weight:600;color:#3c4650;margin:0 0 10px} @media (max-width:900px){ .mckos-n{position:sticky;top:0;z-index:5;padding:8px 10px;margin:0 0 10px; background:#fbfcfd;border:1px solid #e3e6ea;border-radius:8px} } .mckos-n--busy{opacity:.5;transition:opacity .12s} .mckos-n--zero{color:#b3261e} .mckos-n--empty{font-weight:400;color:#5c6670} @media (prefers-color-scheme:dark){ .mckos-filters{background:#14171a;border-color:#2b3238} .mckos-f__label{color:#c6ced6} .mckos-f__hint,.mckos-f__note,.mckos-f__clear{color:#98a2ad} .mckos-filters select,.mckos-filters input[type=search]{background:#0f1214;border-color:#2b3238} .mckos-f__more{border-top-color:#2b3238} .mckos-f__more>summary{color:#7fb3e0} .mckos-f__note{background:#0f1214;border-left-color:#2b3238} .mckos-n{color:#c6ced6} @media (max-width:900px){.mckos-n{background:#14171a;border-color:#2b3238}} .mckos-n--zero{color:#ff8a80} } /* Results table: scrolls inside its own box on narrow screens instead of pushing the page sideways. Six columns (college · year/round · category · CR · n · evidence) cannot fit 375px, and the evidence column is the last one we would ever drop. */ .mckos-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 12px} .mckos-tablewrap>.mckos-table{margin-bottom:0} /* Active-filter chips. Each removes ONE filter; "clear all" stays as the blunt option. Needed because a dropdown can collapse to a single (0) entry — or the visitor may simply not spot which of nine controls is the one holding the result at zero. */ .mckos-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px} .mckos-chips__lead{font-size:12.5px;color:#5c6670} /* These are now the primary way out of a zero-result state, so they have to be comfortably tappable — not decorative counters. 44px on a phone. */ .mckos-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px; padding:6px 12px;border:1px solid #cfd6dd;border-radius:999px;background:#fff; font-size:12.5px;line-height:1.3;color:inherit;text-decoration:none} @media (max-width:600px){.mckos-chip{min-height:44px;padding:10px 14px;font-size:13px}} .mckos-chip b{font-weight:600;color:#5c6670} .mckos-chip:hover,.mckos-chip:focus-visible{border-color:#b3261e;color:#b3261e} .mckos-chip:hover b,.mckos-chip:focus-visible b{color:#b3261e} .mckos-chip__x{font-size:11px;opacity:.6} .mckos-chip:hover .mckos-chip__x{opacity:1} /* A chosen value that now matches nothing. It stays selectable on purpose — the (0) is the explanation, and the control is the way back out. */ .mckos-opt--zero{color:#b3261e} @media (prefers-color-scheme:dark){ .mckos-chips__lead{color:#98a2ad} .mckos-chip{background:#161a1d;border-color:#2b3238} .mckos-chip b{color:#98a2ad} .mckos-opt--zero{color:#ff8a80} } /* --------------------------------------------------------------------------- CUTOFF ROW — which counselling, and which seat pool A cutoff without these two is not interpretable. The same college holds an MCC All-India seat and a Rajasthan state seat; at GMC Baran an Open MBBS seat closed at 12,166 (MCC) and 26,134 (Rajasthan Govt.), and 54,739 on a Management seat. Reading the wrong line costs a real seat. Neither gets its own column: the table already scrolls on a phone, and two more columns would push the evidence link — the thing the whole product is built to show — further out of sight. They ride along with the fields they qualify: authority with the round, seat pool with the category. --------------------------------------------------------------------------- */ .mckos-auth{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:4px; font-size:13px;font-weight:700;line-height:1.5;letter-spacing:.02em;white-space:nowrap; vertical-align:1px} .mckos-auth--mcc{background:#e4edf6;color:#1f4e79} .mckos-auth--raj{background:#f3e9dd;color:#7a4a12} .mckos-sub{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:#5c6670} .mckos-pool{display:inline-block;margin-left:4px;padding:0 4px;border-radius:3px; background:#eef1f4;font-size:10.5px;font-weight:600;color:#3c4650;white-space:nowrap} /* The two cells that now carry a second line need room to breathe; without this the table reads as one grey block. */ .mckos-table td{vertical-align:top} @media (prefers-color-scheme:dark){ .mckos-auth--mcc{background:#17293a;color:#9cc6ea} .mckos-auth--raj{background:#2e2418;color:#d9ab6d} .mckos-sub{color:#98a2ad} .mckos-pool{background:#242a30;color:#c6ced6} } /* Deemed reservation notice. Shown in four places, and only where something is genuinely confusing: when a reserved category has just removed every Deemed college from the results, or when every visible row says Open / Unreserved and that needs explaining. Never on the homepage, never per row — a sentence repeated 504 times is not read once. */ .mckos-deemed{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px; padding:11px 13px;border:1px solid #d8c9a8;border-left:3px solid #b8862b; border-radius:0 8px 8px 0;background:#fdf9f0} .mckos-deemed__icon{flex:0 0 auto;font-size:15px;line-height:1.5} .mckos-deemed p{margin:0;font-size:13px;line-height:1.55;color:#4a3d28} .mckos-deemed p + p{margin-top:6px} .mckos-deemed__go{font-weight:600;color:#8a5f12;text-decoration:underline} .mckos-deemed__go:hover,.mckos-deemed__go:focus-visible{color:#b3261e} .mckos-deemed__src{font-size:11px;color:#8a7c62} @media (prefers-color-scheme:dark){ .mckos-deemed{background:#1c1710;border-color:#3a2f1c;border-left-color:#b8862b} .mckos-deemed p{color:#d8cbb2} .mckos-deemed__go{color:#d9ab6d} .mckos-deemed__src{color:#8a7c62} } /* Round-3 seat conversion. Attached to Round 3 only, because that is the one round the bulletin says it happens in. Placed after the stage list: dates first, "and then what happens to the seats nobody took" second. */ .mckos-conv{margin:10px 0 0;padding:10px 12px;border-radius:8px; background:#f5f7f9;border:1px solid #e3e6ea} .mckos-conv__head{font-size:12.5px;font-weight:700;color:#3c4650;line-height:1.4} .mckos-conv__body{margin:4px 0 0;font-size:12px;line-height:1.5;color:#5c6670} .mckos-conv__list{margin:6px 0 0;padding:0;list-style:none; display:flex;flex-wrap:wrap;gap:5px} .mckos-conv__list li{font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; padding:2px 7px;border-radius:4px;background:#fff;border:1px solid #dfe4e9;color:#3c4650} .mckos-conv__src{margin-top:6px;font-size:10.5px;color:#8a93a0} /* The one conversion that gives the seat to nobody. It is stated in a single table cell of the bulletin, and a Central-University CW candidate has no other way to find it — so it does not look like the rest. */ .mckos-conv--accent{background:#fdf3f2;border-color:#e8c4c0} .mckos-conv--accent .mckos-conv__head{color:#b3261e} .mckos-conv--accent .mckos-conv__list li{border-color:#e8c4c0} @media (prefers-color-scheme:dark){ .mckos-conv{background:#14171a;border-color:#2b3238} .mckos-conv__head{color:#c6ced6} .mckos-conv__body{color:#98a2ad} .mckos-conv__list li{background:#0f1214;border-color:#2b3238;color:#c6ced6} .mckos-conv--accent{background:#1f1413;border-color:#4a2b28} .mckos-conv--accent .mckos-conv__head{color:#ff8a80} } /* --------------------------------------------------------------------------- CERTIFICATE PROFORMAS These are government forms a student will copy and take to an officer, so the design job is the opposite of usual: nothing decorative, everything attributable. Every card states its annexure, its page and its SEASON, because the failure mode here is not being wrong today — it is silently staying on screen after the bulletin has moved on. --------------------------------------------------------------------------- */ .mckos-pf{margin:0 0 24px} .mckos-pf__lede{margin:0 0 16px;padding:12px 14px;border-radius:8px;background:#f5f7f9;border:1px solid #e3e6ea} .mckos-pf__lede p{margin:0;font-size:13.5px;line-height:1.6;color:#3c4650} .mckos-pf__auth{margin-top:6px !important;font-size:12px !important;color:#5c6670 !important} .mckos-pf__card{margin:0 0 16px;padding:14px 16px;border:1px solid #e3e6ea;border-radius:10px;background:#fff} .mckos-pf__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px; padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid #eef1f4} .mckos-pf__head h3{margin:0;font-size:16px;font-weight:700;color:#1f4e79} .mckos-pf__src{font-size:11.5px;color:#5c6670;font-weight:600} .mckos-pf__heading{margin:0;font-size:13px;font-weight:700;color:#3c4650;line-height:1.45;text-transform:uppercase;letter-spacing:.01em} .mckos-pf__formname{margin:6px 0 0;font-size:12.5px;font-weight:700;color:#5c6670;letter-spacing:.06em} /* The legal basis is quoted, so it looks quoted. */ .mckos-pf__basis{margin:10px 0 0;padding:8px 12px;border-left:3px solid #cfd6dd;background:#fafbfc; font-size:12px;line-height:1.6;color:#5c6670;font-style:italic} .mckos-pf__sub{margin:14px 0 6px;font-size:11.5px;font-weight:700;color:#5c6670;text-transform:uppercase;letter-spacing:.04em} .mckos-pf__fields{margin:0;padding-left:22px} .mckos-pf__fields li,.mckos-pf__issuer li{font-size:13px;line-height:1.65;color:#3c4650} .mckos-pf__issuer{margin:0;padding-left:18px} .mckos-pf__na{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:#5c6670} .mckos-pf__note{margin:10px 0 0;padding:9px 12px;border-radius:6px;background:#f7f9fb;border:1px solid #e3e6ea} .mckos-pf__note p{margin:0;font-size:12.5px;line-height:1.65;color:#3c4650} .mckos-pf__notelabel{font-size:11.5px;font-weight:700;color:#5c6670;margin-bottom:4px} .mckos-pf__extra{margin-top:6px !important;color:#5c6670 !important;font-size:12px !important} /* The one line that changes every season and, on its own, gets a certificate refused. It is allowed to shout. */ .mckos-pf__note--hot{background:#fdf3f2;border-color:#e8c4c0;border-left:3px solid #b3261e} .mckos-pf__note--hot .mckos-pf__notelabel{color:#b3261e} .mckos-pf__note--hot p{font-weight:600;color:#7a1c16} .mckos-pf__gap{margin:0;font-size:13px;line-height:1.7;color:#5c6670; padding:10px 12px;border-radius:6px;background:#fdf9f0;border:1px solid #d8c9a8} .mckos-pf__raj{margin:0;padding:12px 14px;border-radius:8px;background:#f3e9dd;border:1px solid #d8c9a8} .mckos-pf__raj p{margin:0;font-size:13px;line-height:1.7;color:#4a3d28} @media (prefers-color-scheme:dark){ .mckos-pf__lede{background:#14171a;border-color:#2b3238} .mckos-pf__lede p{color:#c6ced6} .mckos-pf__card{background:#161a1d;border-color:#2b3238} .mckos-pf__head{border-bottom-color:#2b3238} .mckos-pf__head h3{color:#7fb3e0} .mckos-pf__heading,.mckos-pf__fields li,.mckos-pf__issuer li,.mckos-pf__note p{color:#c6ced6} .mckos-pf__basis{background:#0f1214;border-left-color:#2b3238;color:#98a2ad} .mckos-pf__note{background:#0f1214;border-color:#2b3238} .mckos-pf__note--hot{background:#1f1413;border-color:#4a2b28} .mckos-pf__note--hot p{color:#ffb4ab} .mckos-pf__gap{background:#1c1710;border-color:#3a2f1c;color:#d8cbb2} .mckos-pf__raj{background:#1c1710;border-color:#3a2f1c} .mckos-pf__raj p{color:#d8cbb2} } /* Citation, not a link. D-70: the official PDFs are never served — the five-year archive behind these numbers cannot be rebuilt once given away, because MCC removes prior-year documents from its own site. What a reader needs is which document and which page, so they can check it at the authority themselves. Deliberately not styled as a link: nothing here is clickable, and looking clickable would be a promise we do not keep. */ .mckos-cite{display:block;max-width:190px;font-size:13px;line-height:1.35;color:#5c6670;cursor:help} /* The page is the half that does the work: it turns "somewhere in a 1,107-page document" into something a reader can open and check. */ .mckos-cite__pg{display:block;margin-top:1px;font-weight:700;color:#3c4650;white-space:nowrap} @media (prefers-color-scheme:dark){ .mckos-cite{color:#98a2ad} .mckos-cite__pg{color:#c6ced6} } /* Citation on a prediction card. This is where a candidate decides, so it is where "where does this number come from?" has to be answerable — the document and the page carrying this exact closing rank. Never a link: the archive is not published (D-70), and anything that looks clickable here would be promising a file we do not serve. */ .mckos-pred-cite{margin-top:6px;font-size:11.5px;line-height:1.45;color:#5c6670} .mckos-pred-cite__lbl{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:10px;color:#8a93a0} .mckos-pred-cite b{color:#3c4650} @media (prefers-color-scheme:dark){ .mckos-pred-cite{color:#98a2ad} .mckos-pred-cite b{color:#c6ced6} } /* --------------------------------------------------------------------------- COLLEGE DIRECTORY (/colleges/) Shares the Cutoff Explorer's filter shell — .mckos-filters, .mckos-f__row, .mckos-f, .mckos-chip — because the two pages ask a visitor for the same kind of thing and a second visual language would be a second thing to learn. Only what genuinely differs is written here: the directory has five controls instead of ten, and its results are cards rather than table rows. --------------------------------------------------------------------------- */ /* Five controls, not four. The Explorer's row locks to repeat(4,1fr) at 900px; here a fifth would drop alone onto a second line and look like an afterthought. auto-fit keeps them even at every width without any width being named. */ @media (min-width:900px){ .mckos-filters--dir .mckos-f__row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} } /* The two gaps this page admits to (P-18, D-58). A plain note explains; this one warns, because the type note has to be read by someone who is looking at a filter that is NO LONGER THERE — nothing on screen draws their eye to it. */ .mckos-f__note--gap{border-left:3px solid #d4a04a;padding-left:9px;color:#4a4033} /* The count. It is the answer to the question the filters just asked, so it sits between the chips and the list and is the only bold thing there. */ .mckos-count{margin:0 0 12px;font-size:14px;color:#5c6670;line-height:1.5} .mckos-count__n{font-size:16px;font-weight:700;color:#243b53} .mckos-count__n.mckos-n--zero{color:#b3261e} .mckos-count__where{color:#6b7480} /* P-29 (E): quota chunne par jo chhoot gaya. Ginti wali line jaisi hi, par halka alag — taaki wo NATEEJA na lage, SAMJHAUTI lage. */ .mckos-leftout{margin:-6px 0 12px;color:#3E5753;background:#F2F7F6;border-radius:10px;padding:10px 12px} .mckos-leftout b{color:#243b53;font-weight:600} .mckos-cards{margin:0} /* CARD. The name and the authority badge share the first line; everything else stacks under it. The badge is .mckos-auth — the SAME pill as the Cutoff Explorer's column, which is the point: one word, one look, wherever it appears. THE BADGE AND THE STATE CAN BE THE SAME WORD. A Rajasthan college in Rajasthan counselling prints "Rajasthan" twice — once as an authority, once as a place — and in plain text they were indistinguishable. The word stays (one vocabulary across the site), so the two are told apart by weight and shape instead: the authority is a coloured pill, the state is quiet grey meta text on its own line. */ .mckos-card__head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .mckos-card__meta{display:block;margin-top:5px;font-size:12.5px;color:#8a949e;letter-spacing:.01em} /* D-59 made visible. The decision — one college in two counsellings stays two entries — has been in force since 3 Aug 2026 and had no way to say so; two identical names read as a bug. Amber, not red: nothing is wrong here. */ .mckos-card__pair{display:block;margin-top:8px;padding:7px 10px;border-radius:8px; background:#fdf6e9;color:#6b5320;font-size:12.5px;line-height:1.5} @media (min-width:640px){ .mckos-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px} .mckos-cards .mckos-card{margin:0} } @media (min-width:1100px){ .mckos-cards{grid-template-columns:repeat(3,1fr)} } /* --------------------------------------------------------------------------- DATA-YEAR NOTICES (MCKOS_Data_Notice) Every cutoff on this site is a PAST cutoff. These say so, in the two places a reader can miss it: above a result, and beside the number itself. NOT AN ALARM. Red would put this in the same visual family as an error, and a student who has just been shown their chances would read it as "something went wrong". It is amber and quiet — the tone of a footnote that has to be read, not a warning that has to be obeyed. --------------------------------------------------------------------------- */ .mckos-datanotice{background:#fdf8ef;border:1px solid #eadfc8;border-left:4px solid #d4a04a; border-radius:8px;padding:12px 14px;margin:0 0 14px;color:#4a4033;font-size:13.5px;line-height:1.6} .mckos-datanotice p{margin:0 0 7px} .mckos-datanotice p:last-child{margin-bottom:0} .mckos-datanotice__head{font-size:14.5px;color:#3a3226} /* The English line is a second reading of the same thing, for whoever finds it easier — quieter, so it never competes with the Hindi above it. */ .mckos-datanotice__en{font-size:12.5px;color:#7a6b55} /* One line above a table: same voice, a quarter of the room. */ .mckos-datanotice--compact{border-left-width:3px;padding:8px 12px;font-size:12.5px;margin-bottom:10px} /* The per-row year chip. Renders only when more than one year is published — see MCKOS_Data_Notice::badge(). */ .mckos-yearchip{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px; background:#f0ece3;color:#6b5f4a;font-size:11px;font-weight:600;vertical-align:middle} /* Footer ki trust line chrome.css me hai — wo HAR page par hoti hai, aur ye file sirf shortcode wale pages par load hoti hai. */ @media (max-width:600px){ .mckos-datanotice{font-size:13px;padding:11px 12px} .mckos-datanotice__head{font-size:14px} } /* Table headings carry two spellings; the screen picks one. The year sits outside both — a phone must not be the place the year goes missing, because the phone is where the screenshot is taken. */ .mckos-th-abbr{display:none} @media (max-width:700px){ .mckos-th-full{display:none} .mckos-th-abbr{display:inline} } /* College ka naam ab pannne ke apne h1 me hai (college_page_title), isliye yahan koi chhupane wala jugaad nahi. Pehla roop theme ke h1 ko CSS se chhupa raha tha -- aur wo galat tha: `clip` se chhupa text screen reader PHIR BHI padhta hai, yaani ek suunne wale ko do sheershak milte. */ .mckos-college-name{font-size:20px;line-height:1.3;margin:0 0 4px} @media (max-width:600px){.mckos-college-name{font-size:21px}} /* ══ HOMEPAGE (6 Aug 2026) ══════════════════════════════════════════════ Naapa gaya: purane pannne par "Find My Chances" 1014px par shuru hota tha -- doosri screen ke baad. Ab rank ka box 140px par hai. 375 / 390 / 414 -- teeno par horizontal overflow 0. */ .mckos-rank{display:flex;gap:8px;align-items:stretch;margin-top:12px} /* min-width:0 -- warna flex item apne min-content par ruk jaata hai aur input dabbe se bahar nikal jaata. Yahi CSS grid wala jaal hai (P-24). */ .mckos-rank input{flex:1 1 auto;min-width:0;height:52px;font-size:17px;padding:0 12px; border:2px solid #0E7C7B;border-radius:10px;background:#fff;color:#0A2F2E} .mckos-rank button{flex:0 0 auto;height:52px;padding:0 18px;font-size:16px;font-weight:700; background:#0E7C7B;color:#fff;border:0;border-radius:10px;cursor:pointer} .mckos-rank__what{margin:10px 0 0;font-size:14px;line-height:1.5;color:#3c4650} .mckos-rank__note{margin:6px 0 0;font-size:13px;line-height:1.45;color:#5c6670} /* ══ TAAZA APDET — EK PATTI, EK PANKTEE ═════════════════════════════════ Purani shakl teen panktee leti thi (label ooper, khabar do panktee me lipti, phir "pichhle N apdet") -- naapa: 343x155px. CHALTI PATTI NAHI, aur wajah competitor ke apne screenshot me thi: unki patti par teesri khabar KAT gayi thi. Chalti line par yahi hota hai, aur phone par aankh use pakad hi nahi paati. Dono katte hain -- par fark bunyaadi hai: chalti patti : SAMAY par katti hai. Poora padhne ka koi tareeka nahi. hamari : JAGAH par katti hai. `+` par poori khulti hai. `…` ek imaandaar kataav hai: wo kehta hai "aur hai, maangiye". Chalti patti ka kataav kehta hai "aap der se aaye". Naapa (375 aur 1280 dono): patti 50px, khabar EK panktee, tap 341x48, horizontal overflow 0. Khulne par khabar POORI dikhti hai. */ .mckos-upd{margin-top:24px;border:1px solid #C9D8D5;border-radius:10px; background:#F2F7F6;overflow:hidden} .mckos-upd__row{list-style:none;display:flex;align-items:center;gap:8px; min-height:48px;padding:0 10px 0 12px} details.mckos-upd>summary.mckos-upd__row{cursor:pointer} details.mckos-upd>summary::-webkit-details-marker{display:none} /* Label site ke apne teal me -- competitor jaisa orange nahi. Yahi rang rank box aur .mckos-btn par pehle se hai; koi naya rang nahi joda gaya. */ .mckos-upd__lbl{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.02em; background:#0E7C7B;color:#fff;border-radius:999px;padding:3px 9px;white-space:nowrap} /* EK PANKTEE, hamesha. `min-width:0` ke bina flex item apne min-content par ruk jaata hai aur `…` kabhi lagti hi nahi (P-24 wala jaal). */ .mckos-upd__txt{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.35; color:#0A2F2E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mckos-upd__d{flex:0 0 auto;font-size:12.5px;color:#5B7470;white-space:nowrap} /* `+2`, akela `+` nahi -- ginti rahasya ko bayan me badal deti hai. */ .mckos-upd__plus{flex:0 0 auto;min-width:30px;height:26px;padding:0 7px; border-radius:999px;background:#fff;border:1px solid #C9D8D5;color:#0A5C5B; font-size:13px;font-weight:700;line-height:24px;text-align:center} details.mckos-upd[open] .mckos-upd__plus{color:#5B7470} /* Khulne par poori khabar -- kuch chhupta nahi, bas pehle nahi dikhta. */ details.mckos-upd[open] .mckos-upd__txt{white-space:normal;overflow:visible;text-overflow:clip} .mckos-upd__more{border-top:1px solid #DCE8E6;margin:0;padding:4px 12px 8px;list-style:none} .mckos-upd__more li{font-size:13px;line-height:1.5;padding:7px 0;border-bottom:1px solid #E8F0EF} .mckos-upd__more li:last-child{border-bottom:0} /* Sections ke beech saaf antar -- "advance ka ehsaas harkat se nahi, ghanatv se aata hai". Koi animation nahi. */ .mckos-sec{margin-top:26px;padding-top:20px;border-top:1px solid #E6ECEB} .mckos-sec>h2{font-size:19px;line-height:1.3;margin:0 0 10px} .mckos-j{display:block;border:1px solid #C9D8D5;border-radius:10px;padding:12px; margin-bottom:10px;text-decoration:none;color:inherit} .mckos-j b{display:block;font-size:16px;color:#0A2F2E} .mckos-j span{display:block;font-size:13px;line-height:1.45;color:#4A6462;margin-top:3px} .mckos-j--off{background:#FAFBFC;border-style:dashed} .mckos-states{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .mckos-st{flex:0 0 auto;font-size:13px;padding:8px 10px;min-height:44px; display:flex;align-items:center;border:1px dashed #C7CFD4;border-radius:8px; color:#5c6670;background:#FAFBFC} .mckos-st__n{margin-left:4px;color:#7a848d} .mckos-csearch{display:flex;gap:8px;margin-top:4px} .mckos-csearch input{flex:1 1 auto;min-width:0;height:48px;font-size:15px;padding:0 12px; border:1px solid #C9D8D5;border-radius:10px} .mckos-csearch button{flex:0 0 auto;height:48px;padding:0 14px;font-size:15px;font-weight:600; background:#EAF4F3;color:#0A5C5B;border:1px solid #C9D8D5;border-radius:10px;cursor:pointer} .mckos-fmc-prefill{margin:0 0 12px;padding:10px 12px;border-radius:10px; background:#EAF4F3;border:1px solid #C9D8D5;font-size:14px;line-height:1.5;color:#0A5C5B} @media (prefers-color-scheme:dark){ .mckos-upd{background:#12201f;border-color:#2b3a39} .mckos-st{background:#171f24;border-color:#3a444c;color:#c6ced6} .mckos-fmc-prefill{background:#12201f;border-color:#2b3a39;color:#9fd8d6} } .mckos-alert__more>summary{font-size:13px;font-weight:600;color:#7B4A12;min-height:44px; display:flex;align-items:center;list-style:none;cursor:pointer} .mckos-alert__more>summary::-webkit-details-marker{display:none} .mckos-alert__more>summary::before{content:"▸ ";display:inline-block} .mckos-alert__more[open]>summary::before{content:"▾ "} /* ══ GHANATV (6 Aug 2026) ═══════════════════════════════════════════════ Founder ne do baar kaha "thoda advance lage". Naapa gaya ki abhi kya bhara aur kya khaali lagta hai, aur teen cheezein nikli. Teeno me EK BHI animation nahi -- "advance ka ehsaas harkat se nahi, ghanatv se aata hai", aur harkat padhne me rukawat banti hai jo hamari apni shart ke khilaaf hai. 1 · FONT KE SAAT AAKAAR SE CHAAR. Naapa: 27 / 20 / 19 / 16 / 15 / 14 / 13 -- saat aakaar 13 aur 27 ke beech thuse hue. h2 (19) aur proof ka number (20) LAGBHAG EK the, yaani sheershak aur aankda ek doosre se ladte the. Ab: h1 28 · h2 21 · body 15 · sub 13, aur proof ka number 24 -- sabse bada aankda, kyunki wahi saboot hai. Naapa: 24px par teeno aankde 207px maangte hain aur 313px maujood hai. 2 · DO STAR KE DABBE, CHHAH JAISE NAHI. Naapa: saat dabbe, aur unme se CHHAH safed-se-halke-safed, 1px border, 10-12px radius. Sirf alert alag dikhta tha. Ye sundarta ka masla nahi, KAAM ka hai: sab ek jaise hone se aankh ko pata hi nahi chalta ki kahan TAP karna hai. Ab: kaam karne wale (rank, journey, tool, search) -- safed, THOS border. padhne wale (proof, update, trust) -- bina border, halka background. 3 · JAGAH KI EK LAY: 24px section ke beech, 12px andar. Naapa: 16 / 0 / 15 / 26 / 26 / 22 / 30 -- bikhri hui. Aur `upd -> proof` ka gap SHUNYA tha: do padhne wali cheezein ek doosre me ghul rahi thin. */ .mckos-hero h1{font-size:28px;line-height:1.2} .mckos-sec>h2,.mckos-h2{font-size:21px;line-height:1.28} .mckos-j b{font-size:15px} .mckos-tool b{font-size:15px} .mckos-trust-card b{font-size:15px} .mckos-proof__item b{font-size:24px} /* Padhne wale dabbe: border nahi, sirf halka background. */ /* `.mckos-upd` yahan se HATAYA GAYA: nayi patti ka apna border hai aur wo uski pehchaan ka hissa hai. Do jagah ek hi cheez likhne par yahi hota hai -- ye line uski oonchai 50 se 72 kar rahi thi (D-72). */ .mckos-proof{border:0;border-radius:12px} .mckos-trust-card{border:0;background:#F2F7F6} /* Kaam karne wale: safed, thos border -- yahi "tap kar sakte hain" kehta hai. */ .mckos-j,.mckos-tool,.mckos-st{background:#fff} .mckos-j{border-style:solid} /* --off wala dashed hi rehta hai: wo "abhi nahi" kehta hai, aur wahi farak dashed ka asli kaam hai. */ .mckos-j--off,.mckos-st{background:#FAFBFC;border-style:dashed} /* Lay: 24 bahar, 12 andar. */ /* `padding` bhi hataya -- nayi patti me wo `.mckos-upd__row` par hai, taaki khuli haalat me `