/* Month calendars, the coverage board and the roster page layout. */

/* Month calendars */
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-head span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 0 4px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { min-height: 104px; padding: 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.day-blank { background: transparent; border: 1px dashed transparent; }
.day-num { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 15px; font-weight: 700; }
.day-num small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.day.is-weekend { background: #FBFCFD; }
.day.is-past { opacity: .62; }
.day.is-today { border-color: var(--txm-blue); box-shadow: 0 0 0 2px var(--blue-25); }
.day.is-today .day-num span:first-child { color: var(--blue-ink); }
.day.is-off { background: repeating-linear-gradient(135deg, var(--sunken) 0 8px, #F6F8FA 8px 16px); color: var(--ink-3); }
.day-off-note { font-size: 13px; font-weight: 700; color: var(--ink-3); margin-top: auto; }
.shift { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 30px; padding: 0 8px; border-radius: 8px; background: var(--blue-ink); color: #fff; font-size: 13px; font-weight: 700; border: 0; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.shift.is-night { background: var(--blue-deep); }
.shift[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--blue-50); }

/* Coverage board blocks */
.people-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 8px; }
.blk { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 48px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, opacity .2s, transform .12s; position: relative; }
.blk:hover { border-color: var(--blue-50); }
.blk:active { transform: scale(.98); }
.blk.is-night { background: var(--blue-8); }
.blk-kind { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.blk-kind .i { width: 13px; height: 13px; }
.blk-who { font-size: 15px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-flags { position: absolute; top: 6px; right: 7px; display: flex; gap: 4px; color: var(--ink-2); }
.blk-flags .i { width: 14px; height: 14px; }
.blk.is-open { border: 1.5px dashed var(--attn); background: var(--attn-bg); }
.blk.is-open .blk-who { color: var(--attn-ink); }
.blk.is-conflict { border-color: var(--crit); box-shadow: inset 0 0 0 1px var(--crit); }
.blk.is-conflict .blk-flags { color: var(--crit-ink); }
.blk.is-hl { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }
.blk.is-hl .blk-kind { color: var(--blue-25); }
.blk.is-dim { opacity: .34; }
.blk[aria-pressed="true"] { border-color: var(--txm-blue); box-shadow: 0 0 0 3px var(--blue-25); }
.blk.is-fresh { animation: fill-in .5s var(--ease) both; }

/* Roster: month header, health strip, board and inspector layout */
.month-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.health { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.health-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.health-item:hover { border-color: var(--blue-50); color: var(--ink); }
.health-item[aria-pressed="true"] { border-color: var(--txm-blue); box-shadow: 0 0 0 3px var(--blue-25); }
.health-item strong { display: block; font-size: 22px; line-height: 1.1; }
.health-item span { display: block; font-size: 13px; color: var(--ink-2); }
.ring-sm { position: relative; width: 44px; height: 44px; flex: none; }
.ring-sm svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-sm circle { fill: none; stroke-width: 6; }
.ring-sm .track { stroke: var(--sunken); }
.ring-sm .fill { stroke: var(--txm-green); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.board-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.board .cal { gap: 6px; }
.board .day { min-height: 0; padding: 6px; gap: 5px; }
.board .day-num { font-size: 13px; padding: 0 2px; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 12; min-width: 230px; padding: 6px; display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2); animation: rise .2s var(--ease); }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: none; text-align: left; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.menu button:hover, .menu a:hover { background: var(--blue-8); color: var(--ink); }
.timeline { position: relative; height: 44px; border-radius: 10px; overflow: hidden; display: flex; border: 1px solid var(--line); }
.timeline span { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.timeline .t-day { background: var(--blue-15); color: var(--blue-deep); }
.timeline .t-night { background: var(--txm-dark-gray); color: #fff; }
.timeline .t-full { background: var(--green-25); color: var(--txm-dark-green); }
.mini-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mini-cal span, .mini-cal button { min-height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.mini-cal button { border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: background .15s, transform .12s; }
.mini-cal button:active { transform: scale(.92); }
.mini-cal button[aria-pressed="true"] { background: var(--txm-dark-gray); border-color: var(--txm-dark-gray); color: #fff; }
.mini-cal .dow { font-size: 11px; color: var(--ink-3); min-height: 20px; }
.scale { position: relative; height: 28px; border-radius: 14px; background: var(--sunken); }
.scale .band { position: absolute; top: 0; bottom: 0; background: var(--green-25); border-left: 2px solid var(--green-50); border-right: 2px solid var(--green-50); }
.scale .target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--green-ink); }
.scale .mark { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--blue-ink); border: 3px solid #fff; box-shadow: var(--shadow-1); transition: left .8s var(--ease); }
.scale .mark.out { background: var(--attn); }
.who-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.who-row:first-child { border-top: 0; }