html,body{width:100%;max-width:100%;overflow-x:hidden}
main{width:100%;max-width:620px;min-width:0;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
header{gap:10px;align-items:flex-start;flex-wrap:wrap;min-width:0}
header>div:first-child{flex:1 1 130px;min-width:0}
.header-actions{display:flex;flex:0 1 auto;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.header-actions button{padding:10px 12px;font-size:14px;white-space:nowrap}
.week,.calendar{width:100%;min-width:0;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.week span{min-width:0}
.day{width:100%;min-width:0;padding:0;font-size:clamp(13px,4vw,16px);border-radius:10px;overflow:hidden}
.legend{flex-wrap:wrap;min-width:0}
.legend span{min-width:0;overflow-wrap:anywhere}
.card,footer,dialog{max-width:100%;min-width:0}
.day{aspect-ratio:auto;min-height:76px;display:flex;flex-direction:column;gap:3px;padding:6px 1px}
.day.assigned{color:#fff}
.day-number{font-size:17px;line-height:1.2}
.main-initials{font-size:10px;line-height:1.1}
.extra-badge{display:block;max-width:100%;white-space:nowrap;overflow:hidden;font-size:9px;font-weight:650;line-height:1.5;border-radius:5px;padding:0 3px;background:#fff;color:#18202a;border-left:3px solid var(--extra-color)}
.person{gap:8px;min-width:0}.person-info{min-width:0;flex:1;overflow-wrap:anywhere}.person-info small{display:block;margin:3px 0 0 14px}.person-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.person select{max-width:47%;min-width:0;padding:9px 5px;font-size:12px;background:var(--bg);color:var(--text);border:1px solid #aaa5}
.empty-hint{font-size:12px;color:var(--muted)}
button:disabled{opacity:.55;cursor:wait}.danger{background:#c43c3c}
.day:focus-visible{outline:3px solid var(--accent)}
footer{padding-bottom:env(safe-area-inset-bottom)}
.shift-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:52%;min-width:0}
.shift-actions button{font-size:12px;white-space:normal;padding:9px 10px;min-height:36px}
.shift-actions .ghost{border:1px solid #aaa5}
.shift-actions button:disabled{cursor:not-allowed}
@media(max-width:360px){.person{flex-wrap:wrap}.shift-actions{max-width:100%;width:100%;justify-content:flex-start}.shift-actions button{flex:1}}

@media(max-width:420px){
  main{padding-top:12px}
  h1{font-size:22px;margin-bottom:10px}
  header .header-actions{flex-basis:100%;justify-content:stretch}
  .header-actions button{flex:1 1 0}
  .monthbar h2{font-size:18px}
  .monthbar button{padding:5px 10px}
  .week{font-size:11px}
}