/* Team calendar and time off. Every state is written in words as well as coloured, so colour is never the only signal. */
.tabs a{display:inline-flex;align-items:center;border:2px solid var(--border);background:var(--surface);padding:.35rem .9rem;border-radius:999px;font-weight:700;color:var(--text2);min-height:2.3rem;text-decoration:none}
.tabs a[aria-selected=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.cal-nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}
.cal-nav .ttl{font-family:var(--head);font-size:1.15rem;flex:1;min-width:8rem}
.weekwrap{overflow-x:auto;padding-bottom:.4rem;margin:0 -.2rem}
.weekgrid{display:grid;grid-template-columns:minmax(8.5rem,11rem) repeat(7,minmax(5.4rem,1fr));gap:.3rem;min-width:48rem;padding:0 .2rem}
.wg-head{text-align:center;font-weight:700;font-size:.86rem;padding:.3rem 0;line-height:1.2}
.wg-head small{display:block;font-weight:400;color:var(--text3);font-size:.74rem}
.wg-head.today{color:var(--brand-text)}.wg-head.today small{color:var(--brand-text)}
.wg-head .hol{display:block;font-size:.66rem;font-weight:700;color:var(--warn);line-height:1.1}
.wg-person{display:flex;align-items:center;gap:.5rem;padding:.2rem .3rem;position:sticky;left:0;background:var(--bg);z-index:1;min-width:0}
.wg-person .nm{min-width:0}.wg-person .nm b{display:block;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wg-person .nm span{font-size:.74rem;color:var(--text3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell{position:relative;border:2px solid transparent;border-radius:11px;min-height:3.3rem;padding:.25rem .3rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:.76rem;line-height:1.2;cursor:pointer;background:var(--surface2);color:var(--text2);font-family:inherit}
.cell b{font-size:.82rem;display:block}
.cell:hover{border-color:var(--border-strong)}
.cell.available{background:var(--ok-soft);color:var(--ok)}
.cell.limited{background:var(--warn-soft);color:var(--warn)}
.cell.unavailable{background:var(--surface2);color:var(--text3)}
.cell.off{background:repeating-linear-gradient(135deg,var(--brand-soft) 0 7px,var(--surface) 7px 14px);color:var(--brand-text);border-color:var(--brand-soft)}
.cell.none{background:transparent;border:2px dashed var(--border);color:var(--text3)}
.cell.today{border-color:var(--brand)}
.cell.holiday{box-shadow:inset 0 0 0 2px var(--warn-soft)}
.cell .mark{position:absolute;top:.15rem;right:.2rem;font-size:.62rem;font-weight:700;background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;padding:0 .3rem;color:var(--text2)}
.cal-legend{display:flex;gap:.5rem 1rem;flex-wrap:wrap;font-size:.8rem;color:var(--text2);margin:.6rem 0 0}
.cal-legend span{display:inline-flex;align-items:center;gap:.35rem}.cal-legend i{width:1.1rem;height:.9rem;border-radius:4px;display:inline-block;border:1px solid var(--border)}
.cal-legend .a{background:var(--ok-soft)}.cal-legend .l{background:var(--warn-soft)}.cal-legend .u{background:var(--surface2)}
.cal-legend .o{background:repeating-linear-gradient(135deg,var(--brand-soft) 0 4px,var(--surface) 4px 8px)}
.cal-legend .n{border:2px dashed var(--border)}

.daycard{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:.5rem;cursor:pointer;width:100%;text-align:left;color:var(--text)}
.daycard:hover{border-color:var(--brand)}
.daycard .grow b{display:block}.daycard .grow span{font-size:.84rem;color:var(--text3)}

.monthgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem}
.mhead{text-align:center;font-size:.76rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;padding:.2rem 0}
.mday{min-height:5.6rem;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:.3rem .35rem;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:.2rem;color:var(--text);font-family:inherit}
.mday:hover{border-color:var(--brand)}
.mday.out{opacity:.5}
.mday.today{border:2px solid var(--brand)}
.mday .n{font-weight:700;font-size:.85rem}
.mday .hol{font-size:.64rem;line-height:1.1;font-weight:700;color:var(--warn)}
.mday .offs{display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.mday .chg{font-size:.66rem;color:var(--text3);line-height:1.15}
@media (max-width:640px){.mday{min-height:4rem}.mday .chg,.mday .hol{display:none}}

/* One block per weekday: name, status, from, until on the first line; a note and "copy hours" underneath.
   Every cell may shrink, so nothing can spill out of its card at any window width or text size. */
.pattern{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:minmax(6.5rem,max-content) minmax(9.5rem,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:.45rem .6rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--border)}
.prow:last-child{border-bottom:0}
.prow>*{min-width:0}
.prow>b{grid-row:1 / span 2;align-self:start;padding-top:.5rem}
.prow input,.prow select{width:100%;min-height:2.3rem;padding:.25rem .5rem}
.prow .note{grid-column:2 / span 2}
.prow .copy{grid-column:4;justify-self:stretch;white-space:normal;text-align:center;line-height:1.15}
.prow.copied{animation:copied 1.4s ease-out}
@keyframes copied{from{background:var(--brand-soft)}to{background:transparent}}
.savebar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
@media (max-width:760px){
  .prow{grid-template-columns:1fr 1fr}
  .prow>b{grid-row:auto;grid-column:1 / -1;padding-top:0}
  .prow>select,.prow .note,.prow .copy{grid-column:1 / -1}
}
.leave-item{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--border)}.leave-item:last-child{border-bottom:0}
.leave-item .grow b{display:block}
.pillrow{display:flex;gap:.4rem;flex-wrap:wrap}
.pillrow label{display:inline-flex;align-items:center;gap:.4rem;border:2px solid var(--border-strong);border-radius:999px;padding:.25rem .85rem;cursor:pointer;font-weight:700;min-height:2.3rem}
.pillrow input{position:absolute;opacity:0;pointer-events:none}
.pillrow label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.pillrow label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.pillrow label:has(input:disabled){opacity:.5;cursor:not-allowed}