/* சுப முகூர்த்த நாட்கள் (TMC-131), ported from the suba-muhurtham-natkal-2026-v17-tanglish mockup; scoped under .smn.
   Also the கிரகப்பிரவேச / வாஸ்து நாட்கள் pages (TMC-134, .smn.mdp): same layout, rules for them at the end.
   Colours and fonts come from the site theme (css/tmc/shared/tmc90-theme.css); text sizes follow the .tp-* scale.
   PO's notes on the mockup: month names larger and black with no counts, and the viratham pages' paksham pills. */
.smn{
  --orange:#FF7700; --orange-lt:#FF851A; --orange-soft:#FFF1E2; --orange-ink:#B55D00;
  --cream:#FFFBF6; --cream-deep:#FFF3E6; --white:#FFFFFF;
  --peach:#F0D2B4; --peach-deep:#E5772A; --tan:#F5E4CF;
  --rose:#F4DBD7; --rose-ink:#BD5746;
  --green:#248D49; --green-soft:#E8F5EC; --green-ink:#0F6E3C; --red:#D14343;
  --body:#2B2524; --head:#35343D; --muted:#8A817A; --grey:#6B6259; --grey-head:#6B6259;
  --line:#E9E1D6; --rule:#ECE8E3;
  --radius-s:8px; --radius-m:12px; --pill:32px;
  --shadow:0 4px 16px rgba(107,82,51,.08);
  --gutter:16px; --maxw:1200px; --lh-body:1.8;
  --ff-ta:'Anek Tamil','Noto Sans Tamil',system-ui,sans-serif;
  --ff-num:'Inter',system-ui,sans-serif;
  background:var(--white); color:var(--body); font-family:var(--ff-ta); font-size:14px; line-height:var(--lh-body);
}
.smn *,.smn *::before,.smn *::after{box-sizing:border-box}
.smn h1,.smn h2,.smn h3{color:var(--head); margin:0; line-height:1.4; font-weight:700}
.smn h1{font-size:clamp(25px,5.6vw,32px)}
.smn h2{font-size:clamp(17px,4.2vw,21px)}
.smn p{margin:0; line-height:var(--lh-body)}
.smn a{color:var(--orange); text-decoration:none}
.smn .wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:14px var(--gutter) 8px}
.smn .en{font-family:var(--ff-num); color:var(--muted); font-weight:500}

.smn .crumb{font-size:12px; color:var(--muted); line-height:1.7; margin-bottom:6px}
.smn .crumb a{color:var(--muted)}
.smn .crumb a:hover{color:var(--orange)}
.smn .ph{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.smn .ph h1 .sub{display:block; font-family:var(--ff-num); font-size:13px; font-weight:500; color:var(--muted); line-height:1.5; margin-top:2px}
.smn .lead{font-size:14px; color:var(--grey); line-height:1.7; margin:0 0 14px; max-width:860px}

/* answer tiles: next dates, total, months without */
.smn .h4{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 10px}
.smn .h4 .tile{border-radius:16px; padding:14px 15px; line-height:1.35; color:inherit; display:block; border:1px solid transparent}
.smn .h4 .tile small{display:flex; align-items:center; gap:9px; font-size:13px; color:#6B6069; margin-bottom:8px}
.smn .h4 .tile small i{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; flex:0 0 auto}
.smn .h4 .tile small svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.smn .h4 .tile b{display:block; font:700 21px var(--ff-num); line-height:1.2}
.smn .h4 .tile > span{display:block; font-size:13px; font-weight:600; margin-top:6px}
.smn .h4 .t1{grid-column:1 / -1; background:#FFF6EC; border-color:#F6E3CD}
.smn .h4 .t1 small{color:var(--orange-ink)}
.smn .h4 .t1 small i{background:#FBDDC0; color:var(--orange-ink)}
.smn .h4 .t3{background:#EEF6F0; border-color:#D5E8DA}
.smn .h4 .t3 small i{background:#D5E8DA; color:#2F6B45}
.smn .h4 .t3 b{color:#2F6B45; font-size:26px}
.smn .h4 .t3 > span{color:#4A6B55}
.smn .h4 .t4{background:#F8F1EE; border-color:#EADBD5}
.smn .h4 .t4 small i{background:#EADBD5; color:#7A4E42}
.smn .h4 .t4 b{color:#7A4E42; font-family:var(--ff-ta); font-size:17px; line-height:1.4}
.smn .h4 .up{display:grid; grid-template-columns:1fr; gap:6px}
.smn .h4 .up a{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center; color:inherit; padding:9px 11px; border-radius:10px; background:#fff; border:1px solid #F3E2CF}
.smn .h4 .up a .ds2{margin-top:2px}
@media (min-width:600px){
  .smn .h4 .up{grid-template-columns:1fr 1fr}
  .smn .h4 .up a{grid-template-columns:1fr}
  .smn .h4 .up a .mrow{margin-top:2px}
}
@media (min-width:760px){.smn .h4.h3{grid-template-columns:2.2fr .8fr 1.1fr} .smn .h4.h3 .t1{grid-column:auto}}

/* English / Tamil month switch: the app's pills (white, light border; the chosen one filled orange, as the month
   pills of the விரத pages and the sub-menu), the same on phones and desktop */
.smn .mtog{display:flex; align-items:center; gap:8px; margin:4px 0 2px; flex-wrap:wrap}
.smn .mtog span{font-size:12.5px; color:var(--muted); margin-right:2px}
.smn .mtog button{font-family:var(--ff-ta); font-size:13.5px; line-height:1.5; padding:7px 14px; border-radius:var(--pill); border:1px solid var(--line); background:#fff; color:var(--head); cursor:pointer; white-space:nowrap}
.smn .mtog button:hover{border-color:var(--orange)}
.smn .mtog button[aria-pressed="true"]{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600}
@media (max-width:759px){
  .smn .mtog span{flex:1 1 100%; margin:0 0 -2px}
  .smn .mtog button{flex:1 1 0; text-align:center}
}
@media (min-width:760px){.smn .mtog{justify-content:flex-end}}

/* month tabs: larger, black names (PO), no counts */
.smn .mstrip{display:flex; gap:0; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); margin:4px calc(-1*var(--gutter)) 14px; padding:0 var(--gutter); scroll-snap-type:x proximity}
.smn .mstrip[hidden]{display:none}
.smn .mstrip::-webkit-scrollbar{display:none}
.smn .mstrip button{flex:0 0 auto; appearance:none; background:none; border:0; border-bottom:3px solid transparent; padding:10px 12px 8px; font:500 15.5px var(--ff-ta); color:#000; line-height:1.4; cursor:pointer; scroll-snap-align:start; white-space:nowrap}
.smn .mstrip button[aria-selected="true"]{color:var(--orange-ink); font-weight:700; border-bottom-color:var(--orange)}
@media (min-width:900px){.smn .mstrip{margin-left:0; margin-right:0; padding:0; gap:4px}}

.smn .sech{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:18px 0 8px}
.smn .sech h2{font-size:15.5px}
.smn .sech h2 .en{font-size:12px; margin-left:6px}
.smn .sech .cnt{font:600 12.5px var(--ff-num); color:var(--muted)}

/* All · தேய்பிறை · வளர்பிறை (or religions): the shared pill (css/tmc/shared/tmc90-theme.css); here only margins */
.smn .pfil{margin:0 0 12px}

/* date table */
.smn .tw{overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-m)}
.smn table.tc{width:100%; border-collapse:collapse; table-layout:fixed}
.smn table.tc col.cd{width:44%}
.smn table.tc col.ci{width:56%}
@media (min-width:700px){.smn table.tc col.cd{width:38%} .smn table.tc col.ci{width:62%}}
.smn table.tc th{background:var(--rose); color:var(--rose-ink); text-align:left; font-size:13.5px; font-weight:700; padding:10px 12px; line-height:1.5}
.smn table.tc th .en{font-size:11px}
.smn table.tc td{padding:10px 12px; border-top:1px solid var(--rule); vertical-align:top; line-height:1.65}
.smn table.tc tr:nth-child(even) td{background:#FFFCF9}
.smn table.tc tr[hidden]{display:none}
.smn .dt{display:block; line-height:1.4}
.smn .den{font-family:var(--ff-num); font-weight:700; font-size:15px; color:var(--head); white-space:nowrap}
.smn .dw{font-size:13px; color:var(--grey); margin-left:5px}
.smn .ds2{display:block; font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:2px}
.smn .ds2 .d1{color:var(--green-ink); font-weight:600}
.smn .mrow{display:flex; flex-wrap:wrap; gap:2px 0}
.smn .itm{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; line-height:1.7; margin-right:10px; white-space:nowrap; color:var(--body)}
.smn .itm svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:var(--peach-deep)}
.smn .itm.nk{color:var(--green-ink); font-weight:600}
.smn .itm.nk svg{color:var(--green-ink)}
.smn .itm.pk{color:var(--grey-head)}
.smn .nomo{display:none; padding:14px 12px; color:var(--muted); font-size:14px; line-height:1.7}
.smn .nomo.show{display:block}
.smn .calcnote{font-size:12px; color:var(--muted); line-height:1.7; margin:10px 0 0}

/* sections */
.smn .sec{margin:22px 0}
.smn .sec h2{margin-bottom:8px}
.smn .sec h2 .en{font-size:12.5px; margin-left:8px}
.smn .sec p{margin-bottom:9px; max-width:860px}
.smn .sec p b{color:var(--head)}
.smn .sec table.kv{width:100%; border-collapse:collapse; max-width:860px; font-size:14px; margin-bottom:9px}
.smn .sec table.kv th,.smn .sec table.kv td{padding:8px 10px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; line-height:1.6}
.smn .sec table.kv th{color:var(--rose-ink); background:var(--rose); font-weight:700; font-size:12.5px}
.smn:not(.pnd) .sec table.kv td:first-child{font-weight:600; color:var(--head); white-space:nowrap}
.smn .note{background:var(--cream); border-left:3px solid var(--peach-deep); padding:10px 14px; border-radius:0 var(--radius-s) var(--radius-s) 0; font-size:13.5px; line-height:1.75; color:var(--grey); max-width:860px}
.smn .note b{color:var(--head)}
.smn .uses{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:8px 0 12px}
@media (min-width:800px){.smn .uses{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:380px){.smn .uses div{gap:7px; padding:8px; font-size:13px}}
.smn .uses div{min-width:0; overflow-wrap:anywhere; display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:var(--radius-m); padding:9px 10px; font-size:13.5px; font-weight:600; color:var(--head); line-height:1.4}
.smn .uses div svg{width:22px; height:22px; flex:0 0 auto; fill:none; stroke:var(--peach-deep); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.smn .ql{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px}
.smn .ql a{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--head); color:var(--head); border-radius:var(--pill); padding:7px 14px; font-size:13.5px; font-weight:600; line-height:1.4}
.smn .ql a::after{content:"›"; font-size:16px; line-height:1}

/* recommendations */
.smn .reco{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:600px){.smn .reco{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.smn .reco{grid-template-columns:repeat(4,1fr)}}
.smn .reco a{display:flex; align-items:center; gap:12px; background:var(--rose); border-radius:var(--radius-m); padding:10px 12px; color:var(--head); font-weight:700; font-size:14px; line-height:1.4}
.smn .reco a .tl{width:44px; height:44px; border-radius:10px; background:#fff; display:grid; place-items:center; color:var(--rose-ink); flex:0 0 auto}
.smn .reco a .tl svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.smn .reco a span.t{flex:1}
.smn .reco a::after{content:"›"; font-size:20px; color:var(--rose-ink)}

/* கிரகப்பிரவேச / வாஸ்து நாட்கள் (TMC-134, griha-pravesam-v14 / vastu-natkal-v12 mockups): time, special day and
   Sunday items, the tile layouts and the prose sections. */
.smn .itm.tm{color:var(--head); font-weight:600}
.smn .itm.sp{color:var(--rose-ink); font-weight:700}
.smn .itm.sp svg{color:var(--rose-ink)}
.smn .itm.sn{color:var(--muted)}
@media (max-width:759px){.smn table.tc .itm.tm,.smn table.tc .itm.sn,.smn .h4 .up a .itm.tm{white-space:normal}}
.smn.mdp .h4 .up a,.smn.pnd .h4 .up a{grid-template-columns:1fr; min-width:0}
.smn.mdp .h4 .up a .mrow{margin-top:3px; min-width:0}
.smn.mdp .h4 .up a .itm,.smn.pnd .h4 .up a .itm{white-space:normal}
.smn.mdp .h4 .up a .itm.tm{white-space:nowrap}
.smn.mdp .h4.h3 .t3,.smn.mdp .h4.h3 .t4{grid-column:1 / -1; display:flex; align-items:center; gap:10px; padding:12px 15px}
.smn.mdp .h4.h3 .t3 small,.smn.mdp .h4.h3 .t4 small{margin:0; flex:1 1 auto}
.smn.mdp .h4.h3 .t3 > span{margin:0; text-align:right}
.smn.mdp .h4.h3 .t4 b{font-size:15px; text-align:right; max-width:60%}
@media (min-width:760px){
  /* The mockups' tiles column comes out at about a third of the row (their 2.4fr / 1fr grows to fit the tiles):
     1.85fr / 1fr, so the total and the special days fit on one or two lines as in the mockups. */
  .smn.mdp .h4.h3{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); grid-template-rows:auto auto}
  .smn.mdp .h4.h3 .t4 b{font-size:14px; line-height:1.5; max-width:62%}
  .smn.mdp .h4.h3 .t1{grid-row:1 / span 2}
  .smn.mdp .h4.h3 .t3,.smn.mdp .h4.h3 .t4{grid-column:2}
  .smn.mdp .h4.h3.two{grid-template-columns:2.6fr 1fr; grid-template-rows:auto}
  .smn.mdp .h4.h3.two .t1{grid-row:auto}
  .smn.mdp .h4.h3.two .t3{display:block; padding:14px 15px}
  .smn.mdp .h4.h3.two .t3 small{margin-bottom:8px}
  .smn.mdp .h4.h3.two .t3 > span{margin-top:6px; text-align:left}
}
/* The கிரகப்பிரவேச / வாஸ்து / ஆபரண / புதிய தொழில் pages: a slightly wider body than the mockups' 1200px, since the site's
   Tamil font runs wider than theirs, and roomier side tiles, so the total and special-days tiles don't look crowded. */
.smn.mdp,.tn-body .tmc90.smn.mdp{--maxw:1280px}
@media (min-width:760px){.smn.mdp .h4.h3 .t3,.smn.mdp .h4.h3 .t4{padding:14px 18px}}
/* Wide screens: the total's unit on one line beside the number, as the mockups. */
@media (min-width:1100px){.smn.mdp .h4.h3:not(.two) .t3 > span{white-space:nowrap; text-align:left}}
/* சுப முகூர்த்த page on phones, as the v18 mockup: each next day on three lines (date, Tamil date, then star / tithi /
   pirai), and the total and no-muhurtham-months tiles as full-width strips, label left and value right. */
@media (max-width:759px){
  .smn:not(.mdp):not(.pnd) .h4 .up a{grid-template-columns:1fr; gap:3px; min-width:0}
  .smn:not(.mdp):not(.pnd) .h4 .up a .mrow{min-width:0}
  .smn:not(.mdp):not(.pnd) .h4.h3 .t3,.smn:not(.mdp):not(.pnd) .h4.h3 .t4{grid-column:1 / -1; display:flex; align-items:center; gap:10px; padding:12px 15px}
  .smn:not(.mdp):not(.pnd) .h4.h3 .t3 small,.smn:not(.mdp):not(.pnd) .h4.h3 .t4 small{margin:0; flex:1 1 auto}
  .smn:not(.mdp):not(.pnd) .h4.h3 .t3 b{flex:0 0 auto}
  .smn:not(.mdp):not(.pnd) .h4.h3 .t3 > span{margin:0; flex:0 0 auto}
  .smn:not(.mdp):not(.pnd) .h4.h3 .t4 b{font-size:15px; text-align:right; max-width:60%}
}
/* No "next" tile (a past year): the remaining tiles share one row, each its own column. */
@media (min-width:760px){
  .smn .h4.h3.no-next .t3,.smn .h4.h3.no-next .t4{grid-column:auto; grid-row:auto}
  .smn .h4.h3.no-next{grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .smn .h4.h3.no-next.two{grid-template-columns:1fr}
}
.smn .sec .prose h3{font-size:15.5px; margin:16px 0 6px; color:var(--head)}
.smn .sec .prose ul{padding-left:20px; margin:0 0 10px}
.smn .sec .prose li{margin:0 0 6px; line-height:1.7}
.smn .sec .prose p{line-height:1.75}
.smn .sec .prose b{color:var(--head)}
.smn .note + .sec,.smn .sec + .note{margin-top:14px}

/* Phones: the table as on a viratham page (sirappu-naatkal.css #tbl): no pink header or outer box, cream every second row. */
@media (max-width:699px){
  .smn .tw{border:0; border-radius:0; overflow:visible}
  .smn table.tc thead{display:none}
  .smn table.tc{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .smn table.tc tr:nth-child(even) td{background:var(--cream)}
  .smn table.tc td{padding:12px 6px}
  .smn table.tc td:first-child{padding-left:0}
  .smn table.tc td:last-child{padding-right:0}
  .smn table.tc .dt{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:5px}
  .smn table.tc .dw{margin-left:0}
  /* Date as a viratham page: "19 August Wednesday", then the Tamil date and weekday in the body colour. */
  .smn table.tc .den{font-weight:600}
  .smn table.tc .dw{color:var(--head)}
  .smn table.tc .ds2{font-size:13.5px; color:var(--grey-head); margin-top:3px}
  .smn table.tc .ds2 .d1{color:var(--head); font-weight:500}
  /* The time first on its own line, the rest as outlined chips (the பௌர்ணமி page's .pl). */
  .smn table.tc .mrow{gap:5px}
  .smn table.tc .itm{margin:0; padding:2px 9px; border:1px solid var(--line); border-radius:var(--pill); font-size:12px; line-height:1.7; white-space:nowrap}
  .smn table.tc .itm svg{width:12px; height:12px}
  .smn table.tc .itm.nk{border-color:#B9D8C3}
  .smn table.tc .itm.sp{border-color:#E2B3A9}
  .smn table.tc .itm.sn{white-space:normal}
  .smn table.tc .itm.tm{order:-1; flex-basis:100%; padding:0; border:0; border-radius:0; font-size:14px; font-weight:600; white-space:normal}
  .smn table.tc .itm.tm svg{display:none}
}

/* Phones: a shorter subtitle. */
@media (max-width:760px){.smn .m-hide{display:none}}

/* ஆபரண / புதிய தொழில் முகூர்த்தம் (TMC-144 mockups): the selection rule as three cards, the day's steps numbered, and
   the special days table sized to its text. */
.smn .rule{display:grid; grid-template-columns:1fr; gap:8px; margin:8px 0 10px}
@media (min-width:800px){.smn .rule{grid-template-columns:repeat(3,1fr)}}
.smn .rule div{border:1px solid var(--line); border-radius:var(--radius-m); padding:10px 12px; font-size:13.5px; line-height:1.65; color:var(--grey)}
.smn .rule div b{display:block; color:var(--head); font-size:14.5px; margin-bottom:2px}
.smn .rule div.bad{border-color:#EAC9C2; background:#FFF8F6}
.smn .rule div.bad b{color:var(--rose-ink)}
.smn .steps{list-style:none; margin:0; padding:0; counter-reset:s; max-width:860px}
.smn .steps li{position:relative; padding:0 0 10px 40px; line-height:1.75}
.smn .steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:2px; width:28px; height:28px; border-radius:50%; background:var(--orange-soft); color:var(--orange-ink); font:700 14px var(--ff-num); display:grid; place-items:center}
.smn .steps li b{color:var(--head)}
.smn .sec table.kv.spd{table-layout:fixed}
.smn .sec table.kv.spd th:first-child,.smn .sec table.kv.spd td:first-child{white-space:normal; width:24%}
.smn .sec table.kv.spd th:nth-child(2),.smn .sec table.kv.spd td:nth-child(2){width:24%}
.smn .sec table.kv.spd td{overflow-wrap:anywhere}
@media (max-width:599px){.smn .sec table.kv.spd th,.smn .sec table.kv.spd td{font-size:13px; padding:7px 6px} .smn .sec table.kv.spd th:first-child,.smn .sec table.kv.spd td:first-child{width:28%}}

/* ஆபரண / புதிய தொழில் pages (user, 2026-10-13): the same text sizes on phones as on desktop — the desktop values
   for the title, headings, tiles, pills and tables (other pages keep the smaller phone scale). */
@media (max-width:759px){
  .tmc90.smn.same h1{font-size:32px; line-height:1.4}
  .tmc90.smn.same h2,.tmc90.smn.same .sec h2{font-size:21px; line-height:1.4}
  .tmc90.smn.same .sech h2{font-size:15.5px}
  .tmc90.smn.same .h4.h3 .t3 > span{text-align:left}
  .tmc90.smn.same .h4.h3 .t4 b{font-size:14px; line-height:1.5}
  .tmc90.tmc90.smn.same .pfil .pf{font-size:13.5px}
  .tmc90.smn.same table.tc .den{font-weight:700}
  .tmc90.smn.same table.tc .ds2{font-size:12.5px}
  .tmc90.smn.same table.tc .itm{font-size:13.5px}
  .tmc90.smn.same .sec table.kv.spd th{font-size:12.5px}
  .tmc90.smn.same .sec table.kv.spd td{font-size:14px}
}

/* குழந்தைக்கான சுப நாட்கள் (TMC-145, kuzhandhai-suba-natkal-2026-v22 mockup): the ceremony pills, one ceremony shown at a
   time, its about box, the child's-star panel, the rules box (folded on phones, open on desktop) and the tara tag. */
.smn.kz .pfil.cer{margin:10px 0 4px}
.smn.kz .pane{display:none}
.smn.kz .pane.on{display:block}
.smn.kz .h4 .t1 .seeall{display:inline-flex; align-items:center; margin-top:9px; font-size:13px; font-weight:600; color:var(--rose-ink); text-decoration:none}
.smn.kz .h4 .t1 .seeall:hover{text-decoration:underline}
.smn.kz .fold{border:1px solid var(--line); border-radius:14px; background:#fff; margin:0 0 10px}
.smn.kz .fold summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:12px 14px; font-size:14.5px; font-weight:500; color:var(--head); line-height:1.4}
.smn.kz .fold summary::-webkit-details-marker{display:none}
.smn.kz .fold summary .en,.smn.kz .fold summary .opt{font-size:12px; color:var(--muted); font-weight:500}
.smn.kz .fold summary .chev{margin-left:auto; width:9px; height:9px; border-right:2px solid var(--rose-ink); border-bottom:2px solid var(--rose-ink); transform:rotate(45deg); transition:transform .2s; flex:0 0 auto; margin-right:4px}
.smn.kz .fold[open] summary .chev{transform:rotate(-135deg); margin-top:5px}
.smn.kz .fold > div{padding:2px 14px 14px}
.smn.kz .fold.sp{background:#F5F3FA; border-color:#E4E0F0}
.smn.kz .fold.sp summary{color:#5E5A86}
.smn.kz .fold summary b{font-weight:600}
.smn.kz .pane h2 .en{font-size:12px; margin-left:6px; color:var(--muted); font-weight:500}
.smn.kz .abt{display:grid; grid-template-columns:1fr; gap:12px; margin:4px 0 0}
.smn.kz .abt-img svg{width:100%; max-width:230px; height:auto; display:block; border-radius:12px}
.smn.kz .abt .prose p{line-height:1.75; margin:0 0 8px}
@media (min-width:640px){.smn.kz .abt{grid-template-columns:200px 1fr; align-items:start}}
@media (min-width:760px){
  .smn.kz .pane .abtf{border:0; background:none; margin:0 0 6px}
  .smn.kz .pane .abtf summary{display:none}
  .smn.kz .pane .abtf > div{padding:0}
}
@media (max-width:759px){.smn.kz .abt-img{display:none} .smn.kz .fold summary .en{display:none} .smn.kz .fold summary{font-size:14px}}
.smn.kz .rulebox{display:grid; gap:0}
.smn.kz .rulebox .rl{display:grid; grid-template-columns:1fr; gap:2px; padding:9px 0; border-top:1px solid var(--rule); font-size:13.5px; line-height:1.6}
.smn.kz .rulebox .rl:first-child{border-top:0}
.smn.kz .rulebox .rl span{color:var(--muted); font-size:12.5px}
.smn.kz .rulebox .rl b{color:var(--head); font-weight:600}
.smn.kz .rulebox .rl.bad span{color:var(--rose-ink)}
@media (min-width:640px){.smn.kz .rulebox .rl{grid-template-columns:170px 1fr; gap:10px}}
.smn.kz .sp-sub{font-size:13px; color:var(--grey); line-height:1.65; margin:4px 0 10px}
.smn.kz .sp-row{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; align-items:end; min-width:0}
.smn.kz .sp-f{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); min-width:0}
.smn.kz .sp-row select{width:100%; min-width:0; max-width:100%; font:inherit; font-size:14px; padding:9px 10px; border:1px solid #D9D4E8; border-radius:10px; background:#fff; color:var(--head); min-height:42px}
.smn.kz .sp-clr{grid-column:1 / -1; font:inherit; font-size:13px; font-weight:600; color:#5E5A86; background:#fff; border:1px solid #D9D4E8; border-radius:var(--pill); padding:8px 14px; cursor:pointer}
@media (min-width:600px){.smn.kz .sp-row{grid-template-columns:1fr 1fr auto} .smn.kz .sp-clr{grid-column:auto; min-height:42px}}
.smn.kz .sp-note{font-size:13px; color:var(--grey); line-height:1.65; margin:10px 0 0}
.smn.kz .fchip{display:inline-flex; align-items:center; gap:6px; margin-left:8px; font:inherit; font-size:12px; font-weight:600; color:#5E5A86; background:#F5F3FA; border:1px solid #D9D4E8; border-radius:var(--pill); padding:3px 10px; cursor:pointer}
.smn.kz .fchip .fx{font-size:11px}
.smn.kz .itm.tm .mer{font-size:11px; color:var(--muted); margin-left:2px}
.smn.kz .itm.tp{border:1px solid transparent; border-radius:var(--pill); padding:0 8px}
.smn.kz .itm.tp.g{color:var(--green-ink); background:var(--green-soft); border-color:#CFE3D5}
.smn.kz .itm.tp.w{color:var(--rose-ink); background:var(--rose); border-color:#EFCFC8}
.smn.kz .tfoot{font-size:13px; color:var(--grey); line-height:1.7; margin:8px 2px 0}
/* The three ceremony pills wrap on phones (the shared pill row keeps one line). */
@media (max-width:759px){.tmc90.tmc90.smn.kz .pfil.cer{flex-wrap:wrap}}

/* ஆபரண / புதிய தொழில் pages: the mockups' own fonts (user, 2026-10-13) — Anek Tamil for Tamil text, Inter for numbers and
   English — in place of the site's Noto Sans Tamil. The fonts are loaded by the two pages themselves. */
.tmc90.tmc90.tmc90.smn.same{--ff-ta:'Anek Tamil','Noto Sans Tamil',system-ui,sans-serif; --ff-num:'Inter','Noto Sans Tamil',system-ui,sans-serif; font-family:var(--ff-ta)}