/* Saros v30.6 — «أسبوعي», approved design (18 Oct 2026). Scoped to .w30 (the page root), plus the few
   floating pieces that live on <body> while planning: .w30-pick, .w30-pill, .w30-float. Monochrome tokens only. */
.w30{--w30-rh:56px;--w30-line:color-mix(in srgb,var(--border) 72%,transparent);--w30-block:var(--surface-3,var(--surface-2));container-type:inline-size}

/* ----- header: title, visible hours, week arrows, + موعد ----- */
.w30 .w30-head{align-items:center;flex-wrap:wrap;row-gap:12px}
.w30 .w30-tools{flex-wrap:wrap;justify-content:flex-end;gap:10px}
.w30-tools-end{display:flex;align-items:center;gap:10px}
.w30-hrange{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:5px 8px;padding-inline-start:12px;border-radius:13px;border:1px solid var(--border);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--muted)}
.w30-hrange>svg{flex:none}
.w30-hrange label{white-space:nowrap}
.w30-hrange input[data-w30-hours]{height:32px;width:72px;padding:0 8px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:600 13.5px var(--latin);font-variant-numeric:tabular-nums;direction:ltr;text-align:center}
.w30-hrange.is-all input[data-w30-hours]{color:var(--muted);border-style:dashed}
.w30-24{height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.w30-24[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.w30-hmsg{position:absolute;top:calc(100% + 4px);inset-inline-start:12px;font-size:11.5px;color:var(--text);white-space:nowrap}
.w30-hmsg:empty{display:none}

/* ----- layout: grid + side list ----- */
.w30-layout{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:16px;align-items:start}
.w30 .w30-cal{border-radius:18px;border:1px solid var(--border);background:var(--surface);overflow:hidden;box-shadow:none}
.w30 .sweek-scroll{overflow-x:auto;overflow-y:hidden}
.w30 .sweek-calendar-inner{min-width:700px}
.w30 .sweek-week-head,.w30 .w30-body,.w30-edge{display:grid;grid-template-columns:56px repeat(var(--n,7),minmax(0,1fr));direction:rtl}
.w30 .sweek-week-head{border-bottom:1px solid var(--border);background:var(--surface)}
.w30 .sweek-clock-label{border-inline-end:1px solid var(--border)}
.w30 .sweek-column-head{min-height:58px;padding:10px 4px!important;border-inline-end:1px solid var(--border);background:transparent!important}
.w30 .sweek-day-label{gap:2px}
.w30 .sweek-day-word{font-size:13px;font-weight:700;padding:0 10px;border-radius:99px;line-height:1.6}
.w30 .sweek-day-label strong{font-size:11px;color:var(--muted)}
.w30 .sweek-column-head.is-today .sweek-day-word{background:var(--text);color:var(--bg)}
.w30 .sweek-day-plus{top:7px;left:6px;width:22px;height:22px;opacity:.55;font-size:17px}
.w30 .sweek-day-plus:hover,.w30 .sweek-day-plus:focus-visible{opacity:1}

/* hours: every hour has the same height */
.w30 .sweek-hours{position:relative;border-inline-end:1px solid var(--border)}
.w30 .sweek-hour{position:relative;display:block;height:var(--w30-rh);padding:0;border:0;font:500 11px var(--latin);color:var(--muted);opacity:1}
.w30 .sweek-hour time{position:absolute;inset-inline:0;top:-8px;text-align:center;font-variant-numeric:tabular-nums}
.w30 .sweek-hour:first-child time{top:4px}
.w30 .w30-col{position:relative;min-width:0;border-inline-end:1px solid var(--border);background-color:transparent!important;background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--w30-rh) - 1px),var(--w30-line) calc(var(--w30-rh) - 1px) var(--w30-rh))!important;cursor:cell;touch-action:pan-y}
.w30 .w30-col.is-today{background-color:color-mix(in srgb,var(--text) 3.5%,transparent)!important}
.w30 .w30-col:hover{background-color:color-mix(in srgb,var(--text) 2%,transparent)!important}
.w30 .w30-col.is-today:hover{background-color:color-mix(in srgb,var(--text) 5%,transparent)!important}
.w30 .sweek-calendar-inner>.w30-body:last-child .w30-col:last-child,.w30 .sweek-calendar-inner .w30-col:last-child{border-inline-end:0}

/* ----- one solid block per item ----- */
.w30 .w30-slot{position:absolute;z-index:3;box-sizing:border-box;padding:1.5px 3px!important;min-width:0}
.w30 .w30-ev{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:1px;width:100%;height:100%!important;min-height:0;margin:0;padding:6px 8px 6px 7px!important;overflow:hidden;box-sizing:border-box;text-align:start;direction:rtl;font:inherit;color:var(--text);background:var(--w30-block)!important;border:0!important;border-inline-start:3px solid var(--text)!important;border-radius:7px!important;box-shadow:none!important;opacity:1!important;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.w30 .w30-ev.is-draggable{cursor:grab}
.w30 .w30-ev:hover{box-shadow:0 3px 12px rgba(0,0,0,.18)!important}
.w30 .w30-ev:focus-visible{outline:2px solid var(--text)!important;outline-offset:1px}
.w30 .w30-ev-t{display:flex;align-items:flex-start;gap:4px;min-width:0}
.w30 .w30-ev .v28w-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:1;min-width:0;font-size:12px;line-height:1.35;font-weight:700;text-align:start;overflow-wrap:anywhere}
.w30 .w30-ev .v28w-line strong{display:inline;font-size:inherit;font-weight:inherit;line-height:inherit;-webkit-line-clamp:unset;overflow:visible}
.w30 .w30-ic{flex:none;display:inline-flex;margin-top:2px;opacity:.85}
.w30 .w30-ev .w30-ev-time{display:block;font:500 10.5px var(--latin);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:start;direction:ltr;align-self:flex-start}
.w30 .w30-ev-tag{align-self:flex-start;margin-top:3px;padding:0 6px;border:1px dashed var(--border);border-radius:99px;font-size:9.5px;color:var(--muted);white-space:nowrap}
.w30 .is-short .w30-ev{flex-direction:row;align-items:center;gap:6px;padding-block:2px!important}
.w30 .is-short .w30-ev .v28w-line{-webkit-line-clamp:1}
.w30 .is-short .w30-ev-time{flex:none}
.w30 .is-short .w30-ev-tag{display:none}
.w30 .is-narrow .w30-ev{padding:5px 5px 5px 4px!important}
.w30 .is-narrow .w30-ev .v28w-line{font-size:11px;-webkit-line-clamp:4;overflow-wrap:normal;word-break:normal}
.w30 .is-narrow.is-short .w30-ev .v28w-line{-webkit-line-clamp:1}
.w30 .is-narrow .w30-ic,.w30 .is-narrow .w30-ev-tag{display:none}
.w30 .is-tiny .w30-ev .w30-ev-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.w30 .is-tiny .w30-ev{padding:0!important}
.w30 .is-narrow .w30-ev-time{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* done: struck and dimmed, still a solid block */
.w30 .w30-ev.is-complete{background:var(--surface-2)!important;border-inline-start-color:var(--muted)!important}
.w30 .w30-ev.is-complete .v28w-line,.w30 .w30-ev.is-complete .w30-ev-time{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}
/* study keeps its dashed edge and stays where it is */
.w30 .w30-ev.sweek-course-event{border-inline-start-style:dashed!important}
/* clipped by the chosen hours */
.w30 .is-clip-top .w30-ev{border-top-left-radius:0!important;border-top-right-radius:0!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8px);mask-image:linear-gradient(to bottom,transparent 0,#000 8px)}
.w30 .is-clip-bottom .w30-ev{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 8px);mask-image:linear-gradient(to top,transparent 0,#000 8px)}
/* bottom edge = duration */
.w30-resize{position:absolute;inset-inline:3px;bottom:0;z-index:2;height:11px;display:grid;place-items:center;cursor:ns-resize;touch-action:none}
.w30-resize i{width:30px;height:4px;border-radius:99px;background:var(--text);box-shadow:0 0 0 2px var(--w30-block);opacity:0;transition:opacity .15s}
.w30 .w30-slot:hover .w30-resize i,.w30 .w30-slot:focus-within .w30-resize i,.w30 .w30-slot.is-resizing .w30-resize i{opacity:.9}
.w30 .w30-slot.is-resizing{z-index:6}
.w30 .w30-slot.is-resizing .w30-ev{box-shadow:0 0 0 1.5px var(--text)!important}
@media (hover:none),(pointer:coarse){.w30-resize{height:18px}.w30-resize i{opacity:.45}}

/* ----- planning feedback ----- */
.w30 .w30-slot.is-origin .w30-ev,.w30 .w30-slot.is-origin .w30-resize{visibility:hidden}
.w30 .w30-slot.is-origin::after{content:'';position:absolute;inset:1.5px 3px;border:1.5px dashed var(--muted);border-radius:7px;opacity:.75}
.w30-lift{position:absolute;inset-inline:3px;z-index:8;pointer-events:none}
.w30-lift .w30-ev{height:100%!important;box-shadow:0 14px 30px rgba(0,0,0,.35),0 0 0 1.5px var(--text)!important;transform:rotate(-1deg) scale(1.02);cursor:grabbing}
.w30-lift.is-short .w30-ev{flex-direction:row;align-items:center;gap:6px;padding-block:2px!important}
.w30-lift.is-new .w30-ev{background:var(--text)!important;color:var(--bg);border-inline-start-color:var(--bg)!important}
.w30-lift.is-new .w30-ev .w30-ev-time{color:var(--bg);opacity:.75}
.w30-hint{position:absolute;inset-inline:3px;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px dashed var(--muted);border-radius:7px;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);font:600 12px var(--latin);pointer-events:none;overflow:hidden}
.w30-hint.is-picked{border-style:solid;border-color:var(--text)}
.w30-pill{position:fixed;z-index:80;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;background:var(--text);color:var(--bg);font-size:11.5px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.3);pointer-events:none}
.w30-pill bdi{font-family:var(--latin);font-variant-numeric:tabular-nums}
.w30-float{position:fixed;z-index:80;max-width:220px;padding:7px 12px;border-radius:10px;background:var(--text);color:var(--bg);font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 10px 26px rgba(0,0,0,.3);pointer-events:none}
body.w30-dragging,body.w30-dragging *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.w30-pick{position:fixed;z-index:60;min-width:186px;padding:10px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.w30-pick-when{margin:0 4px 8px;font-size:12.5px;color:var(--muted)}
.w30-pick-when b{color:var(--text)}
.w30-pick-when bdi{font-family:var(--latin);font-weight:700;color:var(--text)}
.w30-pick-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.w30-pick-btns button{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.w30-pick-btns button:hover,.w30-pick-btns button:focus-visible{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ----- outside the chosen hours: a chip above / below that day ----- */
.w30-edge{border-bottom:1px solid var(--border)}
.w30-edge.is-after{border-bottom:0;border-top:1px solid var(--border)}
.w30-edge-cell{min-width:0;padding:5px 4px;border-inline-end:1px solid var(--border)}
.w30-edge-cell:first-child{border-inline-end:1px solid var(--border)}
.w30-edge-cell:last-child{border-inline-end:0}
.w30-out{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:26px;padding:2px 6px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font:inherit;font-size:10.5px;font-weight:600;line-height:1.3;cursor:pointer;text-align:center}
.w30-out svg{flex:none}
.w30-out span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w30-out bdi{font-family:var(--latin)}
.w30-out:hover,.w30-out:focus-visible{color:var(--text);border-color:var(--text)}

.w30-foot{display:flex;align-items:center;gap:7px;margin:0;padding:10px 14px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.w30-foot svg{flex:none}
.w30-foot-touch{display:none}
@media (hover:none){.w30-foot-mouse{display:none}.w30-foot-touch{display:inline}}

/* ----- side list: this week's items without a time ----- */
.w30-side{padding:16px 14px;border-radius:18px;border:1px solid var(--border);background:var(--surface);min-width:0}
.w30-side-head h2{margin:0;font-size:15px}
.w30-side-head p{margin:2px 0 6px;font-size:11.5px;color:var(--muted)}
.w30-lg h3{margin:12px 2px 6px;font-size:11.5px;font-weight:700;color:var(--muted)}
.w30-lg.is-now h3{color:var(--text)}
.w30-li{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:7px 8px;border-radius:12px;border:1px solid transparent;background:var(--surface-2);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.w30-li.is-draggable{cursor:grab}
.w30-li .v21-check{flex:none;margin:0}
.w30-li-dot{flex:none;width:15px;height:15px;border-radius:50%;border:1.5px dashed var(--muted)}
.w30-li-open{flex:1;min-width:0;display:grid;gap:0;padding:2px 0;border:0;background:transparent;color:var(--text);font:inherit;text-align:start;cursor:inherit}
.w30-li-title{display:flex;align-items:center;gap:5px;min-width:0}
.w30-li-title strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600}
.w30-li-open small{font-size:10.5px;color:var(--muted)}
.w30-li-open small bdi{font-family:var(--latin)}
.w30-grip{flex:none;display:grid;place-items:center;width:24px;height:30px;margin-inline-start:auto;color:var(--muted);opacity:.75;cursor:grab;touch-action:none}
.w30-li.is-done{opacity:.6}
.w30-li.is-done .w30-li-title strong,.w30-li.is-done small{text-decoration:line-through}
.w30-li.is-dragging{background:transparent;border:1.5px dashed var(--muted)}
.w30-li.is-dragging>*{opacity:.35}
.w30-li:focus-within{border-color:var(--border)}
.w30-side-empty{margin:10px 2px 0;font-size:12px;color:var(--muted)}

/* ----- bottom: goals + notes keep their place ----- */
.w30 .sweek-bottom{margin-top:16px}

/* ----- narrower main area: the list goes under the grid ----- */
@container (max-width:1020px){
 .w30-layout{grid-template-columns:minmax(0,1fr)}
 .w30-side-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 14px}
}
.w30-mobile-day{display:none}

/* ----- phone: one day at a time ----- */
@media (max-width:650px){
 .w30 .w30-head{flex-direction:column;align-items:stretch}
 .w30 .w30-tools{justify-content:space-between;width:100%}
 .w30-hrange{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:6px 7px;padding-inline-start:10px}
 .w30-hrange input[data-w30-hours]{width:66px}
 .w30-hrange .w30-24{margin-inline-start:auto}
 .w30-tools-end{width:100%;justify-content:space-between}
 .w30 .sweek-scroll{display:none}
 .w30 .sweek-mobile-view{display:block}
 .w30-mobile-day{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700}
 .w30-mobile-day .v28-link{font-weight:700}
 .w30 .w30-mplus{position:static;width:auto;height:32px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);opacity:1;font-size:12.5px;font-weight:700}
 .w30 .sweek-mobile-timeline{grid-template-columns:56px minmax(0,1fr)}
 .w30 .sweek-mobile-timeline .w30-ev{padding:7px 10px!important}
 .w30 .sweek-mobile-timeline .w30-ev .v28w-line{font-size:13px}
 .w30 .sweek-mobile-timeline .w30-ev-time{font-size:11.5px}
 .w30-side-groups{grid-template-columns:1fr}
 .w30-foot{font-size:11px;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.w30-resize i{transition:none}.w30-lift .w30-ev{transform:none}}
/* v31.1: the calendar bar (hours, arrows, «+») runs the full width under the title, edge to edge with the cards below */
.w30 .w30-head{flex-direction:column;align-items:stretch}
.w30 .w30-tools{width:100%;box-sizing:border-box;justify-content:space-between;padding:10px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--border)}
.w30 .w30-tools .w30-hrange{border:0!important;background:none!important;box-shadow:none!important;padding:0!important}