/* Zirva – teacher setup screens + clickable prototype. */
a.nav,a.tab,a.gl,a.back,a.brand{color:inherit;text-decoration:none}
[data-go]{cursor:pointer}
[data-go]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:12px}

/* page head with back link */
.su-h .back{display:inline-flex;margin-bottom:8px}
.su-h h1{font:var(--type-title-lg);letter-spacing:-.01em}

/* Yarat: what to create */
.cr{margin-top:24px;padding:0 20px}
.cr-row{display:flex;align-items:center;gap:16px;min-height:76px;border-bottom:1px solid var(--color-border)}
.cr-row:last-child{border-bottom:0}
.cr-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--color-surface-sunken)}
.cr-ic i{font-size:22px;color:var(--color-text)}
.cr-row b{display:block;font:600 17px/22px var(--font-family-ui)}
.cr-row span.s{display:block;font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:2px}
.cr-row .chev{margin-left:auto;font-size:18px;color:var(--color-text-tertiary)}

/* forms */
.sform{display:flex;flex-direction:column;gap:24px;margin-top:24px}
.sform .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.colors{display:grid;grid-template-columns:repeat(7,44px);gap:5px}
.colors button{aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--g);display:grid;place-items:center;color:#fff;cursor:pointer}
.colors button.on{box-shadow:0 0 0 2px var(--color-canvas),0 0 0 4px var(--color-text)}
.colors i{font-size:18px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.days button{min-height:48px;border:0;border-radius:12px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-strong);font:var(--type-label-md);color:var(--color-text)}
.days button.on{background:var(--color-text);color:var(--color-text-inverse);box-shadow:none}
.input.val{display:flex;align-items:center;justify-content:space-between;gap:10px;font:var(--type-body-lg)}
.input.val i{color:var(--color-text-secondary);font-size:20px}
.sform .btn-primary{align-self:stretch}
@media (min-width:900px){.sform .btn-primary{align-self:flex-start;min-width:220px}}

/* publish settings: rows that each hold one decision */
.set{margin-top:24px;padding:0 20px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:12px 0;border-bottom:1px solid var(--color-border)}
.set-row:last-child{border-bottom:0}
.set-row>div:first-child b{display:block;font:600 16px/22px var(--font-family-ui)}
.set-row>div:first-child span{display:block;font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:2px}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.set-row.stack{flex-direction:column;align-items:stretch;gap:12px}
.set-row.stack .seg{align-self:flex-start}
.set .chip{height:44px}
.stepper{display:inline-flex;align-items:center;gap:4px;border-radius:999px;background:var(--color-surface-sunken);padding:2px}
.stepper button{width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:18px;color:var(--color-text)}
.stepper b{min-width:28px;text-align:center;font:600 17px/1 var(--font-family-ui);font-variant-numeric:tabular-nums}
.switch{width:52px;height:32px;border-radius:999px;background:var(--color-border-strong);position:relative;flex:none;border:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform 160ms var(--ease-out)}
.switch.on{background:var(--color-success)}
.switch.on::after{transform:translateX(20px)}
.set-val{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:var(--type-label-md)}
.set-val i{color:var(--color-text-tertiary)}
.seg.big button{min-height:40px}
.send{margin-top:28px}
@media (min-width:900px){.send{width:auto;min-width:260px}}

/* create homework */
.hwf .title-in{font:600 26px/32px var(--font-family-ui);letter-spacing:-.01em;border:0;background:none;padding:0;min-height:0}
.hwf .title-in::after{content:"";display:inline-block;width:2px;height:26px;background:var(--color-focus);vertical-align:-5px;margin-left:2px}
.att{display:flex;flex-wrap:wrap;gap:8px}
.att .file{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);font:var(--type-label-md)}
.att .file small{color:var(--color-text-secondary);font:var(--type-body-sm);margin-left:2px}
.att .add{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;border:1px dashed var(--color-border-strong);background:none;font:var(--type-label-md);color:var(--color-text-secondary)}
.hw-side{margin-top:28px}
@media (min-width:900px){.hw-side{margin-top:0}}

.field .seg{align-self:flex-start}

/* moment headings are h1 for screen readers; keep the moment look */
.alldone h1{font:600 28px/34px var(--font-family-display);letter-spacing:-.02em;margin-top:22px}