/* Basiri v2 screen components. Shape lock: capsule / 26 / circle only. */
.tabwrap{position:absolute;inset:0}
.av{display:inline-block;border-radius:50%;background:center/cover #E5E5EA;flex:none}
.avs{display:flex;flex:none}.avs .av+.av{margin-inline-start:-9px;box-shadow:0 0 0 2px var(--grouped)}

/* week strip (Structured) */
.week{display:grid;grid-template-columns:repeat(7,1fr);padding:6px 12px 14px;border-bottom:.5px solid var(--sep)}
.wd{display:flex;flex-direction:column;align-items:center;gap:4px}
.wd b{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 17px/1 var(--ui)}
.wd.cur b{background:var(--accent);color:#fff}
.dot{width:6px;height:6px;border-radius:50%}
.dot.a{background:var(--accent)}.dot.b{background:var(--back)}.dot.p{box-shadow:inset 0 0 0 1px var(--label-3)}

/* timeline */
.tl{padding:18px 16px 0 20px}
.tl-i{display:grid;grid-template-columns:44px 44px 1fr;gap:0 12px;min-height:64px}
.tl-time{padding-top:12px;color:var(--label-2);text-align:left;white-space:nowrap}
.tl-rail{display:flex;flex-direction:column;align-items:center}
.tl-node{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grouped);color:var(--label-2);flex:none;transition:background .2s,color .2s}
.tl-i.cur .tl-node{background:var(--accent);color:#fff}
.tl-i.done .tl-node{background:rgba(52,199,89,.14);color:#248A3D}
.tl-line{flex:1;width:2px;min-height:18px;background:var(--accent-bg);margin:4px 0}
.tl-line.dash{background:repeating-linear-gradient(var(--label-3) 0 4px,transparent 4px 9px);width:1.5px}
.tl-i.done .tl-line{background:rgba(0,122,255,.3)}
.tl-b{padding:10px 0 20px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-i.next .tl-b b{color:var(--label-2)}
.tl-i.done .tl-b .fn{color:var(--label-2)}
.tl-acts{display:flex;align-items:center;gap:4px;margin-top:12px;flex-wrap:wrap}
.tl-quote{margin-top:8px;padding-inline-start:10px;box-shadow:inset -2px 0 0 var(--sep)}
.tl-note{display:grid;grid-template-columns:44px 44px 1fr;gap:0 12px;align-items:center;margin:-8px 0 12px;color:var(--label-2);font:400 14px/1.6 var(--ui)}
.tl-note svg{grid-column:2;justify-self:center}
.tl-note span{grid-column:3}
.tl-note.soft{margin:0 0 14px}
.tl-sec{display:flex;align-items:center;gap:8px;padding:10px 20px 8px;margin:6px 16px 0;border-bottom:.5px solid var(--sep);color:var(--label)}
.tl-sec svg{color:var(--label-2)}
.tl-photo{display:block;width:100%;max-width:220px;height:120px;border-radius:26px;margin-top:10px;background:url(../img/writing.jpg) center/cover #E5E5EA}
.tl-photo.big{max-width:none;height:190px;margin:0}
.closed{display:flex;align-items:center;gap:12px;margin:18px 16px 0;padding:14px 16px;border-radius:26px;background:var(--accent-bg);color:var(--accent)}
.closed div{display:flex;flex-direction:column}.closed .hl{color:var(--label)}
.timer{margin-top:10px;display:flex;flex-direction:column;gap:8px;max-width:280px}
.tm-bar{height:4px;border-radius:2px;background:var(--fill);overflow:hidden}
.tm-bar i{display:block;height:100%;background:var(--accent);transform-origin:right;transition:transform 1s linear}
.tm-row{display:flex;align-items:center;justify-content:space-between}

/* lesson (Stoic reader) */
.lesson{padding:8px 24px 0;display:flex;flex-direction:column;gap:14px}
.ls-h{font-size:30px;line-height:1.4;margin-bottom:6px;text-wrap:balance}
.lesson p{color:rgba(0,0,0,.86)}
.ls-cta{position:sticky;bottom:98px;padding:20px 20px 0;background:linear-gradient(rgba(255,255,255,0),#fff 30%)}

/* forms */
.ta{width:100%;padding:14px 16px;border-radius:26px;background:#fff}
.stepper{display:flex;align-items:center;gap:0;background:var(--fill);border-radius:17px;height:34px}
.stepper button{width:44px;height:34px;font:400 22px/1 var(--ui);color:var(--label)}
.stepper b{min-width:28px;text-align:center;font:600 17px/1 var(--ui)}
.shot{border-radius:26px;overflow:hidden}
.modal.form .list{background:var(--grouped)}

/* path */
.path-h{padding:18px 16px 16px}
.ph-top{display:flex;align-items:baseline;gap:8px}
.ph-top .lt{font-size:44px;line-height:1}
.ph-bar{display:grid;grid-template-columns:repeat(21,1fr);gap:3px;margin:16px 0 18px}
.ph-bar i{height:22px;border-radius:11px;background:var(--fill)}
.ph-bar i.a{background:var(--accent)}.ph-bar i.b{background:var(--back)}
.ph-bar i.c{box-shadow:inset 0 0 0 1.5px var(--accent);background:#fff}
.ph-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:.5px solid var(--sep);padding-top:12px}
.ph-stats div{display:flex;flex-direction:column}
.ph-stats div+div{padding-inline-start:14px;box-shadow:inset -.5px 0 0 var(--sep)}
.ring{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px var(--label-3)}
.ring.done{background:var(--accent);color:#fff;box-shadow:none}
.ring.now{box-shadow:inset 0 0 0 2px var(--accent)}.ring.now i{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.row.next .tx b{color:var(--label-2)}

/* guide */
.ask{position:sticky;bottom:98px;margin:24px 16px 0;height:50px;border-radius:25px;background:#fff;box-shadow:0 0 0 .5px var(--sep),0 6px 20px -8px rgba(0,0,0,.15);display:flex;align-items:center;padding:0 16px 0 7px;gap:8px;z-index:5}
.ask input{flex:1}
.ask-s{width:36px;height:36px;border-radius:50%;background:var(--fill);color:var(--label-3);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.ask-s.on{background:var(--accent);color:#fff}
.ans-a{padding:12px 0 0;display:flex;justify-content:center}
.sk{display:flex;flex-direction:column;gap:8px;width:100%;padding:4px 0}
.sk i{height:12px;border-radius:6px;background:var(--fill);width:100%}

/* circle */
.circle-h{display:flex;justify-content:space-around;padding:18px 10px 14px}
.cm{display:flex;flex-direction:column;align-items:center;gap:6px}
.cm-r{padding:3px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--fill)}
.cm.done .cm-r{box-shadow:inset 0 0 0 2px var(--accent)}
.cm.back .cm-r{box-shadow:inset 0 0 0 2px var(--back)}
.cheer{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--label-2);flex:none;transition:color .15s,background .15s}
.cheer:active{background:var(--fill)}
.cheer.on{color:var(--accent);background:var(--accent-bg)}

/* lesson card (Headway / Apple Books "Up next") */
.lcard{display:block;width:100%;margin-top:12px;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 0 0 .5px var(--sep),0 10px 28px -16px rgba(0,0,0,.28);text-align:right;transition:transform .15s var(--ease)}
.lcard:active{transform:scale(.98)}
.lcard .cov{height:150px;background:center/cover #E5E5EA}
.lcard .lb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.ls-hero{height:260px;margin:0 0 4px;background:center/cover #E5E5EA}
.ls-cap{padding:6px 24px 0;color:var(--label-3)}
.thumb{width:44px;height:44px;border-radius:12px;background:center/cover #E5E5EA;flex:none}
.row.ic.th+.row::before{right:72px}
.eve{height:120px;border-radius:26px;margin:12px 16px 0;background:center/cover #E5E5EA;position:relative;overflow:hidden}
.eve span{position:absolute;inset:auto 0 0;padding:28px 16px 12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));font:600 15px/1.4 var(--ui)}