/* Kachhua v8.5 layout — load LAST on every page (after kachhua-v84-surface.css).
   Owner rulings O-3/O-4/O-14: every stock page has the same structure; one border level per section; headings
   centred; text fills its box; paired items share equal columns; nothing internal reaches the page.
   (c) 2026 Kachhua Niveshak · Akshay Upadhyay. */

:root { --k5-gap: 12px; --k5-r: 16px; --k5-pad: 16px; --panel2: var(--sunken); --muted: var(--ink2); --serif: var(--display); --m-qwen: #6D4AA8; }
@media (prefers-color-scheme: dark) { :root { --m-qwen: #B69CF0; } }

/* ---------- page rhythm and alignment ---------- */
main.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.sec { margin-top: 28px; }
.sec > h2 { text-align: center; }
.sec > h2[style*="flex"], section:has(> h2[data-t="rulebooks"]) > h2, section:has(> h2[data-t="checks"]) > h2 { justify-content: center; }
.sec > h2 + p { text-align: center; margin: 6px auto 14px; max-width: 60ch; color: var(--ink2); font-size: 14px; line-height: 1.5; }
.legend { justify-content: center; }
.card, .decision { width: 100%; }
#reading .reading { text-align: center; margin: 6px 0 12px; }
footer.foot { text-align: center; justify-items: center; }

/* Body text uses the full width of its box (Owner preference: aligned and justified). */
.card > p, .card.pad > p, .decision .why, .list > .li > span, .k5-card > p, .k5-block > p, .risk p {
  text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; }
:lang(hi) .card p, :lang(hi) .decision .why, :lang(hi) .li > span, :lang(hi) .k5-card p { -webkit-hyphens: manual; hyphens: manual; }
.k5-center, .k5-teaser p, .k5-wait, .k5-fulllist, .k5-small { text-align: center !important; }

/* ---------- rulebook cards ---------- */
/* The ".nums" grid meant for "Today's numbers" also caught the score line and squeezed it into half the width. */
.side .nums { display: block; font-size: 13px; line-height: 1.45; }
.side .nums b { font-size: 18px; margin-right: 2px; }
.side .lens { min-height: 0; margin-bottom: 2px; }
.side .why, .side .nums { text-align: left; }
.side .chip { width: 100%; }
.models { gap: 14px; }
.models .model { padding: 14px 16px 16px; }
.model .mh { gap: 8px; flex-wrap: wrap; }
.k5-trial { font-size: 12px; font-weight: 600; color: var(--goldI); background: var(--goldT); border-radius: 999px; padding: 3px 10px; }
.k5-fulllist { margin-top: 12px; font-size: 13px; color: var(--ink2); }

/* ---------- one border level: nothing boxed inside a box ---------- */
.card .card, .card .entry-map, .card .risk-stop, .card details.adv, .decision .card { border: 0 !important; box-shadow: none; background: transparent; padding: 0; }
details.adv { border: 0; padding: 0; }

/* Tiles fill their row instead of leaving a gap on the right. */
.advgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important; }
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles .chk { min-width: 0; }

/* Chips and pills: text centred on both axes. */
.chip, .pill { justify-content: center; text-align: center; }

/* ---------- timing card (kachhua-v85-stock.js) ---------- */
.k5-card { padding: var(--k5-pad); display: grid; gap: 14px; }
.k5-lights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.k5-light { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 12px; border-left: 5px solid var(--tone, var(--line2)); background: color-mix(in srgb, var(--tone-bg, var(--sunken)) 70%, var(--sunken)); }
.k5-light b { font-size: 14px; line-height: 1.3; color: var(--tone-ink, var(--ink)); }
.k5-light span { font-size: 12px; line-height: 1.35; color: var(--ink2); }
#entryDecisionLight .k5-light { background: rgba(255, 255, 255, .92); }
#entryDecisionLight .k5-light span { color: #46514E; }
.k5-note { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; }
.k5-note span { font-size: 13px; color: var(--ink2); }
.k5-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.k5-gauge { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; min-height: 118px; padding: 14px 10px; border-radius: 14px; }
.k5-gauge.t-green, .k5-gauge.t-yellow, .k5-gauge.t-red { border-left: 0; border-top: 5px solid var(--tone); }
.k5-num { font: 600 36px/1 var(--display); letter-spacing: -.02em; color: var(--ink) !important; white-space: nowrap; }
.k5-num small { font: 600 15px var(--body); color: var(--ink3); margin-left: 2px; }
.k5-cap { font-size: 12px; font-weight: 600; color: var(--ink3); }
.k5-sub { font-size: 13px; font-weight: 600; color: var(--tone-ink, var(--ink2)); }
.k5-wait { font-size: 13px; color: var(--goldI); margin: -4px 0 0; }
.k5-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 12px; color: var(--ink3); text-align: center; }
.k5-trends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.k5-trends > div { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 10px 12px; border-radius: 12px; background: var(--sunken); }
.k5-tp { font-size: 17px; font-weight: 600; }
.k5-tp.up { color: var(--up); } .k5-tp.down { color: var(--dn); } .k5-tp.side { color: var(--gold); } .k5-tp.na { color: var(--ink3); font-size: 14px; }
.k5-cats { display: grid; gap: 10px; }
.k5-cat-h { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.k5-cat-h em { font-style: normal; font-weight: 400; color: var(--goldI); }
.k5-bar { height: 8px; margin-top: 4px; border-radius: 4px; overflow: hidden; background: var(--sunken); }
.k5-bar i { display: block; height: 100%; background: var(--acc, var(--green)); }
.k5-cat-A { --acc: var(--m-chatgpt); } .k5-cat-B { --acc: var(--m-perplexity); } .k5-cat-C { --acc: var(--m-deepseek); } .k5-cat-D { --acc: var(--m-grok); }
.k5-block { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.k5-block h3 { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; text-align: center; font: 600 17px var(--display); }
.k5-block h3 span { font: 400 12px var(--body); color: var(--ink3); }
.k5-stop { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px 14px; border-radius: 12px; background: var(--riskT); }
.k5-stop span { font-size: 13px; font-weight: 600; color: var(--ink2); }
.k5-stop b { font: 600 28px/1.1 var(--display); }
.k5-stop small { font-size: 12px; color: var(--ink2); }
.k5-kv { margin: 0; display: grid; }
.k5-kv > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.k5-kv > div:first-child { border-top: 0; }
.k5-kv dt { font-size: 13px; color: var(--ink2); }
.k5-kv dd { margin: 0; display: grid; gap: 2px; text-align: right; }
.k5-kv dd b { font-size: 15px; }
.k5-kv dd small { font-size: 12px; color: var(--ink3); }
.k5-hold { padding: 12px 14px; border-top: 0; border-radius: 12px; }
.k5-hold h3 { color: var(--tone-ink, var(--ink)); }
.k5-exit { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); font-size: 13px; }
.k5-exit small { font-size: 12px; color: var(--ink2); }
details.k5-more { border-top: 1px solid var(--line); }
details.k5-more > summary { min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--green); }
details.k5-more > summary::-webkit-details-marker { display: none; }
details.k5-more > summary::after { content: '▾'; margin-left: 6px; font-size: 12px; }
details.k5-more[open] > summary::after { content: '▴'; }
details.k5-more > p { font-size: 13px; color: var(--ink2); margin: 0 0 10px; }
.k5-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.k5-row .n { display: grid; gap: 2px; min-width: 0; }
.k5-row .n b { font-size: 14px; line-height: 1.3; }
.k5-row .n small { font-size: 12px; color: var(--ink3); line-height: 1.35; overflow-wrap: anywhere; }
.k5-row .chip { flex-shrink: 0; max-width: 46%; }
.k5-small { font-size: 12px; color: var(--ink3); margin: 0 0 8px; }

/* ---------- scoring summary, advanced research ---------- */
.k5-states .st b { gap: 10px; }
.k5-adv .k5-teaser { display: grid; gap: 14px; justify-items: center; padding: 18px 16px; }
.k5-adv .k5-teaser p { font-size: 14px; color: var(--ink2); }
.k5-member { padding: var(--k5-pad); display: grid; gap: 14px; }
.k5-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.k5-tile { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 12px; border-radius: 12px; background: var(--sunken); }
.k5-tile span { font-size: 12px; color: var(--ink3); }
.k5-tile b { font: 600 20px var(--display); }
.k5-rb { align-items: flex-start; }
.k5-rbs { display: grid; grid-template-columns: auto auto; gap: 2px 10px; justify-items: end; font-size: 13px; }
.k5-rbs small { color: var(--ink3); justify-self: start; }
#advanced > .sec { margin-top: 28px; }

/* ---------- narrow phones (320–374 px) ---------- */
@media (max-width: 374px) {
  .k5-lights { grid-template-columns: 1fr; }
  .k5-kv > div { grid-template-columns: 1fr; gap: 4px; }
  .k5-kv dd { text-align: left; }
  .k5-num { font-size: 30px; }
  .tiles { grid-template-columns: 1fr; }
}
@media (min-width: 900px) { .k5-card, .k5-member { padding: 20px; } }

/* ---------- O-15 data disclaimer, O-16 member uploads ---------- */
.k5-datanote { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; text-align: center; color: var(--goldI); background: var(--goldT); }
.decision .k5-datanote-d { color: #F4E8CC; }
.k5-upload .k5-upform { display: grid; gap: 8px; }
.k5-upload select, .k5-upload input[type="file"] { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; }
.k5-upload .btn { justify-self: center; justify-content: center; min-width: 50%; }

/* Goal 1 (clarity): one ladder of price levels; one verdict with its three inputs. No box inside the ladder. */
.k5-ladder { list-style: none; margin: 0; padding: 0; display: grid; }
.k5-lv { display: grid; grid-template-columns: minmax(104px, 36%) minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 8px 10px 10px; border-top: 1px solid var(--line); border-left: 4px solid transparent; }
.k5-lv:first-child { border-top: 0; }
.k5-lv > b { font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.k5-lv > div { display: grid; gap: 2px; min-width: 0; }
.k5-lv span { font-size: 13px; line-height: 1.35; color: var(--ink2); }
.k5-lv small { font-size: 12px; line-height: 1.35; color: var(--ink3); overflow-wrap: anywhere; }
.k5-lv-close { border-left-color: var(--ink2); background: var(--sunken); }
.k5-lv-close > b, .k5-lv-close span { font-weight: 600; color: var(--ink); }
.k5-lv-stop > b { font-size: 18px; }
.k5-inputs { list-style: none; margin: 6px 0 0; padding: 8px 0 0; display: grid; gap: 5px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.k5-inputs li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1.35; }
.k5-inputs li span { color: #46514E; }
.k5-inputs li b { text-align: right; font-size: 13px; }
.k5-inputs .k5-in-green { color: var(--c-green); } .k5-inputs .k5-in-yellow { color: var(--c-yellow-ink); } .k5-inputs .k5-in-red { color: var(--c-red); }
.k5-lights.k5-lights-one { grid-template-columns: 1fr; }
#decision .pill[hidden], #decision h2[hidden] { display: none !important; }
.k5-lv.t-red { border-left-color: var(--tone); }

/* ---------- Goal 3 (O-42): visual layer. Colour always means the same thing:
   green favourable, amber wait or watch, red exit or avoid. Shapes repeat the meaning for colour-blind readers. ---------- */
.k8-green { --k8c: var(--c-green); --k8bg: var(--c-green-bg); --k8i: var(--c-green); }
.k8-yellow { --k8c: var(--c-yellow); --k8bg: var(--c-yellow-bg); --k8i: var(--c-yellow-ink); }
.k8-red { --k8c: var(--c-red); --k8bg: var(--c-red-bg); --k8i: var(--c-red); }

/* traffic-light picture on the Entry light and the Holding light */
.k8-lamp { justify-self: start; margin-bottom: 2px; }
.k8-lamp-box { fill: #1B2422; }
.k8-lamp circle { opacity: .2; }
.k8-lamp circle.on { opacity: 1; }
.k8-l-red { fill: #E0553F; } .k8-l-yellow { fill: #E9B93A; } .k8-l-green { fill: #3FBF74; }

/* what to do: two groups of three coloured rules, today's rule marked */
.k8-plan { border-top: 0; padding-top: 0; }
.k8-groups { display: grid; gap: 14px; }
.k8-group h4 { margin: 0 0 6px; text-align: center; font: 600 13px var(--body); color: var(--ink3); }
.k8-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.k8-rule { display: grid; grid-template-columns: minmax(92px, 30%) minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px; border-radius: 10px; border-left: 5px solid var(--k8c); background: var(--sunken); }
.k8-rule:not(.on) { opacity: .74; }
.k8-rule.on { background: color-mix(in srgb, var(--k8bg) 82%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k8c) 50%, transparent); }
.k8-word { display: grid; gap: 4px; justify-items: start; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--k8i); }
.k8-word em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1; padding: 3px 8px; border-radius: 999px; color: #fff; background: var(--k8c); }
.k8-yellow .k8-word em { color: #1B2422; }
.k8-text { font-size: 13px; line-height: 1.45; color: var(--ink2); }
.k8-rule.on .k8-text { color: var(--ink); }
.k8-px { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 760px) { .k8-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* price chart */
.k8-chartbox { gap: 8px; }
.k8-chart { display: block; width: 100%; height: auto; }
.k8-grid { stroke: var(--line); stroke-width: 1; }
.k8-axis { font: 10px var(--body); fill: var(--ink3); }
.k8-range { fill: var(--ink); opacity: .09; }
.k8-close { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.k8-avg { fill: none; stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 3 3; }
.k8-level { stroke-width: 1.6; }
.k8-level.k8-go { stroke: var(--c-green); } .k8-level.k8-hold { stroke: var(--c-yellow); } .k8-level.k8-risk { stroke: var(--c-red); }
.k8-level.dash { stroke-dasharray: 7 4; } .k8-level.dot { stroke-dasharray: 2 3; }
.k8-band.k8-hold { fill: var(--c-yellow); opacity: .24; }
.k8-mark.k8-go { fill: var(--c-green); } .k8-mark.k8-hold { fill: var(--c-yellow); } .k8-mark.k8-risk { fill: var(--c-red); }
.k8-mark { stroke: var(--card); stroke-width: 1; }
.k8-last { fill: var(--ink); stroke: var(--card); stroke-width: 1.5; }
.k8-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12px; color: var(--ink2); }
.k8-legend li { display: flex; align-items: center; gap: 6px; }
.k8-sw { display: inline-block; flex: none; width: 16px; height: 0; border-top: 2px solid currentColor; color: var(--ink); }
.k8-sw.k8-avg { border-top: 1px dashed currentColor; color: var(--ink3); }
.k8-sw.k8-go { color: var(--c-green); } .k8-sw.k8-hold { color: var(--c-yellow); } .k8-sw.k8-risk { color: var(--c-red); }
.k8-sw.k8-dash { border-top-style: dashed; } .k8-sw.k8-dot { border-top-style: dotted; }
.k8-sw.k8-band { height: 8px; border-top: 0; background: currentColor; opacity: .4; }
.k8-sw.k8-mark-up { width: 0; border: 5px solid transparent; border-top: 0; border-bottom: 8px solid currentColor; }
.k8-sw.k8-mark-down { width: 0; border: 5px solid transparent; border-bottom: 0; border-top: 8px solid currentColor; }
.k8-sw.k8-mark-dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: currentColor; }

/* price ladder: the colour of what crossing a level means, and the two nearest levels tagged */
.k5-lv.k8-m-go { border-left-color: var(--c-green); } .k5-lv.k8-m-go > b { color: var(--c-green); }
.k5-lv.k8-m-hold { border-left-color: var(--c-yellow); } .k5-lv.k8-m-hold > b { color: var(--c-yellow-ink); }
.k5-lv.k8-m-risk { border-left-color: var(--c-red); } .k5-lv.k8-m-risk > b { color: var(--c-red); }
.k8-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; color: #fff; background: var(--k8c); }

/* meters under the timing score and the confirmation reading */
.k5-gauge .k8-meter { position: relative; width: 100%; height: 12px; margin-top: 6px; }
.k8-zones { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.k8-zones i { display: block; height: 100%; opacity: .6; }
.k8-z-red { background: var(--c-red); } .k8-z-yellow { background: var(--c-yellow); } .k8-z-green { background: var(--c-green); }
.k8-z-lgreen { background: color-mix(in srgb, var(--c-green) 55%, var(--c-yellow)); }
.k8-pin { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--card); }
.k8-scale { font-size: 10.5px; line-height: 1.35; color: var(--ink3); }

/* coverage ring for the 152 checks */
.k8-ring { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 12px; }
.k8-ring-bg { fill: none; stroke: var(--sunken); stroke-width: 8; }
.k8-ring-fg { fill: none; stroke-width: 8; stroke-linecap: round; stroke: var(--k8c); }
.k8-ring-t { font: 600 16px var(--body); fill: var(--ink); }
.k8-ring b { display: block; font: 600 17px var(--display); }
.k8-ring span { display: block; font-size: 13px; line-height: 1.4; color: var(--ink2); }
@media (max-width: 374px) { .k8-rule { grid-template-columns: 1fr; gap: 4px; } }