/* closeout-lanes.css -- session 411 (mh-appointments-mockups-v2 11-to-close.html and the lane box of 7-list-status-menu.html): the drawings' stylesheet,
   copied as named classes on the tokens in tokens.css (--cln-*, --apl-*). Used by Appointments > To close, the Day page's lanes and the status menu. */
.cln-page{display:flex;flex-direction:column;gap:16px}
.cln-card{background:#ffffff;border-radius:var(--cln-card-r);box-shadow:var(--apl-card-shadow)}
.cln-loading{padding:18px 20px;color:var(--apl-muted);font-size:13.5px}
.cln-steps{padding:16px 20px;display:flex;align-items:center;gap:16px}
.cln-step{display:flex;gap:12px;align-items:flex-start;min-width:0;flex:1 1 0}
.cln-sn{width:28px;height:28px;border-radius:999px;background:var(--cln-navy);color:#ffffff;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cln-sn.last{background:var(--apl-green)}
.cln-st{font-size:14px;font-weight:800;color:var(--apl-ink)}
.cln-sd{font-size:12.5px;color:var(--apl-muted);line-height:1.4;margin-top:2px}
.cln-arrow{color:var(--apl-line2);flex:none;align-self:center;display:inline-flex}
.cln-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cln-gap);align-items:start}
.cln-colR{display:flex;flex-direction:column;gap:var(--cln-gap)}
.cln-lane{padding:0}
.cln-lh{display:flex;align-items:center;gap:10px;padding:var(--cln-pad);border-bottom:1px solid var(--cln-head-line)}
.cln-lh b{font-size:16px;font-weight:800;color:var(--apl-ink)}
.cln-n{font-size:13px;font-weight:700;color:var(--apl-muted)}
.cln-li{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cln-li.g{background:var(--apl-green);color:#ffffff}
.cln-li.a{background:var(--apl-yellow);color:var(--apl-ink)}
.cln-li.n{background:var(--apl-s2);color:var(--apl-text)}
.cln-grow{flex:1 1 0%}
.cln-all{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--apl-ink);cursor:pointer}
.cln-box{width:18px;height:18px;margin:2px 0 0;accent-color:var(--apl-teal);cursor:pointer}
.cln-closen[disabled]{opacity:.55;cursor:default;box-shadow:none}
.cln-lsub{font-size:12.5px;color:var(--apl-muted);padding:10px 18px 0}
.cln-none{font-size:13px;color:var(--apl-faint);padding:12px 18px 14px}
.cln-lr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 18px;border-bottom:1px solid var(--cln-row-line)}
.cln-lr:last-child{border-bottom:0}
.cln-lr.on{background:var(--cln-panel-bg)}
.cln-nmrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cln-nm{font-size:14px;font-weight:700;color:var(--apl-ink);letter-spacing:-0.01em;text-decoration:none}
.cln-nm:hover{text-decoration:underline;text-underline-offset:3px;color:var(--apl-ink)}
.cln-day{font-size:12px;font-weight:600;color:var(--apl-muted)}
.cln-due{font-size:12px;font-weight:700;color:var(--apl-muted)}
.cln-due.over{color:var(--apl-on-orange)}
.cln-who{font-size:12.5px;color:var(--apl-muted);margin-top:1px}
.cln-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.cln-chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.cln-chip.g{background:var(--apl-green-tint);color:var(--apl-on-green)}
.cln-chip.a{background:var(--apl-yellow-tint);color:var(--apl-on-yellow)}
.cln-chip.r{background:var(--apl-red-tint);color:var(--apl-on-red)}
.cln-chip.n{background:var(--apl-s2);color:var(--apl-text)}
.cln-chip.w{background:#ffffff;color:var(--apl-on-yellow)}
.cln-acts{display:flex;gap:6px}
.cln-sm{padding:7px 11px;font-size:12.5px;white-space:nowrap}
.cln-closed{display:flex;flex-direction:column;gap:10px}
.cln-fold{border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--apl-ink);display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:4px 2px;align-self:flex-start;border-radius:8px}
.cln-fold:hover{text-decoration:underline;text-underline-offset:3px}
.cln-chev{display:inline-flex;transition:transform .15s}
.cln-chev.on{transform:rotate(90deg)}
/* the close-out panel */
.cln-panel{padding:18px 22px 20px;display:flex;flex-direction:column;gap:14px}
.cln-panel.ringed{box-shadow:var(--cln-ready-ring)}
.cln-ph{display:flex;align-items:flex-start;gap:12px}
.cln-pht{flex:1 1 0%;min-width:0}
.cln-eye{font-size:12.5px;font-weight:700;color:var(--cln-navy)}
.cln-h2{margin:2px 0 0;font-size:22px;font-weight:800;color:var(--apl-ink);letter-spacing:-0.025em}
.cln-psub{font-size:13px;color:var(--apl-muted);margin-top:2px}
.cln-lk{font-size:13px;font-weight:700;color:var(--apl-teal-mid);text-decoration:underline;text-underline-offset:3px}
.cln-x{border:0;background:var(--apl-s2);width:28px;height:28px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;padding:0;color:var(--apl-text)}
.cln-pgrid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:start}
.cln-h3{font-size:12.5px;font-weight:800;color:var(--apl-muted);letter-spacing:.02em;margin:0 0 4px}
.cln-ck{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--cln-row-line);font-size:13px;color:var(--apl-text);line-height:1.45}
.cln-ck:last-child{border-bottom:0}
.cln-ck b{color:var(--apl-ink);font-weight:700}
.cln-ck.grey{color:var(--cln-grey-ink)}
.cln-ck.grey b{color:var(--apl-muted)}
.cln-ci{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cln-ci.g{background:var(--apl-green-tint);color:var(--apl-on-green)}
.cln-ci.a{background:var(--apl-yellow-tint);color:var(--apl-on-yellow)}
.cln-ci.n{background:var(--cln-grey-bg);color:var(--cln-grey-ink)}
.cln-acts2{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cln-ans{display:inline-block;margin-left:4px;font-size:12px;font-weight:700;color:var(--apl-on-green)}
.cln-pside{display:flex;flex-direction:column;gap:14px}
.cln-side{background:var(--cln-panel-bg);border-radius:var(--cln-panel-r);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.cln-sh{font-size:14px;font-weight:800;color:var(--apl-ink)}
.cln-ss{font-size:12.5px;color:var(--apl-muted)}
.cln-ss2{font-size:13px;color:var(--apl-text)}
.cln-pfoot{border-top:1px solid var(--cln-head-line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.cln-frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cln-btnn{border:0;background:var(--cln-navy);color:#ffffff;font:inherit;font-size:14px;font-weight:700;border-radius:10px;padding:11px 18px;cursor:pointer;white-space:nowrap}
.cln-btnn:hover{background:#13324f}
.cln-btnn[disabled]{opacity:.55;cursor:default;background:var(--cln-navy)}
.cln-wait{font-size:12.5px;font-weight:700;color:var(--apl-on-yellow)}
.cln-form{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.cln-lbl{font-size:12px;font-weight:700;color:var(--apl-text)}
.cln-form input[type=text]{box-sizing:border-box;width:100%;border:1.5px solid var(--apl-line2);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;color:var(--apl-ink)}
.cln-form input[type=text]:focus{outline:0;border-color:var(--apl-sky);box-shadow:0 0 0 3px rgba(111,213,212,.3)}
.cln-msg{font-size:12.5px;font-weight:600;color:var(--apl-on-red)}
.cln-chipsel{display:flex;gap:6px;flex-wrap:wrap}
/* the status menu's lane box (7-list-status-menu .ready) */
.cln-mbox{margin:4px 2px 6px;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.cln-mbox b{font-size:13px;font-weight:800}
.cln-mbox span{font-size:12.5px;line-height:1.4}
.cln-mbox .cln-chips{margin-top:0}
.cln-mbox.g{background:var(--apl-green-tint);color:var(--apl-on-green)}
.cln-mbox.a{background:var(--apl-yellow-tint);color:var(--apl-on-yellow)}
.cln-mbox.n{background:var(--apl-s2);color:var(--apl-text)}
.cln-mb{padding:8px 12px}
.cln-mb2{padding:7px 12px}
/* every button: a visible focus */
.cln-page button:focus-visible,.cln-page a:focus-visible,.cln-lanes button:focus-visible,.cln-lanes a:focus-visible,.cln-mbox button:focus-visible,.cln-mbox a:focus-visible{outline:2px solid var(--apl-sky);outline-offset:2px}
@media (max-width:1100px){ .cln-pgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
  .cln-grid{grid-template-columns:minmax(0,1fr)}
  .cln-steps{flex-direction:column;align-items:stretch;gap:10px}
  .cln-arrow{display:none}
}
@media (max-width:560px){
  .cln-lr{grid-template-columns:22px minmax(0,1fr);}
  .cln-lr .cln-acts{grid-column:2;flex-wrap:wrap}
  .cln-lh{flex-wrap:wrap;padding:12px 14px}
  .cln-panel{padding:16px}
  .cln-ph{flex-wrap:wrap}
}
/* the Close out screen's facts card (closeout.js, above its three steps) */
.clo-facts{padding:14px 20px 8px;margin:16px 0}
.clo-fh{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.clo-fh b{font-size:14px;font-weight:800;color:var(--apl-ink);flex:1 1 0%}
/* the Day page's lanes (day-preview.js dpLanesAfter): a one-line header above the same drawing */
.cln-lanes{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.cln-lanes:empty{display:none}
.dp-lanesh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dp-lanesh b{font-size:16px;font-weight:800;color:var(--apl-ink)}
.dp-lanesh span{font-size:12.5px;color:var(--apl-muted)}
.dp-lanesh a{margin-left:auto;font-size:13px;font-weight:700;color:var(--apl-teal-mid);text-decoration:underline;text-underline-offset:3px}
/* inside the Appointments frame (.mhcal colours every link teal): the drawing's own colours for its links */
.cln-page a.cln-nm,.cln-page a.cln-nm:hover{color:var(--apl-ink)}
.cln-page a.apl-btnt,.cln-page a.apl-btnt:hover{color:#ffffff;text-decoration:none}
.cln-page a.apl-btn2,.cln-page a.apl-btn2:hover{color:var(--apl-ink);text-decoration:none}
.cln-page a.cln-lk,.cln-page a.cln-lk:hover,.cln-page .dp-lanesh a{color:var(--apl-teal-mid)}
.cln-lanes a.cln-nm,.cln-lanes a.cln-nm:hover{color:var(--apl-ink)}
.cln-lanes a.apl-btnt,.cln-lanes a.apl-btnt:hover{color:#ffffff;text-decoration:none}
.cln-lanes a.apl-btn2,.cln-lanes a.apl-btn2:hover{color:var(--apl-ink);text-decoration:none}
.cln-lanes a.cln-lk{color:var(--apl-teal-mid)}