/* Sheets screen (the morning sheet check). Same tokens as styles.css; every class starts with sc- so nothing
   clashes with the app's bottom "sheet". */
:root { --sc-mis: var(--late); --sc-late: var(--warn); --sc-xl: var(--info); --sc-lock: #8a90a2; --sc-ok: var(--ok); --sc-skip: #c9c3b5; }

/* six tabs in the bottom bar (Sheets after Home) */
#tabs { grid-template-columns: repeat(6, 1fr); padding: 0 4px var(--safe-b); }
#tabs .tab { font-size: 10.5px; letter-spacing: 0; }
#tabs .tab-plus { width: 42px; }

.sc-top { padding: 18px 18px 16px; }
.sc-top-n { font-size: 14px; color: var(--muted); }
.sc-top-n b { font: 800 30px/1 var(--display); color: var(--text); letter-spacing: -.02em; margin-right: 4px; }
.sc-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.sc-pill { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 13px; background: var(--paper); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sc-pill b { font: 800 19px/1.1 var(--display); color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
.sc-pill.p-mis { background: var(--late-soft); } .sc-pill.p-mis b { color: var(--late); }
.sc-pill.p-late { background: var(--flag-soft); } .sc-pill.p-late b { color: var(--warn-ink); }
.sc-pill.p-ok { background: var(--ok-soft); } .sc-pill.p-ok b { color: var(--ok); }
.sc-pill.p-xl { background: var(--info-soft); } .sc-pill.p-xl b { color: var(--info); }

.sc-bar { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; margin-top: 14px; background: var(--paper-2); }
.sc-bar i { display: block; min-width: 3px; }
.b-mis { background: var(--sc-mis); } .b-late { background: var(--sc-late); } .b-xl { background: var(--sc-xl); }
.b-lock { background: var(--sc-lock); } .b-ok { background: var(--sc-ok); } .b-skip { background: var(--sc-skip); }

.sc-depts { display: grid; gap: 10px; }
.sc-dept { display: block; padding: 15px 16px 14px; transition: transform .15s ease; }
.sc-dept:active { transform: scale(.99); }
.sc-dept.has-prob { box-shadow: var(--shadow), inset 4px 0 0 var(--late); }
.sc-dept-top { display: flex; align-items: center; gap: 10px; }
.sc-dept-n { flex: 1; min-width: 0; font: 700 18px/1.2 var(--display); letter-spacing: -.01em; }
.sc-dept-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sc-dept .chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--faint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-dept-s { margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.sc-dept .sc-bar { margin-top: 10px; height: 6px; }

.sc-job { margin-top: 12px; padding: 14px 16px; }
.sc-job-t { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.sc-job-c { margin-top: 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-job .meter { margin: 10px 0 0; }
.sc-job .meter > i { transition: width .4s ease; }
.sc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--paper-2); border-top-color: var(--ink); animation: sc-spin .8s linear infinite; flex: none; }
@keyframes sc-spin { to { transform: rotate(360deg); } }

.sc-list { display: grid; gap: 8px; }
.sc-prob { gap: 10px; }
.sc-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; border: 0; cursor: pointer; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 13px 12px 13px 14px; }
.sc-row:active { transform: scale(.99); }
.sc-row .chev { width: 18px; height: 18px; flex: none; align-self: center; fill: none; stroke: var(--faint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-badge { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; background: var(--paper); }
.sc-badge.b-mis { background: var(--late-soft); } .sc-badge.b-late { background: var(--flag-soft); } .sc-badge.b-ok { background: var(--ok-soft); }
.sc-badge.b-xl { background: var(--info-soft); } .sc-badge.b-lock, .sc-badge.b-skip { background: var(--paper-2); }
.sc-row-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-row-n { font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.sc-row-l { font-size: 13px; line-height: 1.4; color: var(--text); opacity: .85; overflow-wrap: anywhere; }
.sc-row-o { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-top: 3px; min-width: 0; }
.sc-row-o .av { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }

.sc-more { margin-top: 14px; background: var(--paper-2); border-radius: var(--r); padding: 4px 10px 10px; }
.sc-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 46px; font-weight: 700; font-size: 14px; }
.sc-more > summary::-webkit-details-marker { display: none; }
.sc-more > summary .count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-more .sc-row { box-shadow: none; }

/* the detail (bottom sheet) */
.sc-detail { max-height: 92vh; overflow-y: auto; }
.sc-d-who { display: flex; align-items: center; gap: 10px; }
.sc-d-who > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-d-who b { font-size: 15px; }
.sc-d-who span:not(.chip):not(.av) { font-size: 12.5px; color: var(--muted); }
.sc-d-who .av { width: 36px; height: 36px; border-radius: 12px; font-size: 14px; }
.sc-chip.p-mis { background: var(--late-soft); color: var(--late); } .sc-chip.p-late { background: var(--flag-soft); color: var(--flag); }
.sc-chip.p-ok { background: var(--ok-soft); color: var(--ok); } .sc-chip.p-xl { background: var(--info-soft); color: var(--info); }
.sc-d-line { margin-top: 14px; font: 700 18px/1.35 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.sc-d-note { margin-top: 8px; font-size: 13px; color: var(--info); }
.sc-probs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sc-probs li { background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.sc-rows { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.sc-probs .pt-link { display: inline-block; margin-top: 6px; font-size: 13px; }
.sc-d-where { margin: 12px 0; font-size: 13px; color: var(--muted); }
.sc-detail > .btn-accent { margin-top: 12px; }
.sc-d-k { margin: 20px 2px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-remind { height: auto; min-height: 120px; padding: 12px; line-height: 1.45; font-size: 14px; resize: vertical; }
.sc-detail .acts2 { margin-top: 10px; }
.sc-d-how { font-size: 13px; color: var(--muted); line-height: 1.55; overflow-wrap: anywhere; }
.sc-fix { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 6px; }
.sc-fix > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 14px; color: var(--ink); }
.sc-fix .field { margin-top: 10px; }
.sc-fix select.input { appearance: auto; }
.sc-check { display: flex; align-items: center; gap: 10px; margin: 14px 2px; font-size: 14px; }
.sc-check input { width: 20px; height: 20px; }
.sc-fix .btn { margin-top: 6px; }