/* 🔁 منزل tab (modules/srs.js) — all selectors prefixed .srs- */
.srs-tab { direction: rtl; }
.srs-card { background: var(--card); border: 1px solid #ffffff22; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
body.light .srs-card { color: #1b2a22; border-color: #00000022; }
.srs-h { margin: 0 0 6px; color: var(--gold); font-size: 15px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
body.light .srs-h { color: #8a6a10; }
.srs-sub { color: var(--muted); font-size: 12px; font-weight: normal; line-height: 1.6; }
body.light .srs-sub { color: #5b6e63; }
.srs-card .row label { min-width: 62px; }
body.light .srs-card .row label, body.light .srs-card .note { color: #5b6e63; }
.srs-card .row select, .srs-card .row input[type=time] { flex: 1; min-width: 0; }

/* progress */
.srs-prog { display: flex; gap: 12px; align-items: center; }
.srs-ring { width: 88px; height: 88px; flex: 0 0 88px; }
.srs-ring-bg { fill: none; stroke: #ffffff18; stroke-width: 8; }
body.light .srs-ring-bg { stroke: #00000014; }
.srs-ring-fg { fill: none; stroke: var(--gold); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .4s; }
.srs-ring-n { fill: var(--gold); font-size: 15px; font-weight: 700; }
.srs-ring-s { fill: var(--muted); font-size: 10px; }
.srs-prog-txt { flex: 1; line-height: 1.7; font-size: 13.5px; }
.srs-prog-txt b { color: var(--gold); }
body.light .srs-prog-txt b, body.light .srs-ring-n { color: #8a6a10; fill: #8a6a10; }

/* today's plan */
.srs-step { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; cursor: pointer; font-size: 14.5px; }
.srs-step input { width: 18px; height: 18px; accent-color: var(--accent); }
.srs-stepbody { margin: 0 24px 6px 0; font-size: 13px; line-height: 1.8; }
.srs-celebrate { margin-top: 8px; padding: 8px; border-radius: 10px; text-align: center; background: #3fa36b33;
  border: 1px solid var(--gold); color: var(--gold); font-weight: 600; animation: srs-glow 2s ease-in-out infinite; }
body.light .srs-celebrate { color: #6b520c; }
@keyframes srs-glow { 50% { box-shadow: 0 0 12px #d4af3766; } }

/* chips / small buttons */
.srs-chip { font-size: 12px; padding: 2px 8px; margin: 2px; border-radius: 12px; }
.srs-small { font-size: 12.5px; padding: 5px 9px; margin: 3px 0; }
.srs-small.srs-on { background: #2f7d4f; border-color: var(--gold); }
.srs-small:disabled { opacity: .8; cursor: default; }
.srs-row2 { display: flex; gap: 6px; }
.srs-row2 > button { flex: 1; }
.srs-spread { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.srs-warn { color: #e0a43a; font-size: 12.5px; margin: 4px 0; }
.srs-empty { color: var(--muted); text-align: center; margin: 10px 0; line-height: 1.7; }
body.light .srs-empty { color: #5b6e63; }

/* manzil list */
.srs-list { margin-top: 6px; }
.srs-item { border: 1px solid #ffffff1c; border-radius: 10px; padding: 7px 8px; margin: 6px 0; background: #ffffff06; }
body.light .srs-item { border-color: #0000001c; background: #00000005; }
.srs-item.srs-opened { border-color: var(--gold); }
.srs-item.srs-isdone { opacity: .75; }
.srs-ihead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; cursor: pointer; }
.srs-ihead:hover .srs-ipg { text-decoration: underline; }
.srs-ipg { font-weight: 700; color: var(--gold); font-size: 14.5px; }
body.light .srs-ipg { color: #8a6a10; }
.srs-imeta { color: var(--muted); font-size: 12.5px; }
body.light .srs-imeta { color: #5b6e63; }
.srs-badge { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: #ffffff18; }
body.light .srs-badge { background: #00000012; }
.srs-weak { background: #8a3a3255; } .srs-late { background: #8a742055; } .srs-new { background: #2f7d4f55; }
.srs-ibtns { display: flex; gap: 4px; margin-top: 6px; }
.srs-mini { padding: 4px 6px; font-size: 13px; }
.srs-gbtn { flex: 1; padding: 5px 2px; font-size: 12.5px; white-space: nowrap; color: #fff; }
.srs-g0 { background: #8a3a32; } .srs-g1 { background: #8a6420; } .srs-g2 { background: #2f6d7d; } .srs-g3 { background: #2f7d4f; }
.srs-g0:hover { background: #a3463c; } .srs-g1:hover { background: #a37828; } .srs-g2:hover { background: #3a8294; } .srs-g3:hover { background: #3a945e; }
.srs-idone { margin-top: 4px; font-size: 12.5px; color: var(--accent); }

/* heatmap: 12 columns (weeks) x 7 rows; RTL so the newest week is on the left */
.srs-heat-wrap { display: flex; gap: 4px; direction: rtl; align-items: flex-start; }
.srs-heat-days { display: grid; grid-template-rows: repeat(7, 15px); row-gap: 3px; font-size: 9.5px; color: var(--muted); line-height: 15px; }
.srs-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 15px); grid-auto-columns: 15px; gap: 3px; direction: rtl; }
.srs-hc { display: inline-block; width: 15px; height: 15px; border-radius: 3px; background: #ffffff12; }
body.light .srs-hc.srs-l0 { background: #00000014; }
.srs-hc.srs-l1 { background: #3fa36b55; } .srs-hc.srs-l2 { background: #3fa36b99; }
.srs-hc.srs-l3 { background: #3fa36b; } .srs-hc.srs-l4 { background: var(--gold); }
.srs-hc.srs-fut { visibility: hidden; }
.srs-hc.srs-today { outline: 1.5px solid var(--gold); outline-offset: 1px; }
.srs-heat-leg { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.srs-heat-leg .srs-hc { width: 11px; height: 11px; }
.srs-heat-sum { margin-right: auto; }

/* light theme: --muted / --accent / warning orange are too faint on the cream card */
body.light .srs-heat-days, body.light .srs-heat-leg { color: #5b6e63; }
body.light .srs-ring-s { fill: #5b6e63; }
body.light .srs-warn { color: #9a5a00; }
body.light .srs-idone { color: #24704a; }

details.srs-more summary { cursor: pointer; color: var(--gold); font-weight: 600; }
body.light details.srs-more summary { color: #8a6a10; }