/* appointments-list.css -- session 407 (briefs/session-407-brief.md parts B and C; mh-appointments-mockups-v1 1-list.html to 1h, 3-date-picker.html):
   the Appointments list, its title row (shared by the four Appointments tabs and Owner holds), the navy strip, the filter card, the table, the icon row
   and its tips, the add-on panel, Change cleaner and Change time, the toast, the legend, the phone card and the date picker. The drawings' own
   stylesheets and inline styles, ported value for value as the named tokens in tokens.css (--apl-*, --mh-navy*) and classes with the apl- prefix.
   Every value is the drawing's unless a comment says otherwise. */

/* ---------- the page (inside #page.core-page, Part A's frame) ---------- */
.mhapl{font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--apl-text);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;gap:16px;min-width:0}
.mhapl *,.apl-top *,.apl-pop *,.apl-toast *{box-sizing:border-box}
.mhapl a{color:var(--apl-teal-mid);text-decoration:none}
.mhapl a:hover{text-decoration:underline}
.mhapl button,.apl-top button,.apl-pop button{font:inherit}
.mhapl :focus-visible,.apl-top :focus-visible,.apl-pop :focus-visible{outline:2px solid var(--apl-teal);outline-offset:2px}
.mhapl [hidden]{display:none !important}

/* ---------- B1. the title row (the same on all four tabs and Owner holds) ---------- */
.apl-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:'Inter','Segoe UI',system-ui,sans-serif}
.apl-isq{width:40px;height:40px;border-radius:10px;background:var(--mh-navy);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.apl-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.apl-top h1.apl-h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-0.035em;color:var(--apl-ink);line-height:1.05}
.apl-sub{font-size:12px;color:var(--apl-muted);font-weight:400}
.apl-tabs{display:flex;gap:4px;background:var(--apl-s2);padding:4px;border-radius:999px;margin-left:18px;flex-wrap:wrap}
.apl-top a.apl-tab{border:0;background:transparent;font-size:14px;font-weight:600;color:var(--apl-text);padding:8px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:normal}
.apl-top a.apl-tab:hover{background:#dde2e5;color:var(--apl-ink);text-decoration:none}
.apl-top a.apl-tab[aria-current=page]{background:var(--apl-teal);color:#ffffff}
.apl-cnt{background:var(--apl-orange);color:var(--apl-ink);font-size:11px;font-weight:800;border-radius:999px;padding:1px 7px}
.apl-grow{flex:1 1 auto}
.apl-btn2{border:1.5px solid var(--apl-line2);background:#ffffff;color:var(--apl-ink);font-size:13.5px;font-weight:600;border-radius:10px;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:normal}
.apl-top a.apl-btn2{color:var(--apl-ink)}
.apl-btn2:hover,.apl-top a.apl-btn2:hover{background:var(--apl-s2);text-decoration:none}
.apl-btny{border:0;background:linear-gradient(var(--apl-yellow),var(--apl-yellow-2));color:var(--apl-ink);font-size:13.5px;font-weight:700;border-radius:10px;padding:10px 16px;cursor:pointer;box-shadow:0 6px 16px rgba(217,106,24,.28);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.apl-btny:hover{filter:brightness(.97)}
.apl-btnt{border:0;background:var(--apl-teal);color:#ffffff;font-size:13.5px;font-weight:700;border-radius:10px;padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.apl-btnt:hover{background:#0e363b;color:#ffffff;text-decoration:none}

/* ---------- B2. the navy strip ---------- */
.apl-strip{border-radius:18px;background:var(--mh-navy-band);box-shadow:var(--mh-navy-shadow);padding:12px 22px;display:flex;flex-direction:column;gap:10px;color:#ffffff}
.apl-l1{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.apl-stats{display:flex;gap:6px;flex-wrap:wrap}
.apl-stat{border:0;background:transparent;color:#ffffff;text-align:left;padding:6px 10px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.apl-stat:hover{background:rgba(255,255,255,.10)}
.apl-stat.on{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px var(--apl-yellow)}
.apl-stat b,.apl-fig b{font-size:22px;font-weight:800;letter-spacing:-0.03em;line-height:1}
.apl-stat > span,.apl-fig > span{font-size:12px;font-weight:600;color:rgba(255,255,255,.78)}
.apl-stat b.y{color:var(--apl-yellow)}
.apl-fig{padding:6px 10px;border-radius:10px;display:flex;flex-direction:column;gap:2px;cursor:default}
.apl-total{flex-direction:row;align-items:baseline;gap:10px;padding:4px 8px}
.apl-total b{font-size:40px;letter-spacing:-0.04em}
.apl-total > span{display:flex;flex-direction:column;gap:1px;color:#ffffff}
.apl-total .w{font-size:14px;font-weight:700}
.apl-total .d{font-size:12px;color:rgba(255,255,255,.78);font-weight:400}
.apl-vdiv{width:1px;align-self:stretch;background:rgba(255,255,255,.22)}
.apl-hours{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.apl-bars{display:flex;align-items:flex-end;gap:5px;height:30px}
.apl-bar{width:16px;border-radius:3px 3px 0 0;background:var(--apl-sky)}
.apl-hcap{font-size:11.5px;color:rgba(255,255,255,.78)}
.apl-l2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:10px}
.apl-l2h{display:inline-flex;align-items:center;gap:8px;color:#ffffff;font-size:13px;font-weight:700;margin-right:6px}
.apl-plus{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center}
.apl-achip{border:0;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.12);color:#ffffff}
.apl-achip:hover{background:rgba(255,255,255,.2)}
.apl-achip b{font-weight:800;color:var(--apl-yellow)}
.apl-achip .m{color:rgba(255,255,255,.72);font-weight:500}
.apl-achip.on{background:rgba(255,209,58,.22);box-shadow:inset 0 0 0 1.5px var(--apl-yellow)}

/* ---------- B3. the filter card ---------- */
.apl-filters{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.apl-f1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.apl-seg{display:flex;gap:4px;background:var(--apl-s2);padding:4px;border-radius:999px}
.apl-segb{border:0;background:transparent;font-size:13.5px;font-weight:600;color:var(--apl-text);padding:6px 14px;border-radius:999px;cursor:pointer}
.apl-segb:hover{background:#dde2e5}
.apl-segb.on{background:var(--apl-teal);color:#ffffff}
.apl-sel{border:1.5px solid var(--apl-line2);background:#ffffff;color:var(--apl-ink);font-size:13.5px;font-weight:500;border-radius:10px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;justify-content:space-between;min-width:140px}
.mhapl select.apl-sel{width:auto;max-width:220px;height:auto;margin:0;box-shadow:none;line-height:normal}
select.apl-sel{appearance:none;-webkit-appearance:none;padding-right:32px;background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b747b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;font-family:inherit}
.apl-sel:hover{border-color:#aab4ba}
.apl-date{min-width:0;gap:8px}
.apl-date.open{border:2px solid var(--apl-sky);font-size:14px;font-weight:700;padding:7.5px 13.5px}
.apl-fdiv{width:1px;height:26px;background:var(--apl-line);margin:0 4px}
.apl-search{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--apl-line2);border-radius:999px;padding:8px 14px;min-width:300px;background:#ffffff}
.apl-search input{border:0;outline:0;font:inherit;font-size:13.5px;flex:1 1 0%;background:transparent;color:var(--apl-ink);min-width:0}
.apl-search kbd{font:inherit;font-size:11px;font-weight:700;color:var(--apl-muted);border:1px solid var(--apl-line2);border-radius:5px;padding:0 5px}
.apl-f2{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.apl-chk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--apl-ink);font-weight:500;cursor:pointer}
.apl-chk input{width:16px;height:16px;accent-color:var(--apl-teal);margin:0}
.apl-count{font-size:12.5px;color:var(--apl-muted);font-weight:600}
.apl-on{display:inline-flex;align-items:center;gap:6px;background:var(--apl-orange-tint);color:var(--apl-on-orange);font-size:12.5px;font-weight:700;border-radius:999px;padding:4px 6px 4px 12px}
.apl-on button{border:0;background:transparent;color:inherit;cursor:pointer;display:inline-flex;padding:2px;border-radius:999px}
.apl-err:empty{display:none}

/* ---------- B4. the table ---------- */
.apl-tcard{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow)}
/* The width the table is measured by (B4's three widths). Not on a phone: a container is the containing block of a fixed sheet inside it. */
@media (min-width: 761px){ .apl-tcard{container-type:inline-size;container-name:apltbl} }
.apl-scroll{min-width:0}
.apl-gr{display:grid;grid-template-columns:var(--apl-grid)}
.apl-gr > div{padding:11px 12px;min-width:0}
.apl-gr > div:first-child{padding-left:16px}
.apl-gr > div:last-child{padding-right:28px}
.apl-th{background:var(--apl-s2);color:var(--apl-text);font-size:12.5px;font-weight:600;white-space:nowrap;position:sticky;top:calc(var(--hdrH, 0px) + var(--bandH, 0px));z-index:20;border-radius:14px 14px 0 0}
.apl-th .r{text-align:right;line-height:1.2}
.apl-th .r span{display:block;font-size:11.5px;font-weight:500;color:var(--apl-muted)}
.apl-th .on{color:var(--apl-ink)}
.apl-td{border-bottom:1px solid var(--apl-line);font-size:13.5px;color:var(--apl-text);align-items:start;background:#ffffff}
.apl-td.row-dates{background:var(--apl-row-dates)}
.apl-td.row-tagged{background:var(--apl-row-tagged)}
.apl-grp{background:var(--apl-bg);color:var(--apl-ink);font-weight:700;font-size:13px;padding:8px 12px;border-bottom:1px solid var(--apl-line);display:flex;gap:12px;align-items:center}
.apl-grp button{border:0;background:transparent;color:var(--apl-teal-mid);font-size:13px;font-weight:700;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.apl-day{background:#ffffff;color:var(--apl-ink);font-size:14px;font-weight:800;letter-spacing:-0.01em;padding:14px 16px 8px;border-bottom:1px solid var(--apl-line);display:flex;gap:8px;align-items:baseline}
.apl-day span{font-size:12.5px;font-weight:600;color:var(--apl-muted)}
.apl-empty{padding:28px 16px;text-align:center;color:var(--apl-muted)}
.apl-empty b{display:block;color:var(--apl-ink);font-size:15px;margin-bottom:4px}
.apl-num{text-align:right;font-variant-numeric:tabular-nums}
.apl-d1{color:var(--apl-ink);font-weight:600;white-space:nowrap}
.apl-d1.b{font-weight:800}
.apl-d2{color:var(--apl-muted);font-size:12px;margin-top:2px}
.apl-d2.moved{color:var(--apl-on-yellow);font-weight:600}
.apl-d2.tight{color:var(--apl-on-orange);font-weight:700}
.apl-none{color:var(--apl-faint);font-weight:500}
.mhapl a.apl-pname{display:block;font-weight:700;font-size:14.5px;letter-spacing:-0.01em;line-height:1.3;color:var(--apl-ink)}
.mhapl a.apl-pname:hover{text-decoration:underline;text-underline-offset:3px}
.mhapl a.apl-pname.same-dates{color:var(--apl-same-dates)}
.mhapl a.apl-pname.same-tagged{color:var(--apl-same-tagged)}
.apl-pwrap{display:flex;align-items:flex-start;gap:6px}
.apl-pwrap .mh-dc{margin-top:2px;flex:none}
.mhapl a.apl-client{font-weight:600;line-height:1.35}
.apl-svc{color:var(--apl-ink);line-height:1.35}
.apl-svc .ap-qcb{margin-left:6px}

/* the icon row (B6) */
.apl-icons{display:flex;gap:5px;margin-top:7px;align-items:center;flex-wrap:wrap}
.apl-tw{position:relative;display:inline-flex}
.apl-sq{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:default}
.apl-circ{width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:default}
.apl-ic{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 6px;border-radius:6px;font-size:11.5px;font-weight:700;cursor:default}
.apl-sep{width:1px;height:18px;background:var(--apl-line);margin:0 3px}
.st-done{background:var(--apl-green);color:#ffffff}
.st-out{background:var(--apl-teal-mid);color:#ffffff}
.st-started{background:var(--apl-yellow);color:var(--apl-ink)}
.st-not_started{background:#ffffff;color:var(--apl-faint);box-shadow:inset 0 0 0 1.5px var(--apl-line2)}
.st-late{background:var(--apl-orange);color:var(--apl-ink)}
.st-cancelled,.st-withdrawn{background:var(--apl-s2);color:var(--apl-muted)}
.src-ical{background:var(--apl-green);color:#ffffff}
.src-held{background:var(--apl-yellow);color:var(--apl-ink)}
.src-manual,.src-hub{background:var(--apl-s2);color:var(--apl-text)}
.sd-dates{background:var(--apl-same-circle);color:#ffffff}
.sd-tagged{background:var(--apl-green);color:#ffffff}
.sd-none{background:#ffffff;color:var(--apl-line2);box-shadow:inset 0 0 0 1.5px var(--apl-line)}
.ic-red{background:var(--apl-red-tint);color:var(--apl-on-red)}
.ic-green{background:var(--apl-green-tint);color:var(--apl-on-green)}
.ic-none{background:transparent;color:var(--apl-line2)}
.ic-rep{background:var(--apl-orange);color:var(--apl-ink)}
button.apl-addchip{border:0;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:700;cursor:pointer;background:var(--mh-navy-tint);color:var(--mh-navy)}
button.apl-addchip:hover{background:var(--mh-navy-tint-h)}
button.apl-addchip svg{transition:transform .15s}
button.apl-addchip[aria-expanded=true] svg{transform:rotate(180deg)}
.apl-tw > [tabindex]{outline-offset:2px}
/* the tip: hover, keyboard focus and a tap (phones have no hover) */
.apl-tip{display:none;position:absolute;left:0;top:32px;z-index:30;width:280px;background:var(--apl-ink);color:#ffffff;border-radius:10px;padding:10px 12px;box-shadow:var(--apl-tip-shadow);font-size:12.5px;line-height:1.45;font-weight:450;white-space:normal;text-align:left}
.apl-tip b{display:block;font-size:13px;font-weight:700;margin-bottom:3px}
.apl-tip.r{left:auto;right:0}
.apl-tw:hover > .apl-tip,.apl-tw:focus-within > .apl-tip,.apl-tw.tap > .apl-tip{display:block}

/* the time and cleaner buttons (B8, B9) */
.apl-cell{position:relative}
.apl-cbtn{border:0;background:transparent;padding:2px 4px 2px 0;margin:-2px 0;border-radius:8px;cursor:pointer;display:flex;align-items:flex-start;gap:8px;text-align:left;color:inherit}
.apl-cbtn.time{align-items:center;gap:4px}
.apl-cbtn:hover .apl-cname{text-decoration:underline;text-underline-offset:2px}
.apl-cbtn:hover .apl-pen,.apl-cbtn:focus-visible .apl-pen{opacity:1}
.apl-cname{color:var(--apl-ink);font-weight:500;line-height:1.35;padding-top:4px}
.apl-cbtn.time .apl-cname{font-weight:800;padding-top:0;white-space:nowrap}
.apl-pen{opacity:.35;padding-top:5px;flex:none}
.apl-cbtn.time .apl-pen{padding-top:0}
.apl-av{width:26px;height:26px;border-radius:999px;background:var(--apl-teal-tint);color:var(--apl-teal);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.apl-av.plan{background:var(--apl-yellow-tint);color:var(--apl-on-yellow)}
.apl-una{display:inline-flex;align-items:center;gap:6px;color:var(--apl-on-orange);font-weight:700;padding-top:4px}
.apl-planned{display:inline-block;margin-left:6px;background:var(--apl-yellow-tint);color:var(--apl-on-yellow);font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px}

/* the add-on panel (B7) */
.apl-panel{background:var(--apl-panel);border-bottom:1px solid var(--apl-line);padding:10px 12px 12px 22px}
.apl-ph{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.apl-ph b{font-size:12.5px;font-weight:700;color:var(--mh-navy)}
.apl-ph span{font-size:12px;color:var(--apl-muted)}
.apl-aline{display:grid;grid-template-columns:24px 260px 1fr 120px 110px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--apl-panel-line);font-size:13px}
.apl-aline:last-child{border-bottom:0}
.apl-aline .pl{width:22px;height:22px;border-radius:6px;background:var(--mh-navy-tint);color:var(--mh-navy);display:inline-flex;align-items:center;justify-content:center}
.apl-aline .n{color:var(--apl-ink);font-weight:700}
.apl-aline .o{color:var(--apl-muted);font-size:12.5px}
.apl-aline .p{color:var(--apl-ink);font-weight:600}
.apl-aline .k{color:var(--apl-muted);font-size:12.5px}

/* the legend */
.apl-legend{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow);padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.apl-legend p{margin:0;font-size:13px;color:var(--apl-text)}
.apl-lrow{display:flex;gap:10px 18px;flex-wrap:wrap}
.apl-leg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--apl-text)}

/* the narrower tables (B4): Daniel's 1920 with the full menu is about 1628 wide; under 1502 the card scrolls sideways inside itself */
@container apltbl (max-width: 1653.98px){
  .apl-gr{grid-template-columns:var(--apl-grid-mid)}
  .apl-gr > div{padding:11px 10px}
  .apl-gr > div:first-child{padding-left:16px}
  .apl-gr > div:last-child{padding-right:28px}
}
@container apltbl (max-width: 1501.98px){
  .apl-scroll{overflow-x:auto}
  .apl-scroll > .apl-rows{width:max-content;min-width:100%}
  .apl-gr > div:first-child{position:sticky;left:0;z-index:5;background:inherit;box-shadow:1px 0 0 var(--apl-line)}
  .apl-th{position:static}
}

/* ---------- B8, B9. the popovers, and on a phone the sheet ---------- */
.apl-pop{position:absolute;top:46px;left:6px;width:340px;z-index:50;background:#ffffff;border-radius:14px;box-shadow:var(--apl-pop-shadow);padding:14px;display:flex;flex-direction:column;gap:10px;font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--apl-text);cursor:default;text-align:left}
.apl-pop.time{top:42px;width:330px}
.apl-pop.r{left:auto;right:6px}
.apl-pop .ph{display:flex;align-items:center;gap:8px}
.apl-pop .pt{font-size:15px;font-weight:800;color:var(--apl-ink)}
.apl-pop .px{border:0;background:var(--apl-s2);width:28px;height:28px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;padding:0}
.apl-pop .px:hover{background:#dde2e5}
.apl-pop .ps{font-size:12.5px;color:var(--apl-muted);line-height:1.4}
.apl-pop .pb{font-size:13.5px;color:var(--apl-text);line-height:1.5}
.apl-pop .pb b{color:var(--apl-ink)}
.apl-pop .pk{font-size:12px;font-weight:600;color:var(--apl-muted)}
.apl-pop .pf{display:flex;align-items:center;gap:8px;border:2px solid var(--apl-sky);border-radius:10px;padding:8px 10px}
.apl-pop .pf input{border:0;outline:0;font:inherit;font-size:13.5px;flex:1 1 0%;color:var(--apl-ink);min-width:0;background:transparent}
.apl-pop .pl{display:flex;flex-direction:column;max-height:250px;overflow-y:auto;margin:0 -4px}
.apl-opt{border:0;background:transparent;width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;text-align:left}
.apl-opt:hover,.apl-opt:focus-visible{background:var(--apl-s2)}
.apl-opt .on{flex:1 1 0%;color:var(--apl-ink);font-weight:600;font-size:13.5px}
.apl-opt .nn{font-size:12px;color:var(--apl-muted);white-space:nowrap}
.apl-opt .now{background:var(--apl-teal-tint);color:var(--apl-teal);font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;white-space:nowrap}
.apl-pop .pn{font-size:12px;color:var(--apl-muted)}
.apl-pop .warn{background:var(--apl-orange-tint);color:var(--apl-on-orange);border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:600;line-height:1.45}
.apl-pop .good{background:var(--apl-green-tint);color:var(--apl-on-green);border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:600;line-height:1.45}
.apl-pop .pa{display:flex;gap:8px;flex-wrap:wrap}
.apl-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:210px;overflow-y:auto}
.apl-slot{border:0;font-size:12.5px;font-weight:700;border-radius:8px;padding:8px 0;cursor:pointer;background:var(--apl-s2);color:var(--apl-ink)}
.apl-slot:hover{filter:brightness(.96)}
.apl-slot.cur{background:var(--apl-teal);color:#ffffff}
.apl-slot.late{background:var(--apl-orange-tint);color:var(--apl-on-orange)}
.apl-type{display:flex;align-items:center;gap:8px}
.apl-type label{font-size:12px;font-weight:600;color:var(--apl-muted)}
.apl-type input{border:1.5px solid var(--apl-line2);border-radius:10px;padding:7px 10px;font:inherit;font-size:13.5px;width:120px;color:var(--apl-ink)}
.apl-type input:focus{outline:2px solid var(--apl-sky);outline-offset:0;border-color:var(--apl-sky)}
@media (max-width: 760px){
  .apl-pop,.apl-pop.time,.apl-pop.r{position:fixed;left:16px;right:16px;bottom:16px;top:auto;width:auto;max-height:80vh;overflow-y:auto;z-index:300}
}

/* the toast */
.apl-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:400;background:var(--apl-ink);color:#ffffff;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-family:'Inter','Segoe UI',system-ui,sans-serif;font-size:13.5px;box-shadow:var(--apl-tip-shadow);max-width:min(640px, calc(100vw - 32px))}
.apl-toast button{border:0;background:transparent;color:var(--apl-yellow);font-weight:700;cursor:pointer;font-size:13.5px;padding:2px 4px}

/* ---------- B10. on a phone: the card ---------- */
.apl-cards{display:flex;flex-direction:column}
.apl-pc{border-bottom:1px solid var(--apl-line);padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:#ffffff}
.apl-pc.row-dates{background:var(--apl-row-dates)}
.apl-pc.row-tagged{background:var(--apl-row-tagged)}
.apl-pc .r1{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.apl-pc .r2{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:13px}
.apl-pc .r2 .k{font-size:11.5px;color:var(--apl-muted);font-weight:600}
.apl-pc .r3{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
@media (max-width: 760px){
  .apl-strip{padding:12px 14px}
  .apl-l1{gap:10px}
  .apl-stats{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .apl-total b{font-size:34px}
  .apl-hours{align-items:flex-start}
  .apl-search{min-width:0;width:100%}
  .apl-f1 .apl-more{display:none;flex-direction:column;align-items:stretch;gap:8px;width:100%}
  .apl-f1.open .apl-more{display:flex}
  .apl-tabs{margin-left:0}
  .apl-top h1.apl-h1{font-size:26px}
  .apl-tip{width:240px}
}
@media (min-width: 761px){ .apl-fbtn{display:none} .apl-f1 .apl-more{display:contents} }

/* ---------- Part C. the date picker (3-date-picker.html) ---------- */
.apl-pickw{position:relative;display:inline-flex}
.apl-pick{position:absolute;top:calc(100% + 8px);left:0;z-index:60;background:#ffffff;border-radius:14px;box-shadow:0 10px 24px rgba(14,54,59,.14);display:flex;overflow:hidden;font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--apl-text)}
.apl-qp{width:170px;flex:0 0 auto;background:#f7f9fa;border-right:1px solid var(--apl-line);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.apl-qp .k{font-size:12px;font-weight:600;color:var(--apl-muted);padding:4px 12px 8px}
.apl-preset{border:0;background:transparent;font-size:13.5px;font-weight:600;color:var(--apl-ink);text-align:left;padding:9px 12px;border-radius:10px;cursor:pointer}
.apl-preset:hover,.apl-preset:focus-visible{background:var(--apl-s2)}
.apl-cal{flex:1 1 0%;padding:18px 22px 16px;display:flex;flex-direction:column;gap:14px}
.apl-months{display:flex;gap:32px}
.apl-month{display:flex;flex-direction:column;gap:8px}
.apl-mh{display:flex;align-items:center;justify-content:space-between;height:32px}
.apl-mh span{font-size:15px;font-weight:800;color:var(--apl-ink);letter-spacing:-0.015em;flex:1 1 0%;text-align:center}
.apl-nav{width:32px;height:32px;border-radius:999px;border:1.5px solid var(--apl-line2);background:#ffffff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex:none}
.apl-nav:hover{background:var(--apl-s2)}
.apl-nav.ghost{visibility:hidden}
.apl-grid7{display:grid;grid-template-columns:repeat(7,38px);gap:3px}
.apl-wk{width:38px;text-align:center;font-size:12px;font-weight:600;color:var(--apl-muted)}
.apl-dd{width:38px;height:38px;border:0;font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:10px;padding:0;background:transparent;color:var(--apl-ink)}
.apl-dd:hover{background:var(--apl-s2)}
.apl-dd.today{box-shadow:0 0 0 2px var(--apl-yellow)}
.apl-dd.mid{background:var(--apl-teal-tint);color:var(--apl-teal)}
.apl-dd.end{background:var(--apl-teal);color:#ffffff;font-weight:800}
.apl-dd:focus-visible{outline:2px solid var(--apl-teal);outline-offset:2px}
.apl-pf{display:flex;align-items:center;gap:10px;border-top:1px solid var(--apl-line);padding-top:12px;flex-wrap:wrap}
.apl-pf .w{display:flex;flex-direction:column;gap:2px}
.apl-pf .w b{font-size:14px;font-weight:700;color:var(--apl-ink)}
.apl-pf .w span{font-size:12px;color:var(--apl-muted)}
.apl-pf .w span.bad{color:var(--apl-on-orange);font-weight:700}
.apl-pf .apl-btn2{padding:9px 16px;white-space:nowrap}
.apl-pf .apl-btny{padding:10px 18px}
@media (max-width: 760px){
  .apl-pick{position:fixed;left:16px;right:16px;top:auto;bottom:16px;flex-direction:column;max-height:85vh;overflow-y:auto;z-index:300}
  .apl-qp{width:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--apl-line)}
  .apl-qp .k{width:100%}
  .apl-months{flex-direction:column}
  .apl-month + .apl-month{display:none}
  .apl-grid7{grid-template-columns:repeat(7,minmax(0,38px))}
}

/* Settings > Appointments: Same-day reasons (E3), inside the settings card's own look (settings-hub's d- classes) */
.apl-rsn{display:flex;flex-direction:column;gap:4px}
.apl-rlist{display:flex;flex-direction:column}
.apl-rrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--apl-line);flex-wrap:wrap}
.apl-rrow:last-child{border-bottom:0}
.apl-rw{flex:1 1 auto;color:var(--apl-ink);font-weight:600}
.apl-rrow input,.apl-radd input{border:1.5px solid var(--apl-line2);border-radius:10px;padding:7px 10px;font:inherit;font-size:14px;min-width:220px;flex:1 1 220px;color:var(--apl-ink)}
.apl-radd{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}