/* Schedule: time off calendar and weekly availability. Uses the portal accent (teal) like every other screen. */
.sch-notice { background: linear-gradient(135deg, var(--ac-t2), var(--ac-t)); border-color: color-mix(in srgb, var(--ac) 28%, transparent); }
.sn-top { display: flex; gap: 1rem; align-items: flex-start; }
.sn-top .tile-ic { background: var(--surface); }
.sch-notice h2 { font-size: 1.2rem; font-family: var(--f-display); color: var(--ac-d); }
.sch-notice p { color: var(--ink-2); margin-top: .2rem; }
.meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; margin: 1rem 0 .9rem; }
.meter small { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.meter b { font-size: 1rem; white-space: nowrap; }
.m-b { text-align: right; color: var(--ac-ink); }
.m-bar { position: relative; height: 16px; border-radius: 999px; background: repeating-linear-gradient(135deg, #D6CAB4 0 6px, #E6DCC8 6px 12px); }
.m-bar::after { content: ""; position: absolute; right: -3px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); border-radius: 50%; background: var(--ac-solid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ac) 25%, transparent); }
.m-bar em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--ink-2); }
.sn-help { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; border-top: 1px solid color-mix(in srgb, var(--ac) 22%, transparent); padding-top: .85rem; margin-top: .25rem; }
.sn-help p { margin: 0; font-size: .92rem; flex: 1 1 240px; }

.sch-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.sch-side { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 900px) { .sch-grid { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); align-items: start; } .cal-card { position: sticky; top: calc(var(--head-h) + 3px + 1rem); } }
.cal-card, .step { margin-bottom: 0; }
.step-h { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .4rem; }
.step-h h2 { font-size: 1.1rem; line-height: 1.3; }
.step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--ac-solid); color: var(--on-ac); display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: none; }
.step-n.off { background: var(--surface-3); color: var(--ink-3); }
.step.is-locked { opacity: .62; background: var(--surface-2); box-shadow: none; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--ground-2); border-radius: var(--pill); margin-block: .4rem .8rem; }
.seg button { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: 0 .5rem; border-radius: var(--pill); font-weight: 600; font-size: .92rem; color: var(--ink-2); text-align: center; }
.seg button .i { color: var(--ac-ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--teal-deep); box-shadow: 0 1px 2px rgba(60, 45, 20, .14), 0 6px 14px -6px rgba(60, 45, 20, .25); }
.cal-jump { margin-bottom: .25rem; }

/* calendar */
.cal { margin-top: .25rem; }
.cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.cal-title { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; color: var(--ac-d); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-w { text-align: center; font-size: .8rem; font-weight: 600; color: var(--ink-3); padding: .4rem 0; }
.cal-d { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; min-height: 38px; padding: 0; border: 0; background: none; font-weight: 600; font-size: .95rem; color: var(--ink); cursor: pointer; }
.cal-d .n { display: grid; place-items: center; width: min(100%, 38px); aspect-ratio: 1; border-radius: 50%; transition: background .12s; }
.cal-d:hover:not(.is-off):not(.sel) .n { background: var(--ac-t); }
.cal-d:focus-visible { outline: 3px solid var(--ac); outline-offset: -3px; border-radius: 10px; }
.cal-d.is-past { color: #B9AE9C; cursor: default; }
.cal-d.is-soon { color: #8E8271; cursor: not-allowed; background: repeating-linear-gradient(135deg, #DACFBA 0 4px, #E7DECC 4px 8px); }
.cal-d.is-today .n { box-shadow: inset 0 0 0 2px var(--ink-3); }
.cal-d.is-first .n { box-shadow: inset 0 0 0 2px var(--ac); background: var(--ac-t); color: var(--ac-ink); }
.cal-d.in { background: var(--ac-t); }
.cal-d.rng-s { background: linear-gradient(90deg, transparent 50%, var(--ac-t) 50%); }
.cal-d.rng-e { background: linear-gradient(270deg, transparent 50%, var(--ac-t) 50%); }
.cal-d.sel .n { background: var(--ac-solid); color: var(--on-ac); box-shadow: none; }
.bkd { position: absolute; bottom: 3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--surface); }
.bk-approved .bkd { background: var(--ok); }
.cal-key { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .75rem; font-size: .8rem; color: var(--ink-2); }
.cal-key li { display: inline-flex; align-items: center; }
.k { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: .4rem; flex: none; }
.k-ok { background: var(--surface); border: 1px solid var(--line-2); }
.k-off { background: repeating-linear-gradient(135deg, #CFC3AC 0 3px, #E7DECC 3px 6px); }
.k-sel { background: var(--ac-solid); }
.k-bk { background: var(--gold); border-radius: 50%; width: 10px; height: 10px; margin-inline: 2px 6px; }
.sel-sum { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: var(--r-lg); background: var(--surface-2); margin-top: .85rem; color: var(--ink-2); }
.sel-sum.ok { background: var(--ac-t); color: var(--ink); }
.sel-sum .i { color: var(--ac-ink); }
.cal-hint { display: flex; gap: .6rem; align-items: flex-start; margin-top: .6rem; padding: .75rem 1rem; border-radius: var(--r-lg); background: var(--warn-wash); font-size: .92rem; }
.cal-hint .i { color: var(--warn); margin-top: .2rem; }
.sep-note { margin-top: .75rem; }

/* form steps */
.fld textarea { width: 100%; min-height: 84px; padding: .7rem .9rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); resize: vertical; line-height: 1.45; }
.fld textarea:focus, .fld input[type="time"]:focus, .tp input:focus { border-color: var(--ac); outline: 2px solid var(--ac); outline-offset: 0; }
.fld input[type="date"] { min-height: 46px; padding: 0 .9rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); width: 100%; }
.fld small { font-weight: 500; }
.timepick, .range { display: flex; align-items: flex-end; gap: .6rem; }
.timepick { margin-top: .85rem; }
.tp { display: grid; gap: .25rem; flex: 1; min-width: 0; }
.tp span { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.tp input { min-height: 46px; padding: 0 .7rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); width: 100%; min-width: 0; }
.tp-dash { padding-bottom: .8rem; color: var(--ink-3); font-size: .9rem; }
.quick { margin-top: .75rem; }
.quick .fchip small { font-weight: 500; opacity: .85; }
.hrs-sum { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-weight: 600; color: var(--ac-ink); }
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .5rem; }
.rsn { display: flex; align-items: center; gap: .6rem; min-height: 54px; padding: .5rem .9rem; border: 1.5px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); font-weight: 600; font-size: .9rem; line-height: 1.25; text-align: left; transition: background .12s, border-color .12s; }
.rsn .i { color: var(--ac-ink); width: 1.15rem; height: 1.15rem; }
.rsn:hover { border-color: var(--ac); background: var(--ac-t2); }
.rsn[aria-checked="true"] { border: 2px solid var(--ac); background: var(--ac-t); padding: calc(.5rem - .5px) calc(.9rem - .5px); }
@media (max-width: 380px) { .reasons { grid-template-columns: minmax(0, 1fr); } }
.sumlist { display: grid; margin: .4rem 0 .6rem; }
.sumlist > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.sumlist dt { display: flex; align-items: center; gap: .45rem; color: var(--ink-3); font-weight: 600; font-size: .88rem; }
.sumlist dt .i { color: var(--ac-ink); }
.sumlist dd { margin: 0; overflow-wrap: anywhere; }
.sendto { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .85rem; }
.err { display: flex; align-items: flex-start; gap: .45rem; margin-top: .5rem; }
.err .i { margin-top: .25rem; flex: none; }
.err:empty { display: none; }
.sent-card { text-align: center; display: grid; justify-items: center; gap: .5rem; background: var(--ok-wash); }
.sent-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 1.6rem; }
.sent-card h2 { font-family: var(--f-display); font-size: 1.5rem; }

/* requests */
.reqs { display: grid; gap: .75rem; }
.reqs + .soonlist, .soonlist .reqs { margin-top: .6rem; }
.req { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .9rem; padding: .9rem; border-radius: var(--r-lg); background: var(--faint); }
.req-d { display: grid; place-items: center; align-content: center; height: 64px; border-radius: 28px 28px 12px 12px; background: var(--ac-t); color: var(--ac-ink); }
.req-d small { font-weight: 600; font-size: .78rem; line-height: 1; }
.req-d b { font-size: 1.45rem; font-family: var(--f-display); line-height: 1.1; }
.st-approved .req-d { background: var(--ok-wash); color: var(--ok); }
.st-declined .req-d { background: var(--alert-wash); color: #8E3A30; }
.st-cancelled { opacity: .7; }
.st-cancelled .req-d { background: var(--surface-3); color: var(--ink-3); }
.req-t { display: grid; gap: .15rem; min-width: 0; }
.req-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.req-top strong { overflow-wrap: anywhere; }
.req-note { display: flex; gap: .5rem; align-items: flex-start; margin-top: .4rem; padding: .6rem .8rem; border-radius: var(--r); background: var(--surface); font-size: .92rem; }
.req-note .i { margin-top: .25rem; color: var(--ac-ink); flex: none; }
.req-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; font-weight: 600; }
.req .link { justify-self: start; margin-top: .25rem; }
.demo { margin-top: 1.25rem; padding: .75rem 1.1rem; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-3); }
.demo summary { cursor: pointer; font-size: .88rem; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.demo .form-act { flex-wrap: wrap; }

/* availability */
.av-grid { display: grid; gap: 0 1.25rem; }
.av-side { order: -1; }
@media (min-width: 960px) { .av-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .av-side { order: 2; position: sticky; top: calc(var(--head-h) + 3px + 1rem); } }
.qs-p { margin: -.2rem 0 .7rem; }
.fchip.ghost { background: transparent; border-style: dashed; }
.fchip.sm { min-height: 34px; padding: 0 .7rem; font-size: .85rem; }
.fchip small { font-weight: 500; opacity: .85; margin-left: .2rem; }
.chips .fchip .i { color: var(--ac-ink); margin-right: .35rem; }
.days { display: grid; gap: .55rem; }
.dayc { border-radius: var(--r-lg); background: var(--faint); overflow: hidden; transition: background .15s, box-shadow .15s; }
.dayc.has { background: var(--mist); }
.dayc.is-open { box-shadow: 0 0 0 2px var(--ac); background: var(--surface); }
.dayc-h { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "n tl chev" "n s chev"; gap: .25rem .8rem; align-items: center; width: 100%; padding: .7rem .85rem; min-height: 66px; }
.dayc-h:hover { background: color-mix(in srgb, var(--wash) 55%, transparent); }
.dayc-n { grid-area: n; display: grid; }
.dayc-n b { font-size: 1.05rem; }
.dayc-n small { font-size: .74rem; color: var(--ink-3); }
.dayc-h .tl { grid-area: tl; }
.dayc-s { grid-area: s; font-size: .86rem; color: var(--ink-2); overflow-wrap: anywhere; }
.dayc:not(.has) .dayc-s { color: var(--ink-3); }
.dayc-h .chev { grid-area: chev; transition: transform .15s; }
.dayc.is-open .chev { transform: rotate(180deg); }
.dayc-b { padding: .25rem .85rem 1rem; border-top: 1px solid var(--line); display: grid; gap: .55rem; background: var(--mist); }
.lbl { font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-top: .55rem; }
.ranges { display: grid; gap: .6rem; }
.range { flex-wrap: wrap; }
.range .tp { flex: 1 1 110px; }
.range-note { flex-basis: 100%; font-size: .82rem; color: var(--ac-ink); font-weight: 600; }
.day-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.tl { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--ac-t); overflow: hidden; }
.tl.big { height: 14px; }
.tl i { position: absolute; top: 0; bottom: 0; background: var(--ac-solid); border-radius: 999px; }
.tl i.cont { background: repeating-linear-gradient(135deg, var(--ac-solid) 0 4px, color-mix(in srgb, var(--ac-solid) 55%, #fff) 4px 8px); }
.tl::after { content: ""; position: absolute; inset: 0; opacity: .65; pointer-events: none; background: linear-gradient(#fff, #fff) 25% 0 / 2px 100% no-repeat, linear-gradient(#fff, #fff) 50% 0 / 2px 100% no-repeat, linear-gradient(#fff, #fff) 75% 0 / 2px 100% no-repeat; }
.dayc-h .tl { background: var(--ac-t); }
.gl-total { display: flex; align-items: center; gap: .9rem; margin: .1rem 0 .85rem; }
.gl-total b { font-family: var(--f-display); font-size: 2.8rem; line-height: 1; color: var(--ac-d); font-weight: 700; }
.gl-total span { font-weight: 600; line-height: 1.3; }
.gl-total small { font-weight: 500; color: var(--ink-3); }
.gl-ticks { position: relative; height: 1.1rem; margin-left: 46px; margin-right: 40px; font-size: .7rem; color: var(--ink-3); }
.gl-ticks em { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; font-weight: 600; }
.gl-rows { display: grid; gap: .5rem; }
.gl-rows li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 40px; gap: .5rem; align-items: center; }
.gl-d { font-weight: 700; font-size: .85rem; }
.gl-h { text-align: right; font-size: .82rem; font-weight: 600; }
.gl-foot { display: flex; gap: .45rem; align-items: flex-start; margin-top: .9rem; }
.gl-foot .i { color: var(--ok); margin-top: .2rem; }
@media (max-width: 959px) { .glance-card .gl-rows, .glance-card .gl-ticks, .glance-card .gl-foot { display: none; } .gl-total { margin-bottom: 0; } }
.send-card.is-dirty { background: linear-gradient(180deg, var(--gold-wash), var(--surface) 70%); }
.dirty, .clean { display: flex; gap: .5rem; align-items: flex-start; font-weight: 600; margin-bottom: .25rem; }
.dirty { color: var(--warn); }
.clean { color: var(--ok); }
.dirty .i, .clean .i { margin-top: .25rem; }
.send-card .btn { margin-block: .5rem .6rem; }

/* holidays on the calendar: a star for the six holiday-pay days, a ring for other holidays (shape, not only color) */
.holm { position: absolute; top: 3px; right: 4px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--surface); pointer-events: none; }
.hol-pay .holm { width: 11px; height: 11px; border: 0; border-radius: 0; background: var(--gold-2); clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 35%, 38% 35%); top: 2px; right: 3px; }
.cal-d.is-past .holm { opacity: .45; }
.cal-d.sel .holm { border-color: var(--on-ac); background: transparent; }
.cal-d.sel.hol-pay .holm { background: var(--on-ac); }
.k-hp { background: var(--gold-2); clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 35%, 38% 35%); border-radius: 0; width: 15px; height: 15px; }
.k-ho { border: 1.5px solid var(--ink-3); background: var(--surface); border-radius: 50%; width: 10px; height: 10px; margin-inline: 2px 6px; }
.cal-hols { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.cal-hols h4 { margin: 0 0 .5rem; font-family: var(--f-ui); font-size: .95rem; font-weight: 700; color: var(--ink); }
.cal-hols ul { display: grid; gap: .45rem; margin-bottom: .6rem; }
.cal-hols li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; }
.cal-hols li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cal-hols em { display: inline-block; margin-left: .25rem; padding: .05rem .5rem; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); font-style: normal; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.hk { flex: none; width: 10px; height: 10px; margin-top: .4rem; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--surface); }
.hk.pay { width: 14px; height: 14px; margin-top: .28rem; border: 0; border-radius: 0; background: var(--gold-2); clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 35%, 38% 35%); }
.hol-line { display: inline-flex; align-items: flex-start; gap: .35rem; margin-top: .2rem; color: var(--gold-ink); font-weight: 600; }
.hol-line .i { flex: none; margin-top: .25rem; color: var(--gold-2); }
.sel-sum .hol-line { color: var(--gold-ink); }
.sel-sum .hol-line .i { color: var(--gold-2); }