/* வேற்றுமை உருபு — Case-ending lab (js/views/cases.js) */
.cases { display: grid; gap: 18px; min-width: 0; }
.cases .ml { font-family: var(--f-ml); }
.cases .en { font-family: var(--f-ui); }
.cs-muted { margin: 0; color: var(--ink-3); font-size: .92rem; }
.cs-muted .icon { width: 16px; height: 16px; vertical-align: -3px; }
.cs-mini { margin: 0 0 6px; font: 700 .8rem var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cs-mini .ml { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink-2); }
.cs-mini .en { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cs-card { display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); min-width: 0; }
.cs-card > .sec-title { margin: 0; }
.cs-src { margin: 0; font-size: .78rem; color: var(--ink-3); }
.cases .chip { white-space: normal; }
.cases .btn { white-space: normal; }

.cs-grades, .cs-toggles, .cs-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-grades { margin-top: 10px; }
.cs-grades .pp-toggle, .cs-toggles .pp-toggle, .cs-filter .pp-toggle { min-height: 44px; }
.cs-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-links .btn { min-height: 44px; }

/* This week */
.cs-now { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 2px solid var(--peacock-soft); box-shadow: var(--shadow-1); min-width: 0; }
.cs-now-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.cs-now .eyebrow { margin: 0; }
.cs-now h2 { margin: 0; font-family: var(--f-display); font-size: 1.45rem; overflow-wrap: anywhere; }
.cs-now-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 20px; }
.cs-pick { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); flex-wrap: wrap; min-width: 0; }
.cs-select { min-height: 44px; max-width: 100%; min-width: 0; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 .95rem var(--f-ui); }
.cs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-noun-chip { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); border: 2px solid var(--peacock); background: var(--peacock-soft); color: var(--peacock-deep); text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.cs-noun-chip .en { font-weight: 500; font-size: .82rem; color: var(--ink-2); }
.cs-noun-chip:hover { background: var(--surface); }
.cs-noun-chip[aria-current="page"] { background: var(--peacock); color: var(--on-peacock); }
.cs-noun-chip[aria-current="page"] .en { color: var(--on-peacock); }
.cs-echip { font-size: 1rem; padding: .3em .9em; background: var(--zari-soft); color: var(--zari-deep); }
.cs-echip .ml { font-weight: 700; }

/* What is a case ending */
.cs-def { margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.7; }
.cs-idea > p { margin: 0; }
.cs-demo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.cs-demo-w { display: grid; gap: 2px; justify-items: start; padding: 10px 12px; min-height: 58px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; text-align: left; }
.cs-demo-w:hover { border-color: var(--peacock); }
.cs-demo-w .cs-form { font-size: 1.15rem; }
.cs-demo-w .en { font-size: .8rem; color: var(--ink-2); }

/* The changed part of a form */
.cs-form { font-weight: 700; }
.cs-hl { background: var(--zari-soft); color: var(--zari-deep); border-radius: 6px; padding: 0 2px; box-shadow: inset 0 -3px 0 var(--zari); }

/* Endings table */
.cs-endings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cs-ending { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.cs-ending-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-case { font-weight: 700; color: var(--peacock-deep); }
.cs-case .en { font-weight: 500; font-size: .82rem; color: var(--ink-3); }
.cs-ending-ml { font-family: var(--f-display); font-size: 1.7rem; line-height: 1; color: var(--kumkum); }
.cs-ending-en { margin: 0; font-size: .92rem; color: var(--ink-2); }
.cs-q { margin: 0; font-size: .95rem; }
.cs-q-l { font-weight: 700; color: var(--ink-3); font-size: .82rem; }
.cs-ex { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; width: 100%; padding: 8px 12px; min-height: 44px; border-radius: 12px; border: 1px dashed var(--line-2); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.cs-ex:hover { border-color: var(--peacock); }
.cs-ex .ml { font-size: 1rem; line-height: 1.6; }
.cs-ex .en { grid-column: 1; font-size: .82rem; color: var(--ink-2); }
.cs-ex .icon { grid-row: 1 / span 2; grid-column: 2; width: 18px; height: 18px; color: var(--peacock); }
.cs-note, .cs-book { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: .88rem; color: var(--ink-2); }
.cs-note .icon, .cs-book .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--zari-deep); }
.cs-book { padding: 8px 10px; border-radius: 10px; background: var(--zari-soft); color: var(--ink); }

/* Joining rules */
.cs-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cs-rule { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); border-left: 5px solid var(--peacock); background: var(--surface-2); min-width: 0; }
.cs-rule h3 { margin: 0; font-size: 1.1rem; }
.cs-rule h3 .ml { color: var(--peacock-deep); }
.cs-rule h3 .en { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.cs-rule p { margin: 0; font-size: .92rem; }
.cs-rule .pp-eq-part { min-height: 40px; }

/* Weeks */
.cs-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.cs-week { position: relative; display: grid; gap: 4px; align-content: start; min-height: 104px; padding: 12px 14px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.cs-week:hover { border-color: var(--peacock); }
.cs-week-n { display: flex; align-items: baseline; gap: 6px; font-size: .85rem; color: var(--ink-3); }
.cs-week-n b { font-family: var(--f-display); font-size: 1.5rem; color: var(--ink); line-height: 1; }
.cs-week-nouns { font-weight: 700; overflow-wrap: anywhere; }
.cs-week-ends { font-size: .85rem; color: var(--ink-2); overflow-wrap: anywhere; }
.cs-week-st { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 700; color: var(--zari-deep); }
.cs-week-st .icon { width: 16px; height: 16px; }
.cs-week.is-done { background: var(--leaf-soft); border-color: var(--leaf); }
.cs-week.is-done .cs-week-st { color: var(--leaf); }
.cs-week.is-current { box-shadow: 0 0 0 3px var(--peacock); }

/* Lab: picker */
.cs-search-row { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-radius: var(--r-pill); border: 2px solid var(--line-2); background: var(--surface-2); }
.cs-search-row:focus-within { border-color: var(--peacock); }
.cs-search-row .icon { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.cs-search { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: 600 1.05rem var(--f-ml); }
.cs-search:focus { outline: none; }
.cs-search-row:has(.cs-search:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.cs-thisweek { display: grid; gap: 6px; }
.cs-all > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.cs-group { margin-top: 12px; }
.cs-picker .pp-word { text-decoration: none; }
.cs-picker .pp-word[aria-current="page"] { border-color: var(--peacock); background: var(--peacock-soft); }

/* Lab: one noun */
.cs-noun { display: grid; gap: 14px; min-width: 0; }
.cs-noun-head { display: grid; gap: 10px; padding: 20px 22px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--peacock-soft), var(--surface) 75%); border: 1px solid var(--line); min-width: 0; }
.cs-noun-title h1 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--f-display); font-size: clamp(2rem, 6vw, 2.8rem); color: var(--peacock-deep); }
.cs-noun-en { margin: 0; color: var(--ink-2); }
.cs-stem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-stem-from, .cs-stem-to { font-size: 1.25rem; font-weight: 700; }
.cs-stem-to { color: var(--zari-deep); }
.cs-arrow { color: var(--ink-3); font-weight: 700; }
.cs-in-weeks { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ink-2); font-size: .9rem; }
.cs-in-weeks .chip { text-decoration: none; min-height: 32px; }
.cs-how > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 6px; color: var(--peacock-deep); }
.cs-how > summary .icon { width: 18px; height: 18px; }
.cs-how .cs-rules { margin-top: 8px; }
.cs-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.cs-rows.only-week .cs-row:not(.is-week) { display: none; }
.cs-row { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); min-width: 0; }
.cs-row.is-week { border: 2px solid var(--zari); }
.cs-row > p { margin: 0; }
.cs-row-case { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cs-row-case .en { font-size: .8rem; color: var(--ink-3); }
.cs-row-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cs-plus { color: var(--ink-2); font-size: 1rem; }
.cs-say { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 12px; border-radius: 14px; border: 2px solid var(--peacock-soft); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.cs-say:hover { border-color: var(--peacock); }
.cs-say .cs-form { font-size: 1.45rem; }
.cs-say .icon { width: 18px; height: 18px; color: var(--peacock); }
.cs-none { font-size: .88rem; color: var(--ink-3); }
.cs-alt { font-size: .9rem; color: var(--ink-2); }
.cs-why { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-why .chip { background: var(--peacock-soft); color: var(--peacock-deep); }
.cs-template { display: flex; gap: 6px; align-items: baseline; font-size: .9rem; color: var(--ink-2); margin: 0; }
.cs-template .icon { width: 16px; height: 16px; flex: none; align-self: center; }
.cs-template .en { color: var(--ink-3); }

/* Drill */
.cs-setup-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.cs-run { gap: 14px; }
.cs-bar { height: 8px; border-radius: 99px; background: var(--ring-track); overflow: hidden; }
.cs-bar span { display: block; height: 100%; width: 0; background: var(--peacock); border-radius: inherit; transition: width .3s var(--ease); }
.cs-q-box { display: grid; gap: 14px; min-width: 0; }
.cs-prompt { display: grid; gap: 8px; justify-items: center; text-align: center; }
.cs-prompt > p { margin: 0; }
.cs-prompt-case .ml { font-weight: 700; color: var(--peacock-deep); }
.cs-prompt-case .en { font-size: .85rem; color: var(--ink-3); }
.cs-prompt-eq { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; }
.cs-prompt-noun { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.9rem, 7vw, 2.6rem); color: var(--ink); }
.cs-prompt-end { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 6vw, 2.3rem); color: var(--kumkum); }
.cs-op { font-size: 1.6rem; font-weight: 700; color: var(--ink-3); }
.cs-blank { display: inline-grid; place-items: center; min-width: 64px; min-height: 48px; border-radius: 12px; border: 2px dashed var(--line-2); color: var(--ink-3); font-size: 1.4rem; font-weight: 700; }
.cs-prompt-q { color: var(--ink-2); }
.cs-hint { max-width: 60ch; padding: 8px 12px; border-radius: 12px; background: var(--peacock-soft); color: var(--ink); font-size: .92rem; text-align: left; }
.cs-fill { justify-content: center; }
.cs-fill .btn { min-height: 44px; }
.cs-input { max-width: 360px; font-size: 1.3rem; }
.cs-kbd { flex-basis: 100%; text-align: center; }
.cs-opts .quiz-opt { justify-items: center; text-align: center; padding: 14px 44px; }
.cs-opts .quiz-opt-ml { font-size: 1.35rem; font-weight: 700; }
.cs-fb { display: grid; gap: 8px; justify-items: center; text-align: center; font-weight: 600; }
.cs-fb:empty { display: none; }
.cs-fb > p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.cs-fb .icon { width: 20px; height: 20px; }
.cs-explain { display: grid; gap: 6px; justify-items: center; }
.cs-explain p { margin: 0; }
.cs-answer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.cs-answer .cs-form { font-size: 1.6rem; }
.cs-explain .cs-why { justify-content: center; }
.cs-explain .cs-book { text-align: left; max-width: 60ch; }
.cs-after { display: grid; gap: 12px; justify-items: center; }
.cs-after:empty { display: none; }
.cs-sentence { width: 100%; display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.cs-sentence > p { margin: 0; }
.cs-sent-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cs-sent-h .icon { width: 18px; height: 18px; color: var(--peacock); }
.cs-sent-h .ml { font-weight: 700; font-size: 1.15rem; color: var(--peacock-deep); }
.cs-sent { width: 100%; min-height: 64px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 1.1rem/1.6 var(--f-ml); resize: vertical; box-sizing: border-box; }
.cs-sent:focus-visible { border-color: var(--peacock); }
.cs-sentence .btn { justify-self: start; min-height: 44px; }
.cs-next { min-width: 160px; }

/* Answer sheet */
.cs-sheet { display: grid; gap: 12px; margin-top: 8px; }
.cs-sheet .sec-title { margin: 0; }
.cs-sheet-noun { padding: 12px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.cs-sheet-noun h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 1.3rem; }
.cs-sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs-sheet-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.cs-sheet-list b { color: var(--peacock-deep); font-size: 1.08rem; }
.cs-sheet-mark .icon { width: 16px; height: 16px; vertical-align: -2px; }
.cs-sheet-list .is-ok .cs-sheet-mark { color: var(--leaf); }
.cs-sheet-list .is-miss .cs-sheet-mark { color: var(--zari-deep); }
.cs-sheet-sent { flex-basis: 100%; margin: 0 0 4px 22px; color: var(--ink-2); }

/* Dark theme: the gold highlight needs a deeper ground */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cs-hl { background: color-mix(in srgb, var(--zari) 22%, transparent); color: var(--ink); } }
:root[data-theme="dark"] .cs-hl { background: color-mix(in srgb, var(--zari) 22%, transparent); color: var(--ink); }

/* High contrast: never rely on tint alone */
:root[data-contrast="high"] .cs-hl { background: transparent; color: var(--ink); box-shadow: none; text-decoration: underline 3px; text-underline-offset: 4px; }
:root[data-contrast="high"] .cs-row, :root[data-contrast="high"] .cs-ending, :root[data-contrast="high"] .cs-rule, :root[data-contrast="high"] .cs-week, :root[data-contrast="high"] .cs-card, :root[data-contrast="high"] .cs-now { border-color: var(--ink); }
:root[data-contrast="high"] .cs-row.is-week { border-width: 3px; }
:root[data-contrast="high"] .cs-noun-chip { border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .cs-bar span { transition: none; } }
:root[data-motion="reduced"] .cs-bar span { transition: none; }

@media (max-width: 560px) {
  .cs-card, .cs-now { padding: 14px; }
  .cs-noun-head { padding: 16px; border-radius: var(--r-lg); }
  .cs-select { width: 100%; }
  .cs-pick { width: 100%; }
}
.cs-picker .pp-word-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); }