/* the assistant's chair, aftercare, sterilisation & safety log (as2.js) */
.as2-wrap { max-width: 900px; margin: 0 auto; padding: 18px 22px 48px; display: flex; flex-direction: column; gap: 14px }
.as2-ask { border: 1px solid var(--sep); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; background: #fff }
.as2-ask h2 { margin: 0; font-size: var(--fs-20); font-weight: 600 }
.as2-chairs { display: flex; flex-wrap: wrap; gap: 8px }
.as2-chairs.big { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 6px }
.as2-pickc { min-height: 64px; border: 1px solid var(--sep); border-radius: 12px; padding: 10px 14px; text-align: start; font-size: var(--fs-15); font-weight: 600; background: #fff; display: flex; flex-direction: column; gap: 2px; justify-content: center }
.as2-pickc small { font-weight: 400; color: var(--ink2); font-size: var(--fs-13) }
.as2-pickc em { font-style: normal; font-size: var(--fs-12); color: var(--c1t); font-weight: 600 }
.as2-pickc[aria-pressed="true"] { border-color: var(--c1); box-shadow: 0 0 0 2px var(--c1b) }
.as2-pickc:hover { background: #f7f7f9 }
.as2-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px }
.as2-who2 { font-size: var(--fs-15) }
.as2-who2 small { color: var(--ink2); font-weight: 400 }
.as2-live { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 14px; border-radius: 12px; background: #f4f8ff; font-size: var(--fs-13) }
.as2-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.as2-count { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--sep); border-radius: 12px; color: var(--ink); text-decoration: none; background: #fff }
.as2-count span { font-size: var(--fs-12); color: var(--ink2); font-weight: 600 }
.as2-count b { font-size: var(--fs-22); font-weight: 600; font-variant-numeric: tabular-nums }
.as2-count small { font-size: var(--fs-12); color: var(--ink2) }
.as2-count.hot { border-color: #ffd28a; background: #fffaf0 }
.as2-count:hover { background: #f7f7f9 }
.as2-count.as2-bad { border-color: #f5b5ae; background: #fff6f5 }
.as2-count.as2-bad small { color: #b42318; font-weight: 600 }
/* expired or expiring stock on the assistant's home (StockAlerts.cs) */
.as2-exp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 14px; border-radius: 12px; background: #fffaf0; border: 1px solid #ffd28a; font-size: var(--fs-13); line-height: 1.45 }
.as2-exp span.gone { color: #b42318 }
.as2-exp .lk-link { margin-inline-start: auto }
.as2-list { display: flex; flex-direction: column; border: 1px solid var(--sep); border-radius: 12px; overflow: hidden; background: #fff }
.as2-row { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--sep) }
.as2-row:last-child { border-bottom: 0 }
.as2-row.next { box-shadow: inset 3px 0 0 var(--c1); background: #f8fbff }
[dir=rtl] .as2-row.next { box-shadow: inset -3px 0 0 var(--c1) }
.as2-row.past { opacity: .7 }
.as2-time { font-weight: 600; font-size: var(--fs-15); font-variant-numeric: tabular-nums; display: flex; flex-direction: column }
.as2-time small { font-weight: 400; color: var(--ink2); font-size: var(--fs-12) }
.as2-main { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.as2-line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.as2-line1 a { color: var(--ink); text-decoration: none; font-size: var(--fs-14) }
.as2-line1 a:hover { text-decoration: underline }
.as2-st { font-size: var(--fs-12); font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #f2f2f4; color: var(--ink2) }
.as2-st-seated { background: var(--c1); color: #fff }
.as2-st-arrived { background: #ffe7bf; color: #8a4a00 }
.as2-st-done, .as2-st-finished { background: var(--c4b); color: var(--c4t) }
.as2-what { font-size: var(--fs-13) }
.as2-done { color: var(--c4t); font-weight: 600 }
.as2-tray, .as2-mats { font-size: var(--fs-12); color: var(--ink2); line-height: 1.55 }
.as2-tray b, .as2-mats b { color: var(--ink); font-weight: 600 }
.as2-mat { display: inline-block; margin-inline-end: 10px }
.as2-mat.low { color: #b42318; font-weight: 600 }
.as2-chipsrow { display: flex; flex-wrap: wrap; gap: 6px }
.as2-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 4px 3px 10px; border-radius: 14px; background: #fff1db; color: #8a4a00; font-size: var(--fs-12); font-weight: 500 }
[dir=rtl] .as2-chip { padding: 3px 10px 3px 4px }
.as2-chip:not(:has(button, a)) { padding: 3px 10px }
.as2-k-alert { background: #ffe9e7; color: #c4170c }
.as2-ok, .as2-sent { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); color: var(--c4t); font-weight: 500 }
.as2-after, .as2-today { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.as2-today { padding: 8px 0 2px }
.as2-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
/* sheets */
.as2-sheet { width: 460px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto }
.as2-sheet.wide { width: 720px }
.as2-cardpick, .as2-lang { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.as2-preview { white-space: pre-wrap; font-size: var(--fs-13); line-height: 1.65; padding: 12px 14px; border-radius: 12px; background: #f6f6f7; max-height: 300px; overflow: auto }
.as2-acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap }
.as2-acts .go2 { padding: 0 18px }
.as2-cardlist { display: flex; flex-direction: column; border: 1px solid var(--sep); border-radius: 12px; overflow: hidden }
.as2-crow { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--sep) }
.as2-crow:last-child { border-bottom: 0 }
.as2-crow.off { opacity: .6 }
.as2-edit2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.as2-edit2 > div { display: flex; flex-direction: column; gap: 10px }
.as2-sheet textarea { border: 1px solid var(--sep); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: var(--fs-13); line-height: 1.5; resize: vertical }
/* safety */
/* the safety log's styles are in safety.css (sf3-) */
.as2-ticks { display: flex; flex-direction: column; gap: 4px }
.as2-tick { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; font-size: var(--fs-13); border-bottom: 1px solid var(--sep2); cursor: pointer }
.as2-tick input { width: 20px; height: 20px; margin: 0; flex: none }
.as2-eline { display: flex; gap: 8px; align-items: center }
.as2-eline input { flex: 1; height: 36px; border: 1px solid var(--sep); border-radius: 9px; padding: 0 10px; font: inherit; font-size: var(--fs-13) }
.as2-eline.off input { color: var(--ink3); text-decoration: line-through }
.as2-askin { width: 100%; height: 34px; border: 1px solid var(--sep); border-radius: 8px; padding: 0 10px; font: inherit; margin-top: 8px }
@media (max-width: 760px) {
  .as2-wrap { padding: 14px 12px 40px }
  .as2-counts { grid-template-columns: 1fr 1fr; gap: 6px }
  .as2-row { grid-template-columns: 52px 1fr; gap: 10px; padding: 12px }
  .as2-edit2 { grid-template-columns: 1fr }
}
/* the prep list printed for the surgery wall: the list only */
@media print {
  .as2-page .bar .nav, .as2-page .bar .btn, .as2-page .as2-chairs, .as2-page .as2-counts, .as2-page .as2-foot, .as2-page .as2-live, .as2-page button, .as2-page .mini-btn { display: none !important }
  .app:has(.as2-page) { display: block; height: auto }
  .app:has(.as2-page) .side, .app:has(.as2-page) .topbar { display: none !important }
  .as2-page .scroll { overflow: visible !important; height: auto !important }
  .as2-row { break-inside: avoid }
}
.as2-chip .mini-btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit }
.as2-chip .mini-btn.go { color: #fff }