/* Handover recovery fixes (index-tws2610hf.js). Uses the app's own colour variables so a theme can restyle it. */

/* 1. Right to Work "!" next to the name on the rota: same look as the hours warning */
.tws-note{margin-left:4px}

/* 2. Monthly payslips: tiles, two per row on desktop and phone, nothing overflows */
.list.tws-slip-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;margin:10px 0 0;list-style:none}
.list.tws-slip-tiles>li{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:8px;min-width:0;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.list.tws-slip-tiles>li+li{border-top:1px solid var(--line)}
.list.tws-slip-tiles>li>*{min-width:0;max-width:100%}
.list.tws-slip-tiles .grow,.list.tws-slip-tiles .tiny,.list.tws-slip-tiles b,.list.tws-slip-tiles strong{overflow-wrap:anywhere}
.list.tws-slip-tiles .row,.list.tws-slip-tiles .actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.list.tws-slip-tiles .btn{max-width:100%;white-space:normal}
@media (max-width:420px){.list.tws-slip-tiles{gap:8px}.list.tws-slip-tiles>li{padding:8px}.list.tws-slip-tiles .btn{flex:1 1 100%}}

/* 3. Holidays: small buttons top right of the page title */
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pagehead>h1{margin-right:auto}
.tws-ph-actions:empty{display:none}
.tws-holbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.tws-holbtns .btn{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.tws-holbtns .btn[aria-expanded="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
/* their forms open inline, full width under the title and buttons, so they are in view without scrolling */
.tws-ph-form{flex:1 1 100%;min-width:0}
.tws-ph-form:empty{display:none}
.tws-ph-form>.formcard{width:100%;max-width:560px;margin:8px 0 0 auto;text-align:left}
.tws-ph-form>.formcard h2:focus{outline:none}
@media (max-width:699px){.tws-ph-form>.formcard{max-width:none;margin-left:0}}

/* 4. Events on desktop: Coming up / Every week / Past as rows, all at once */
.tws-ev-rows{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.tws-ev-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:1.05rem}
.tws-ev-count{display:inline-block;min-width:1.6em;padding:0 6px;border-radius:999px;background:var(--brand-soft);color:var(--ink);font-size:.8rem;text-align:center;line-height:1.6}

/* 10. Your details */
.tws-details{max-width:560px}

/* 12. Developer maintenance screen */
.tws-maint .card{max-width:420px}