/* Saros v30 — «تحدياتي» (pie design). Monochrome, light + dark from the theme variables. */
.ch30{container:ch30/inline-size;--ch30-none:color-mix(in srgb,var(--text) 13%,var(--surface));--ch30-none-s:color-mix(in srgb,var(--text) 20%,var(--surface));--ch30-line:color-mix(in srgb,var(--text) 27%,var(--surface))}
body[data-theme="light"] .ch30{--ch30-none:color-mix(in srgb,var(--text) 22%,var(--surface));--ch30-none-s:color-mix(in srgb,var(--text) 30%,var(--surface));--ch30-line:color-mix(in srgb,var(--text) 32%,var(--surface))}

/* ---------- tabs ---------- */
.ch30-tabs{display:flex;gap:10px;margin:0 0 14px;overflow-x:auto;padding:2px;scrollbar-width:thin}
.ch30-tab{flex:none;display:grid;gap:2px;width:230px;max-width:72vw;padding:12px 16px;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;text-align:start;cursor:pointer;transition:background .15s,box-shadow .15s}
.ch30-tab:hover{background:var(--surface-2)}
.ch30-tab b{font-size:14px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch30-tab small{font-size:11.5px;color:var(--muted)}
.ch30-tab.is-on{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--text)}
.ch30-tab:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.ch30-tab-bar{display:block;height:3px;border-radius:99px;background:var(--surface-3);margin-top:6px;overflow:hidden}
.ch30-tab-bar i{display:block;height:100%;background:var(--text);border-radius:99px}

/* ---------- card: pie on the start side, details beside it ---------- */
.ch30-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"pie ." "pie head" "pie info" "pie .";column-gap:30px;border-radius:24px;background:var(--surface);border:1px solid var(--border);padding:26px 30px}
.ch30-piecol{grid-area:pie;display:grid;justify-items:center;align-content:center;gap:2px;min-width:0}
.ch30-head{grid-area:head;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ch30-info{grid-area:info;min-width:0}
.ch30-eyebrow{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.ch30-title{margin:2px 0 0;font-size:24px;line-height:1.35;overflow-wrap:anywhere}
.ch30-edit{flex:none}
.ch30-why{margin:16px 0;padding:4px 16px;border-inline-start:3px solid var(--text)}
.ch30-why span{display:block;font-size:11.5px;font-weight:700;color:var(--muted)}
.ch30-why p{margin:0;font-size:17px;font-weight:600;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.ch30-why-empty{display:inline-flex;align-items:center;gap:6px;margin:14px 0;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px}
.ch30-why-empty .ui-icon{width:14px;height:14px}
.ch30-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 16px}
.ch30-stats>div{display:grid;padding:12px 14px;border-radius:14px;background:var(--surface-2);min-width:0}
.ch30-stats b{font:600 22px/1.25 var(--font);white-space:nowrap}
.ch30-stats small{font-size:11.5px;color:var(--muted)}

/* ---------- selected day ---------- */
.ch30-day{margin-top:14px;padding:16px 18px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2)}
.ch30-day-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px}
.ch30-day-h strong{font-size:14px}
.ch30-day-h small{font-size:11.5px;color:var(--muted)}
.ch30-hpills{display:flex;flex-wrap:wrap;gap:8px}
.ch30-hpill{display:inline-flex;align-items:center;gap:9px;min-height:38px;max-width:100%;padding:4px 14px 4px 16px;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.ch30-hpill span{overflow-wrap:anywhere}
.ch30-hpill.is-done{background:var(--text);color:var(--bg);border-color:var(--text)}
.ch30-hpill:has(:disabled){opacity:.55;cursor:default}
.ch30-hpill input[type=checkbox]{appearance:none!important;-webkit-appearance:none!important;flex:none;width:18px!important;height:18px!important;min-width:18px;margin:0;padding:0!important;border-radius:6px;border:1.6px solid var(--muted);background:var(--surface) center/78% no-repeat;cursor:inherit}
.ch30-hpill input[type=checkbox]:checked{background-color:var(--bg);border-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5.5 12.5 4.2 4.2L18.5 8' fill='none' stroke='%23ededed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body[data-theme="light"] .ch30-hpill input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5.5 12.5 4.2 4.2L18.5 8' fill='none' stroke='%23262626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ch30-hpill input[type=checkbox]:focus-visible,.ch30-hpill button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ch30-hpill button{min-height:26px;padding:1px 9px;border-radius:99px;font-size:12px}
.ch30-hpill.is-done button{background:var(--bg);color:var(--text);border-color:var(--bg)}
.ch30-rest{margin:0;font-size:12.5px;color:var(--muted)}
.ch30-back{display:flex;width:max-content;margin-top:10px;font:inherit;font-size:12px;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:99px;padding:4px 12px;cursor:pointer}
.ch30-back:hover{background:var(--surface)}
.ch30-back:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* ---------- legend ---------- */
.ch30-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.ch30-legend span{display:inline-flex;align-items:center;gap:6px}
.ch30-sw{display:block;overflow:visible;flex:none}
.ch30-lg-sep{width:1px;height:14px;background:var(--border)}

/* ---------- the pie ---------- */
.ch30-pie{position:relative;width:min(100%,500px);aspect-ratio:1;container-type:inline-size}
.ch30-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ch30-wedge{stroke-linejoin:round;cursor:pointer;outline:none;transition:fill .15s}
.ch30-wedge.is-full{fill:var(--text);stroke:var(--text);stroke-width:calc(.6px * var(--k,1))}
.ch30-wedge.is-part{fill:color-mix(in srgb,var(--text) 48%,var(--surface));stroke:var(--text);stroke-width:calc(1.2px * var(--k,1))}
.ch30-wedge.is-none{fill:var(--ch30-none);stroke:var(--ch30-none-s);stroke-width:calc(.8px * var(--k,1))}
.ch30-wedge.is-rest{fill:url(#ch30-hatch);stroke:var(--muted);stroke-width:calc(1px * var(--k,1))}
.ch30-wedge.is-future{fill:transparent;stroke:var(--ch30-line);stroke-width:calc(1px * var(--k,1))}
.ch30-wedge.is-today{stroke:var(--text);stroke-width:2.4px;filter:drop-shadow(0 4px 10px #000a)}
body[data-theme="light"] .ch30-wedge.is-today{filter:drop-shadow(0 3px 7px #0000002e)}
.ch30-wedge.is-future.is-today{fill:var(--surface)}
.ch30-legend .ch30-wedge{cursor:default}
.ch30-hatch-bg{fill:var(--surface)}
.ch30-hatch-ln{stroke:var(--muted);stroke-width:1.5}
.ch30-cap{fill:none;stroke:var(--text);stroke-width:2.6px;stroke-linecap:round}
.ch30-hl{fill:color-mix(in srgb,var(--text) 18%,transparent);stroke:var(--text);stroke-width:1.2px;stroke-linejoin:round;pointer-events:none;visibility:hidden}
.ch30-hl.is-on{visibility:visible}
.ch30-hl.is-focus{stroke-width:2.4px}
.ch30-tick{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:2 3;opacity:.7}
.ch30-hub{fill:var(--surface);stroke:var(--ch30-line,var(--border));stroke-width:1}
/* labels around the pie: a radius that scales with the pie (viewBox units) + a fixed offset in px, so the text keeps its size */
.ch30-num,.ch30-chip,.ch30-mark{position:absolute;left:calc(50% + var(--s) * (var(--ru) * 100cqw / 560 + var(--o) * 1px) + var(--dx,0) * 1px);top:calc(50% + var(--c) * (var(--ru) * 100cqw / 560 + var(--o) * 1px) + var(--dy,0) * 1px);transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;line-height:1}
.ch30-num{font:500 11px var(--latin);color:var(--muted)}
.ch30-num.is-today{font-weight:700;font-size:15px;color:var(--text)}
.ch30-num.is-sel{display:grid;place-items:center;min-width:26px;height:20px;padding:0 7px;border-radius:10px;background:var(--text);color:var(--bg);font-weight:700}
.ch30-chip{padding:3px 8px;border-radius:99px;border:1px solid var(--text);background:var(--surface);color:var(--text);font-size:10.5px;font-weight:700}
.ch30-mark{transform:translate(-50%,-100%);font-size:10.5px;color:var(--muted)}
.ch30-mark.is-left{transform:translate(calc(-100% - 6px),-100%)}
.ch30-mark.is-right{transform:translate(6px,-100%)}
.ch30-tip{position:absolute;z-index:3;display:grid;gap:1px;padding:8px 12px;border-radius:12px;background:var(--surface-3);border:1px solid var(--border);box-shadow:0 8px 24px #0006;white-space:nowrap;pointer-events:none;text-align:start;color:var(--text)}
body[data-theme="light"] .ch30-tip{box-shadow:0 8px 24px #0000001f}
.ch30-tip[hidden]{display:none}
.ch30-tip b{font-size:12.5px}
.ch30-tip span{font-size:11px;color:var(--muted)}
.ch30-caption{margin:0;font-size:12px;color:var(--muted);text-align:center}
.ch30-piecol.is-lowchip .ch30-caption{margin-top:24px}
.ch30-new{white-space:nowrap}
@container (max-width:400px){.ch30-num.is-dense{display:none}.ch30-mark.is-left-narrow{transform:translate(calc(-100% - 6px),-100%)}.ch30-mark.is-right-narrow{transform:translate(6px,-100%)}}

/* ---------- narrow: title, pie, details stacked ---------- */
@container ch30 (max-width:860px){
 .ch30-card{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "pie" "info";row-gap:14px;padding:20px 18px}
 .ch30-why{margin-top:6px}
}
@container ch30 (max-width:440px){
 .ch30-card{padding:16px 14px;border-radius:20px}
 .ch30-title{font-size:20px}
 .ch30-why p{font-size:15px}
 .ch30-stats{gap:6px}
 .ch30-stats>div{padding:10px}
 .ch30-stats b{font-size:18px}
 .ch30-stats small{font-size:10.5px}
 .ch30-day{padding:14px 12px}
 .ch30-legend .ch30-lg-sep{display:none}
}

/* ---------- empty ---------- */
.ch30-empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:48px 20px 52px;border:1px dashed var(--border);border-radius:24px;background:var(--surface)}
.ch30-empty-art{width:132px;height:132px;margin-bottom:6px;overflow:visible}
.ch30-empty-art .ch30-wedge{cursor:default;stroke-width:3px}
.ch30-empty h2{margin:0;font-size:19px}
.ch30-empty p{margin:0 0 8px;max-width:420px;color:var(--muted);font-size:13px;line-height:1.8}
@media (prefers-reduced-motion:reduce){.ch30 *{transition:none!important}}