/* quality.css -- session 279: Field > Quality (quality.js). Built on tokens.css; matches the approved mockups
   (briefs/s279-mockup-quality-1440.html and -390.html). Phone layout below 760 px. */
.ql{ max-width:1680px; margin:0 auto; padding:var(--s5) var(--s5) var(--s7); color:var(--ink); font-family:var(--ui-font) }
.ql.ql-busy{ opacity:.6; transition:opacity .2s }
.ql-head{ display:flex; align-items:center; gap:16px; margin-bottom:var(--s5) }
.ql-mark{ width:52px; height:52px; border-radius:14px; background:var(--teal-dark); color:var(--white); display:grid; place-items:center; flex-shrink:0 }
.ql-titles{ flex:1; min-width:0 }
.ql-h1{ margin:0; font-size:36px; font-weight:800; letter-spacing:-.02em; line-height:1.05; color:var(--ink) }
.ql-sub{ color:var(--text); font-size:15px; margin-top:4px }
.ql-refresh{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:12px; border:1.5px solid var(--teal-dark); background:var(--white); color:var(--teal-dark); font-weight:700; font-size:15px; cursor:pointer; font-family:inherit }
.ql-refresh:hover{ background:var(--teal-pale) }
.ql-phone-only{ display:none !important }

/* Session 280 (Quality A): one stats bar, then the tabs and roster beside a right rail. */
.ql-head{ align-items:center }
.ql-head .ql-h1{ font-size:30px; margin-right:6px }
.ql-head .ql-sub{ flex:1; min-width:0; margin:0; color:var(--text); font-size:14px }
.ql-sbar{ display:grid; grid-template-columns:minmax(0, 2.25fr) repeat(4, minmax(0, 1fr)); background:var(--white); border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:18px; overflow:hidden }
.ql-sb-team{ padding:14px 18px 12px; min-width:0 }
.ql-sb-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.ql-sb-big{ font-size:38px; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--teal-dark) }
.ql-sb-t{ font-weight:700; font-size:14px; color:var(--ink); line-height:1.25 }
.ql-sb-dim{ font-weight:500; color:var(--muted); font-size:12.5px }
.ql-bar{ display:flex; gap:3px; height:10px; border-radius:99px; overflow:hidden; background:var(--gray-bg); margin-bottom:8px }
.ql-bar-seg{ height:100%; border-radius:2px }
.ql-legend{ display:flex; flex-wrap:wrap; gap:2px 6px }
.ql-lg{ display:inline-flex; align-items:center; gap:6px; border:0; background:none; border-radius:7px; padding:3px 6px; font:500 12.5px var(--ui-font); color:var(--text); cursor:pointer }
.ql-lg b{ font-weight:700; color:var(--ink) }
.ql-lg:hover{ background:var(--gray-bg) }
.ql-lg.on{ background:var(--teal-dark); color:var(--white) }
.ql-lg.on b{ color:var(--white) }
.ql-dot{ width:10px; height:10px; border-radius:3px; display:inline-block }
.ql-sb-cell{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; border:0; border-left:1px solid var(--line); background:none; padding:14px 18px 12px; font:inherit; cursor:pointer; min-width:0 }
.ql-sb-cell:hover{ background:var(--teal-pale) }
.ql-sb-n{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.05; color:var(--ink) }
.ql-sb-warn .ql-sb-n{ color:#c4561b }
.ql-sb-s{ color:var(--muted); font-size:12.5px; line-height:1.35 }
.ql-sb-go{ display:none }
/* Session 323: a tile's values as labelled values, label left, value right, one per line (they were joined by middle dots). */
.ql-sb-kv{ display:grid; grid-template-columns:auto auto; justify-content:start; gap:1px 10px; color:var(--muted); font-size:12.5px; line-height:1.4 }
.ql-sb-kv .ql-sb-v{ font-weight:700; color:var(--ink) }
.ql-sb-kv-team{ align-self:center }
.ql-b1{ background:#2f9e8f; color:#fff }
.ql-b2{ background:#1D6E77; color:#fff }
.ql-b3{ background:#9fb3b5; color:#14363a }
.ql-b4{ background:#f2c46b; color:#5a3b00 }
.ql-b5{ background:#e98a5c; color:#4d1d05 }
.ql-b0{ background:#d6dcdd; color:#3a4446 }

.ql-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 316px; gap:18px; align-items:start }
.ql-main{ min-width:0 }
.ql-rail{ display:flex; flex-direction:column; gap:14px; position:sticky; top:92px; max-height:calc(100vh - 110px); overflow:auto; min-width:0 }
.ql-rsegs{ display:flex; gap:2px; background:var(--gray-bg); border-radius:10px; padding:3px; margin-bottom:6px }
.ql-rseg{ flex:1; border:0; background:none; border-radius:8px; padding:7px 6px; font:600 13px var(--ui-font); color:var(--text); cursor:pointer; white-space:nowrap }
.ql-rseg span{ font-weight:500; opacity:.75; margin-left:3px }
.ql-rseg.on{ background:var(--teal-dark); color:var(--white) }

.ql-card{ background:var(--white); border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:14px 16px; min-width:0 }
.ql-card-flush{ padding:0; overflow:hidden }
.ql-card-h{ font-weight:800; font-size:15.5px; padding-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px }
.ql-li{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line) }
.ql-li-m{ flex:1; min-width:0 }
.ql-li-t{ display:block; font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ql-li-t:hover{ text-decoration:underline }
.ql-li-s{ color:var(--muted); font-size:12.5px; margin-top:2px }
.ql-li-s b{ font-weight:700; color:var(--text) }
.ql-li-s b.ql-late{ color:#c4561b }
.ql-av{ width:30px; height:30px; border-radius:50%; background:var(--teal-pale); color:var(--teal-deep); display:grid; place-items:center; font-weight:700; font-size:11.5px; flex-shrink:0 }
.ql-pin{ color:var(--teal-dark); width:30px; display:grid; place-items:center; flex-shrink:0 }
.ql-plan{ flex-shrink:0; border:1.5px solid var(--teal-dark); color:var(--teal-dark); border-radius:9px; padding:5px 9px; font-weight:700; font-size:12.5px; text-decoration:none; white-space:nowrap }
.ql-plan:hover{ background:var(--teal-dark); color:var(--white) }
.ql-more{ margin-top:4px; background:none; border:0; color:var(--teal-dark); font:700 13px var(--ui-font); cursor:pointer; padding:6px 0; text-decoration:underline }
.ql-empty{ color:var(--muted); padding:12px 0; font-size:14px }
.ql-rv{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border:0; border-top:1px solid var(--line); background:none; font:500 14px var(--ui-font); color:var(--ink); text-align:left; cursor:pointer }
.ql-rv:hover span, .ql-rv.on span{ color:var(--teal-dark); text-decoration:underline }
.ql-rv b{ font-weight:800; font-size:15px; color:var(--muted) }
.ql-n-teal{ color:var(--teal-dark) !important }
.ql-n-warn{ color:#c4561b !important }
.ql-n-plain{ color:var(--ink) !important }
#qlPanel:empty{ display:none }
.ql-panel{ margin-bottom:16px }
.ql-x{ background:none; border:0; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px }
.ql-note{ color:var(--text); font-size:13.5px; line-height:1.5; margin:0 0 12px }
.ql-sub-h{ font-weight:700; font-size:14px; margin:16px 0 4px }
.ql-dim{ color:var(--muted) }
.ql-nil{ color:var(--muted) }
.ql-tag{ display:inline-block; font-size:11.5px; font-weight:700; background:var(--teal-pale); color:var(--teal-deep); border-radius:6px; padding:1px 7px; margin-left:4px }
.ql-tag-warn{ background:#ffe3d3; color:#a2440f }
.ql-btn{ height:34px; padding:0 14px; border-radius:9px; border:0; background:var(--teal-dark); color:var(--white); font:700 13.5px var(--ui-font); cursor:pointer; white-space:nowrap }
.ql-btn:disabled{ opacity:.45; cursor:not-allowed }
.ql-btn-quiet{ background:var(--white); color:var(--teal-dark); border:1.5px solid var(--teal-dark) }
.ql-linkbtn{ background:none; border:0; color:var(--teal-dark); font:700 13px var(--ui-font); text-decoration:underline; cursor:pointer; padding:0 }
.ql-chip{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:99px; border:0; font:600 14px var(--ui-font); cursor:pointer }
.ql-chip b{ font-weight:800 }

/* tabs */
.ql-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin:0 0 12px; overflow-x:auto; scrollbar-width:none }
.ql-tab{ flex-shrink:0; background:none; border:0; border-bottom:3px solid transparent; padding:12px 14px 10px; font:600 15px var(--ui-font); color:var(--text); cursor:pointer; white-space:nowrap }
.ql-tab.on{ color:var(--teal-dark); border-bottom-color:var(--teal-dark); font-weight:800 }
.ql-tabn{ margin-left:8px; font-size:12px; font-weight:600; color:var(--muted) }
.ql-filt{ font-size:13.5px; margin:0 0 10px; color:var(--text) }
.ql-chiprow{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px }
.ql-chip-l{ background:var(--gray-bg); color:var(--text); height:32px }
.ql-chip-l:hover{ background:var(--line) }
.ql-chip-l.on{ background:var(--teal-dark); color:var(--white) }

/* tables */
.ql-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }
.ql-tbl{ width:100%; border-collapse:collapse; font-size:14px; table-layout:auto } /* tokens.css sets every table fixed; these size by content */
.ql-tbl th{ text-align:left; font-size:12.5px; font-weight:700; color:var(--text); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--white) }
.ql-tbl td{ padding:11px 12px; border-bottom:1px solid var(--line-soft, var(--line)); vertical-align:middle; color:var(--ink) }
.ql-tbl .num{ text-align:right; font-variant-numeric:tabular-nums }
/* tokens.css's global td (max-width:0, overflow hidden, for fixed tables) and th (uppercase, sticky) do not apply here */
.ql-tbl td{ max-width:none; overflow:visible; white-space:normal; font-size:14px }
.ql-tbl th{ text-transform:none; letter-spacing:0; box-shadow:none; position:static; color:var(--text); font-size:12.5px }
.ql-tbl .ql-grp th{ text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-size:11.5px }
.ql-tbl .ql-grp .ql-grp-tr{ color:#a2440f !important }
.ql-tbl a{ color:var(--teal-dark); font-weight:600 }
.ql-roster thead tr:last-child th{ background:var(--gray-bg); cursor:pointer; user-select:none; padding:14px 12px }
.ql-roster thead th.sorted{ color:var(--ink) }
.ql-ar{ font-size:9px }
.ql-roster tbody tr{ cursor:pointer; transition:background .15s }
.ql-roster tbody tr:hover, .ql-roster tbody tr:focus{ background:var(--teal-pale); outline:none }
.ql-roster td{ padding:14px 10px }
.ql-roster th{ padding-left:10px !important; padding-right:10px !important }
.ql-roster td:first-child, .ql-roster th:first-child{ padding-left:20px }
.ql-roster td:last-child, .ql-roster th:last-child{ padding-right:20px }
.ql-grp th{ background:var(--white) !important; border-bottom:0; padding:10px 12px 4px !important; cursor:default !important; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.ql-grp-h{ text-align:center !important; border-bottom:2px solid var(--line) !important }
.ql-grp-tr{ color:#a2440f !important; border-bottom-color:#f4c9b0 !important }
.ql-tr{ background:rgba(255,227,211,.28) }
.ql-roster thead tr:last-child th.ql-tr{ background:#fbeee6 }
.ql-who{ display:flex; align-items:center; gap:10px; min-width:0 }
.ql-roster .ql-who{ min-width:230px }
.ql-roster thead tr:last-child th{ vertical-align:bottom; line-height:1.3 }
.ql-who-n{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.ql-score{ display:flex; align-items:center; gap:10px; white-space:nowrap }
.ql-score b{ font-size:17px; font-weight:800; min-width:22px }
.ql-pill{ display:inline-block; font-size:11.5px; font-weight:700; border-radius:7px; padding:3px 8px; white-space:nowrap }
.ql-pill-none{ background:var(--gray-bg); color:var(--text) }
.ql-pill-new, .ql-pill-never{ background:#ffe3d3; color:#a2440f }
.ql-zero{ color:#c4561b; font-weight:800 }
.ql-clip{ display:block; max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text) }
.ql-foot{ color:var(--muted); font-size:12.5px; line-height:1.5; margin:12px 2px 0 }

/* the matcher */
.ql-modal{ position:fixed; inset:0; background:rgba(10,30,33,.45); z-index:400; display:grid; place-items:center; padding:16px }
.ql-modal-box{ background:var(--white); border-radius:16px; width:min(720px, 100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column; padding:18px 20px; box-shadow:0 20px 50px rgba(0,0,0,.25) }
.ql-modal-body{ overflow-y:auto; flex:1; min-height:0 }
.ql-modal-f{ display:flex; justify-content:flex-end; gap:10px; padding-top:14px; border-top:1px solid var(--line); margin-top:10px }
.ql-mv{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px }
.ql-mv-h{ font-size:14px; margin-bottom:6px }
.ql-mc{ display:flex; align-items:flex-start; gap:10px; padding:7px 4px; font-size:13.5px; cursor:pointer; border-radius:8px }
.ql-mc:hover{ background:var(--teal-pale) }
.ql-mc input{ margin-top:3px; accent-color:var(--teal-dark) }
.ql-lbl{ display:block; font-weight:700; font-size:13px; margin:12px 0 6px }
.ql-input{ width:100%; height:var(--input-h, 40px); border:1px solid var(--input-border, var(--line)); border-radius:var(--input-radius, 10px); padding:0 12px; font:15px var(--ui-font); box-sizing:border-box }
.ql-input:focus{ outline:none; border-color:var(--input-focus-border, var(--teal-dark)); box-shadow:0 0 0 3px var(--input-focus-ring, rgba(20,77,84,.15)) }

@media (max-width: 1180px){
  .ql-sbar{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
  .ql-sb-team{ grid-column:1 / -1; border-bottom:1px solid var(--line) }
  .ql-sbar .ql-sb-cell:nth-child(2){ border-left:0 }
  .ql-grid{ grid-template-columns:minmax(0, 1fr) }
  .ql-rail{ position:static; max-height:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start }
}

/* phone: session 279's 390 design, in the new order: the team score card, the four counts as tappable rows, then
   Roster / New / Review (New is "Needs a QC", Review is "To review" and its lists). */
@media (max-width: 760px){
  .ql{ padding:16px 16px 40px }
  .ql-desk-only{ display:none !important }
  .ql-phone-only{ display:block !important }
  .ql-head{ margin-bottom:14px; flex-wrap:wrap }
  .ql-refresh{ display:none }
  .ql-head .ql-h1{ font-size:32px }
  .ql-sbar{ display:flex; flex-direction:column; background:none; box-shadow:none; gap:12px; overflow:visible; margin-bottom:14px }
  .ql-sb-team{ background:linear-gradient(150deg, var(--teal-dark), var(--teal-night)); color:var(--white); border-radius:18px; padding:18px 18px 14px; border:0 }
  .ql-sb-team .ql-sb-big{ color:var(--white); font-size:48px }
  .ql-sb-team .ql-sb-t{ color:var(--white) }
  .ql-sb-team .ql-sb-dim{ color:rgba(255,255,255,.8) }
  .ql-sb-team .ql-sb-kv{ color:rgba(255,255,255,.8) }
  .ql-sb-team .ql-sb-kv .ql-sb-v{ color:var(--white) }
  .ql-sb-team .ql-bar{ background:rgba(255,255,255,.14) }
  .ql-sb-team .ql-lg{ color:var(--white); background:rgba(255,255,255,.12); padding:5px 10px }
  .ql-sb-team .ql-lg b{ color:var(--white) }
  .ql-sb-team .ql-lg.on{ background:var(--white); color:var(--teal-night) }
  .ql-sb-team .ql-lg.on b{ color:var(--teal-night) }
  .ql-sb-cell{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; grid-template-rows:auto auto; column-gap:14px; align-items:center; border:0; border-radius:16px; background:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.06); padding:12px 16px }
  .ql-sb-cell .ql-sb-n{ grid-row:1 / 3; font-size:26px; min-width:40px }
  .ql-sb-cell .ql-sb-t{ grid-column:2; font-size:15px }
  .ql-sb-cell .ql-sb-s{ grid-column:2 }
  .ql-sb-go{ display:block; grid-column:3; grid-row:1 / 3; color:var(--muted); font-size:22px }
  .ql-seg{ display:flex !important; gap:4px; background:var(--gray-bg); border-radius:14px; padding:4px; margin-bottom:16px }
  .ql-segb{ flex:1; border:0; background:none; border-radius:11px; padding:8px 4px; font:700 14px var(--ui-font); color:var(--text); display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer }
  .ql-segb span{ font-size:12px; font-weight:600; opacity:.8 }
  .ql-segb.on{ background:var(--teal-dark); color:var(--white) }
  .ql-grid{ display:block }
  .ql-rail{ display:block; position:static; max-height:none; overflow:visible }
  .ql-rail .ql-card{ margin-bottom:16px }
  .ql-seg-roster .ql-rail, .ql-seg-roster #qlPanel{ display:none }
  .ql-seg-new .ql-sec-review, .ql-seg-new .ql-sec-roster{ display:none }
  .ql-seg-review .ql-sec-new, .ql-seg-review .ql-sec-roster{ display:none }
  .ql-seg-review .ql-main{ margin-bottom:0 }
  .ql-tabs{ margin-top:0 }
  .ql-cards{ display:block !important; background:var(--white); border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden }
  .ql-pc{ display:flex; align-items:flex-start; gap:12px; padding:16px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink) }
  .ql-pc:last-child{ border-bottom:0 }
  .ql-pc .ql-av{ width:38px; height:38px; font-size:13px }
  .ql-pc-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
  .ql-pc-n{ font-weight:800; font-size:16px }
  .ql-pc-s{ font-size:13px; color:var(--text) }
  .ql-pc-tr{ color:#a2440f; font-size:12px }
  .ql-pc-r{ display:flex; flex-direction:column; align-items:flex-end; gap:6px }
  .ql-pc-r b{ font-size:22px; font-weight:800 }
  .ql-clip{ max-width:200px }
  .ql-modal{ padding:8px }
  .ql-modal-box{ padding:14px }
}

/* session 280: the roster beside the rail (Quality A) */
@media (min-width: 761px){
  .ql-grid .ql-roster .ql-who{ min-width:140px; max-width:190px }
  .ql-grid .ql-roster td{ padding:11px 7px }
  .ql-grid .ql-roster th{ padding-left:7px !important; padding-right:7px !important }
  .ql-grid .ql-roster td:first-child, .ql-grid .ql-roster th:first-child{ padding-left:14px }
  .ql-grid .ql-roster td:last-child, .ql-grid .ql-roster th:last-child{ padding-right:14px }
  .ql-grid .ql-roster .ql-score{ gap:6px }
  .ql-grid .ql-roster thead tr:last-child th{ padding-top:10px; padding-bottom:10px; font-size:12px }
  .ql{ padding-top:var(--s3) }
}

/* Session 282 Part 4: Office inspections topline, trends (two single-series charts, one axis each) and By day. */
.ql-topline{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:6px 0 14px; }
.ql-tl{ border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; display:flex; flex-direction:column; gap:2px; background:var(--white); min-width:0; }
.ql-tl-l{ font-size:12px; font-weight:700; color:var(--muted); }
.ql-tl-v{ font-size:24px; color:var(--ink); line-height:1.2; }
.ql-tl-s{ font-size:11.5px; color:var(--muted); }
.ql-trendnote.ql-short{ background:var(--amber-bg); color:var(--amber-text); padding:8px 10px; border-radius:var(--radius); }
.ql-trends{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin:4px 0 10px; }
.ql-chart{ margin:0; border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px 4px; background:var(--white); min-width:0; }
.ql-chart figcaption{ font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.ql-chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.ql-tr-grid{ stroke:var(--line); stroke-width:1; }
.ql-tr-axis{ font-size:11px; fill:var(--muted); }
.ql-tr-val{ font-size:12px; font-weight:700; fill:var(--ink); }
.ql-tr-line{ fill:none; stroke:var(--teal-dark); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ql-tr-dot{ fill:var(--teal-dark); stroke:var(--white); stroke-width:2; pointer-events:none; }
.ql-tr-bar{ fill:var(--teal-dark); pointer-events:none; }
.ql-tr-hit{ fill:transparent; cursor:default; }
.ql-tr-pt:hover .ql-tr-dot{ r:6; }
.ql-tr-pt:hover .ql-tr-bar{ opacity:.8; }
.ql-viewrow{ margin-top:14px; }
.ql-daybar{ display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; width:100%; }
.ql-daybar-n{ min-width:22px; text-align:right; font-weight:700; }
.ql-daybar-t{ display:inline-block; width:90px; height:8px; border-radius:4px; background:var(--gray-bg); overflow:hidden; }
.ql-daybar-t span{ display:block; height:100%; background:var(--teal-dark); border-radius:4px; }
.ql-cardband{ margin:10px 0 4px; }
.ql-cardband .section-band{ border-radius:var(--radius); }
@media (max-width: 760px){
  .ql-topline{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ql-trends{ grid-template-columns:minmax(0, 1fr); }
}

/* Session 312: Waiting for approval, approve many at once (quality.js qlWaitHtml). Rows, not a table, so 390 needs no sideways scroll. */
.ql-wbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:8px 0 10px; border-bottom:1px solid var(--line) }
.ql-wall{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; cursor:pointer }
.ql-wall input, .ql-wbox input{ width:18px; height:18px; accent-color:var(--teal-dark); cursor:pointer; margin:0 }
.ql-wact{ display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.ql-wask{ font-size:13.5px; font-weight:600; color:var(--ink); max-width:420px; line-height:1.4 }
.ql-wmsg{ margin:10px 0 0; padding:9px 12px; border-radius:9px; background:#e2f4ee; color:#08513f; font-size:13.5px; font-weight:600; line-height:1.45 }
.ql-wlist{ display:flex; flex-direction:column }
.ql-wrow{ display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:10px; align-items:start; padding:11px 0; border-bottom:1px solid var(--line-soft, var(--line)) }
.ql-wrow:last-child{ border-bottom:0 }
.ql-wbox{ padding-top:2px }
.ql-wmain{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.ql-wtop{ font-size:14px; line-height:1.4; overflow-wrap:anywhere }
.ql-wtop a{ color:var(--teal-dark); font-weight:600 }
.ql-wnote{ font-size:13px; color:var(--text); line-height:1.4; overflow-wrap:anywhere }
.ql-wwhy{ font-size:13px; font-weight:600; color:#9a4a0e; line-height:1.4 }
.ql-wscore{ font-size:16px; font-variant-numeric:tabular-nums; padding-top:1px }
.ql-wno .ql-wtop{ color:var(--text) }
.ql-wnp{ font-size:12px; font-weight:600; color:var(--muted) }
.ql-wnote{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

/* Session 313: the reminder while Training videos or the handbook sign-off are switched out of the score. Grey, never an alarm. */
.ql-notcounted{ margin:0 0 12px; padding:9px 12px; border-radius:10px; background:#eef1f3; color:#4d545a; font-size:13px; line-height:1.45; }
.ql-notcounted a{ color:var(--teal-dark, #155158); font-weight:600; }

/* Session 321: Waiting for approval, each row opens its QC's page (the whole row, and Open); the address leads; the cleaner
   and the property are small links of their own. */
.ql-wrow.ql-wgo{ grid-template-columns:28px minmax(0, 1fr) auto auto; cursor:pointer; border-radius:8px }
.ql-wrow.ql-wgo:hover{ background:var(--pa-page, #F2F4F5) }
.ql-waddr{ font-weight:700 }
.ql-wsub{ font-size:12.5px; color:var(--muted); overflow-wrap:anywhere }
.ql-wsub a{ color:var(--teal-dark); font-weight:500 }
.ql-wopen{ align-self:center; font-size:13px; font-weight:700; color:var(--teal-dark); padding:5px 10px; border:1px solid var(--pa-input-line, #C9D0D4); border-radius:8px; background:#fff; text-decoration:none; white-space:nowrap }
.ql-wopen:hover{ text-decoration:none; background:var(--pa-teal-100, #DCEFF0) }
/* Session 321: Field QCs, every row opens its QC; the street address first, the property's own name under it. */
.ql-qrow{ cursor:pointer }
.ql-qrow:hover td{ background:var(--pa-page, #F2F4F5) }
.ql-qrow:focus-visible{ outline:2px solid var(--pa-teal-300, #6FD5D4); outline-offset:-2px }
.ql-qa{ min-width:200px }
.ql-qaddr{ display:block; font-weight:700; color:var(--teal-dark) }
.ql-qname{ display:block; font-size:12px; color:var(--muted) }
.ql-qtbl td{ white-space:normal; vertical-align:top }
.ql-qtbl .ql-pill{ white-space:normal; line-height:1.25 }
.ql-qtbl td:nth-child(2){ white-space:nowrap }
.ql-qst{ min-width:150px }
.ql-qst .ql-pill{ display:inline-block }
.ql-qrep{ display:block; margin-top:5px; font-size:12px; color:var(--muted) }
.ql-qrep .ql-pill{ margin-left:2px }
.ql-qst .ql-wnp{ display:block; margin-top:3px }
.ql-qa{ min-width:170px }

/* Session 322: Field Inspections, Scheduled: the notes column, Add note for inspector, the note box under its row. */
.ql-snadd{ height:30px; font-size:13px }
.ql-snrow td{ background:var(--pa-page, #F2F4F5) }
.ql-snote{ display:grid; gap:8px; max-width:640px; padding:4px 0 }
.ql-snl{ font-weight:600; font-size:13px }
.ql-snote textarea{ width:100%; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:8px; padding:8px 10px; font:16px var(--ui-font); resize:vertical }
.ql-snb{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.ql-snmsg{ font-size:13px; color:var(--muted) }
@media (max-width:760px){ .ql-snotes{ white-space:normal } .ql-sn{ display:block; margin:0 0 6px } }

/* Session 322: the two Field Inspections tabs carry their group above the name; the Scheduled table fits the column (fixed
   widths, the day stacked, the notes count above Add note for inspector). */
.ql-tab.ql-tab2{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.15; padding-top:6px }
.ql-tabg{ font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.01em }
.ql-tab.ql-tab2 .ql-tabn{ margin-left:0 }
.ql-tab.ql-tab2{ flex-direction:row; flex-wrap:wrap; column-gap:6px; align-items:baseline; max-width:150px }
.ql-tab.ql-tab2 .ql-tabg{ flex-basis:100% }
.ql-stbl{ table-layout:fixed; width:100% }
.ql-stbl th:nth-child(1){ width:92px } .ql-stbl th:nth-child(3){ width:17% } .ql-stbl th:nth-child(4){ width:22% } .ql-stbl th:nth-child(5){ width:150px }
.ql-stbl td{ overflow-wrap:anywhere }
.ql-sday b, .ql-sday .ql-dim, .ql-sday .ql-pill{ display:block; width:max-content; margin-bottom:3px }
.ql-stbl .ql-snotes{ white-space:normal }
.ql-stbl .ql-sn{ display:block; margin:0 0 6px }
.ql-stbl .ql-snadd{ height:auto; min-height:32px; padding:6px 10px; line-height:1.2; white-space:normal; text-align:left }
.ql-stbl .ql-qaddr, .ql-stbl .ql-qname{ white-space:normal; overflow-wrap:anywhere }
.ql-stbl td{ white-space:normal }