/* assign.css -- session 396 (briefs/session-396-brief.md; mh-home-assign-mockups-v1 assign-map, assign-list, settings-service-row-colors): the
   Assign page (a preview) and Settings > Services > Row colors. The mockups' own <style> blocks and inline styles, ported rule for rule as named
   tokens and classes under .mha (classes as-). Every value is the mockup's unless a comment says otherwise. */
.mha{--as-ink:#16181a;--as-text:#4d545a;--as-muted:#6b747b;--as-faint:#aab4ba;--as-line:#dfe3e6;--as-line2:#c9d0d4;--as-s2:#e9ecee;--as-bg:#f2f4f5;--as-na:#f7f8f9;
  --as-b700:#144d54;--as-b500:#1d6e77;--as-b300:#6fd5d4;--as-b100:#dceff0;--as-y500:#ffd13a;--as-y600:#f5c21c;--as-y100:#fff5cc;--as-y-ink:#5c4a00;
  --as-o500:#ff8a33;--as-o100:#ffe8d6;--as-on-o:#9a4a0e;--as-a100:#fdf0d8;--as-on-a:#7a5312;--as-a-line:#b7791f;--as-g100:#e2f4ee;--as-on-g:#08513f;--as-g500:#2e9c7c;
  --as-p100:#ece6f7;--as-on-p:#4b2e83;--as-map:#e8eef0;--as-shadow:0 4px 14px rgba(14,54,59,.08);--as-pop:0 12px 30px rgba(14,54,59,.22);--as-card:0 10px 24px rgba(14,54,59,.18);
  background:var(--as-bg);color:var(--as-text);font-family:var(--ui-font,'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif);
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum";min-height:100%}
.mha *{box-sizing:border-box}
.mha a{color:var(--as-b500);text-decoration:none}
.mha a:hover{text-decoration:underline}
.mha a:focus-visible,.mha button:focus-visible,.mha input:focus-visible,.mha summary:focus-visible,.mha [tabindex]:focus-visible{outline:2px solid var(--as-b700);outline-offset:2px}
.mha button{font:inherit}

/* the page's frame: full width under the Hub's top bar, its own padding (as home-preview.css #page.hh-page) */
#page.as-page{padding:calc(var(--hdrH) + var(--bandH)) 0 0;max-width:none;margin:0;box-sizing:border-box;background:#f2f4f5;min-height:100vh}
.mha .as-strip{background:var(--as-y100);color:var(--as-y-ink);font-size:13.5px;font-weight:600;padding:9px 40px;text-align:center}
/* main: max width 1760, centred, padding 24px 32px 40px, 18px between rows (the list mockup: 16) */
.mha .as-main{max-width:1760px;margin:0 auto;padding:24px 32px 40px;display:flex;flex-direction:column;gap:18px}
.mha .as-main.as-list{gap:16px}
.mha .as-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mha .as-h1{margin:0;font-size:36px;font-weight:800;letter-spacing:-.035em;color:var(--as-ink);line-height:1.05}
.mha .as-line{margin:6px 0 0;font-size:14.5px}
.mha .as-line b{color:var(--as-on-o);font-weight:700}
.mha .as-days{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mha .as-day{font-size:13px;font-weight:600;border-radius:999px;padding:7px 14px;border:1.5px solid var(--as-line2);background:#ffffff;color:var(--as-ink);cursor:pointer}
.mha .as-day:hover{background:var(--as-s2)}
.mha .as-day.on{background:var(--as-b700);color:#ffffff;border-color:var(--as-b700)}
.mha .as-pick{position:relative}
.mha .as-pick input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.mha .as-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mha .as-note{font-size:12.5px;color:var(--as-muted)}
.mha .as-seg{display:inline-flex;background:var(--as-s2);border-radius:999px;padding:3px;gap:2px}
.mha .as-seg button{font-size:13.5px;font-weight:600;border:0;border-radius:999px;padding:7px 16px;background:transparent;color:var(--as-text);cursor:pointer}
.mha .as-seg button:hover:not(.on):not([disabled]){background:#ffffff}
.mha .as-seg button.on{background:var(--as-b700);color:#ffffff}
.mha .as-seg button.later,.mha .as-seg button[disabled]{color:var(--as-muted);cursor:default}
.mha .as-right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mha .as-lbl{font-size:12.5px;font-weight:600;color:var(--as-text)}
.mha .as-chip{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;display:inline-block}
.mha .as-c-same{background:var(--as-o100);color:var(--as-on-o)}
.mha .as-c-amber{background:var(--as-a100);color:var(--as-on-a)}
.mha .as-c-teal{background:var(--as-b100);color:var(--as-b700)}
.mha .as-c-purple{background:var(--as-p100);color:var(--as-on-p)}
.mha .as-c-green{background:var(--as-g100);color:var(--as-on-g)}
.mha .as-c-grey{background:var(--as-s2);color:var(--as-text)}
.mha .as-c-moved{background:var(--as-on-o);color:#ffffff}
.mha .as-btnY{font-size:14px;font-weight:700;color:var(--as-ink);background:linear-gradient(var(--as-y500),var(--as-y600));border:0;border-radius:10px;padding:10px 14px;box-shadow:0 6px 16px rgba(217,106,24,.28);cursor:pointer;white-space:nowrap}
.mha .as-btnY:hover{filter:brightness(.97)}
.mha .as-btnY[disabled]{opacity:.55;cursor:default}
.mha .as-btnS{font-size:13px;font-weight:600;color:var(--as-ink);background:#ffffff;border:1.5px solid var(--as-line2);border-radius:10px;padding:7px 11px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.mha .as-btnS:hover{background:var(--as-s2);text-decoration:none}
.mha .as-btnS.on{background:var(--as-b100);border-color:var(--as-b500)}
.mha .as-btnS svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mha .as-link{background:none;border:0;padding:0;color:var(--as-b500);font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ---------- the Map view: three panes in a wrapping row, 16px gaps ---------- */
.mha .as-panes{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch}
.mha .as-pane{background:#ffffff;border-radius:14px;box-shadow:var(--as-shadow);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.mha .as-pane-l{flex:1 1 340px;max-width:400px}
.mha .as-pane-m{flex:3 1 520px}
/* The mockup was drawn at 1760 with no menu; with the Hub's menu the content is 1148px at 1440, so above 1180 the three panes stay on one row
   and the map's starting width is 360 instead of 520 (it still takes three parts of any extra room). Full screen gives the big map. */
@media (min-width:1181px){ .mha .as-panes{flex-wrap:nowrap} .mha .as-pane-m{flex-basis:360px} }
.mha .as-pane-r{flex:1 1 380px;max-width:460px;position:relative}
.mha .as-phead{padding:16px 18px 12px;border-bottom:1px solid var(--as-line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mha .as-ptitle{font-size:17px;font-weight:700;color:var(--as-ink);letter-spacing:-.015em}
.mha .as-pcap{font-size:12.5px;color:var(--as-muted)}
.mha .as-pcap.as-wide{width:100%}
.mha .as-ap{display:flex;gap:10px;padding:12px 18px;border:0;border-bottom:1px solid var(--as-line);cursor:pointer;color:inherit;background:#ffffff;text-align:left;width:100%}
.mha .as-ap:hover{background:var(--as-s2)}
.mha .as-ap.on{background:var(--as-y100);box-shadow:inset 3px 0 0 var(--as-y500)}
.mha .as-ap.plan{background:repeating-linear-gradient(135deg,#ffffff 0 10px,#f2f6f7 10px 20px)}
.mha .as-ap.plan.on{background:repeating-linear-gradient(135deg,var(--as-y100) 0 10px,#fbeeb8 10px 20px)}
.mha .as-ap .t{font-size:13px;font-weight:700;color:var(--as-ink);width:54px;flex:none}
.mha .as-ap .n{font-size:14px;font-weight:600;color:var(--as-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mha .as-ap .s{font-size:12.5px;color:var(--as-muted);margin-top:2px}
.mha .as-ap .cs{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.mha .as-more{padding:12px 18px;font-size:13.5px;font-weight:600;background:none;border:0;color:var(--as-b500);text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.mha .as-empty{padding:16px 18px;font-size:13.5px;color:var(--as-muted)}
.mha .as-mapbox{position:relative;flex:1;min-height:620px;background:var(--as-map)}
.mha .as-mapcanvas{position:absolute;inset:0}
.mha .as-mapmsg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13.5px;color:var(--as-muted);padding:20px;text-align:center}
.mha .as-mcard{position:absolute;left:16px;top:16px;background:#ffffff;border-radius:10px;box-shadow:var(--as-card);padding:10px 12px;font-size:13px;max-width:260px;z-index:2}
.mha .as-mcard .h{font-weight:700;color:var(--as-ink)}
.mha .as-mcard .d{color:var(--as-b500);font-weight:600;margin-top:4px}
.mha .as-legend{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);border-radius:10px;padding:8px 12px;font-size:12px;display:flex;gap:14px;flex-wrap:wrap;z-index:2}
.mha .as-legend i{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:5px;vertical-align:-1px}
.mha .as-legend i.ring{border:2px solid var(--as-a-line)}
.mha .as-cl{display:flex;gap:12px;align-items:center;padding:12px 18px;border:0;border-bottom:1px solid var(--as-line);background:#ffffff;width:100%;text-align:left;cursor:pointer;color:inherit}
.mha .as-cl:hover{background:var(--as-s2)}
.mha .as-cl.on{background:#f3fbf8;box-shadow:inset 3px 0 0 var(--as-g500)}
.mha .as-cl.grey{opacity:.6}
.mha .as-av{width:34px;height:34px;border-radius:999px;color:#ffffff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.mha .as-cn{font-size:14px;font-weight:600;color:var(--as-ink)}
.mha .as-cr{font-size:12.5px;color:var(--as-text);margin-top:2px}
.mha .as-cw{font-size:11.5px;color:var(--as-muted);margin-top:3px}
.mha .as-win{font-size:12px;font-weight:700;padding:4px 9px;border-radius:8px;white-space:nowrap;flex:none}
.mha .as-win.all{background:var(--as-g100);color:var(--as-on-g)}
.mha .as-win.hrs{background:var(--as-b100);color:var(--as-b700)}
.mha .as-hrs{height:5px;border-radius:999px;background:var(--as-s2);overflow:hidden;margin-top:6px;width:150px;max-width:100%}
.mha .as-hrs span{display:block;height:100%;background:var(--as-b500)}
.mha .as-plan{padding:14px 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--as-y100)}
.mha .as-plan .w{font-size:12px;color:var(--as-y-ink);width:100%}
.mha .as-lock{padding:14px 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--as-s2);font-size:13px;color:var(--as-ink)}
.mha .as-lock svg,.mha .as-staff svg.lk{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mha .as-fold{padding:12px 18px;font-size:13px;border-top:1px solid var(--as-line)}
.mha .as-fold summary{cursor:pointer;font-weight:600;color:var(--as-ink)}
.mha .as-fold div{margin-top:6px;color:var(--as-muted)}
.mha .as-hist{padding:10px 18px;font-size:12px;color:var(--as-muted);border-top:1px solid var(--as-line)}
.mha .as-showmap{display:none}

/* ---------- the List view ---------- */
.mha .as-tcard{background:#ffffff;border-radius:14px;box-shadow:var(--as-shadow);overflow:hidden}
.mha .as-tscroll{overflow-x:auto;padding-bottom:150px;margin-bottom:-150px}
.mha table.as-t{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;table-layout:auto}
.mha .as-t th{position:sticky;top:0;background:var(--as-s2);text-align:left;font-size:12px;font-weight:600;color:var(--as-text);padding:10px;white-space:nowrap;border-bottom:1px solid var(--as-line);z-index:1}
.mha .as-t td{padding:9px 10px;border-bottom:1px solid var(--as-line);white-space:nowrap;vertical-align:middle;color:var(--as-text);background:transparent;overflow:visible}
.mha .as-t tbody tr:hover{filter:brightness(.975)}
/* The Hub's shared table rules (tokens.css: fixed layout, td max-width 0 for ellipsis, uppercase 10.5px headers) are undone here: the mockup's table
   sizes each column to its contents and scrolls sideways inside its card. */
.mha .as-t th{text-transform:none;letter-spacing:normal;box-shadow:none;cursor:default;user-select:auto}
.mha .as-t td{max-width:none;text-overflow:clip}
.mha .as-t th:first-child,.mha .as-t td:first-child{padding-left:10px}
.mha .as-t th:last-child,.mha .as-t td:last-child{padding-right:10px}
.mha .as-t td.num,.mha .as-t th.num{text-align:right}
.mha .as-t td.na{color:var(--as-faint)}
.mha .as-t td.sd{color:var(--as-ink);font-weight:600}
.mha .as-t tr.dragging{opacity:.45}
.mha .as-t tr.dropto td{box-shadow:inset 0 2px 0 var(--as-b500)}
.mha .as-t tfoot td{background:var(--as-s2);font-weight:600;color:var(--as-ink);border-bottom:0}
.mha .as-t tfoot td.num{font-weight:700}
.mha .as-pname{font-weight:600;color:var(--as-ink)}
.mha a.as-pname{color:var(--as-ink);text-decoration:underline;text-decoration-color:var(--as-line2);text-underline-offset:3px}
.mha .as-grip{color:#b8c2c8;cursor:grab;width:18px;background:none;border:0;padding:2px;display:inline-flex}
.mha .as-grip svg{width:14px;height:14px;fill:currentColor}
.mha .as-time{font-size:13px;font-weight:700;color:var(--as-ink);background:rgba(255,255,255,.75);border:1.5px solid var(--as-line2);border-radius:8px;padding:4px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.mha .as-time svg{width:13px;height:13px;fill:none;stroke:var(--as-muted);stroke-width:2.2;stroke-linecap:round}
.mha .as-time:hover{background:#ffffff}
.mha .as-staff{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed var(--as-line2);border-radius:8px;padding:4px 9px;font-weight:600;color:var(--as-ink);background:#ffffff;cursor:pointer;font-size:13px}
.mha .as-staff.need{border-color:var(--as-a-line);background:var(--as-a100);color:var(--as-on-a)}
.mha .as-staff.plan{border-style:solid;border-color:var(--as-b300);background:repeating-linear-gradient(135deg,#ffffff 0 8px,#eef6f7 8px 16px)}
.mha .as-staff.set{border-style:solid;border-color:var(--as-line);cursor:default}
.mha .as-staff:hover:not(.set){filter:brightness(.97)}
.mha .as-av20{width:20px;height:20px;border-radius:999px;color:#ffffff;font-size:9.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
/* "Change in Resort" on a Resort-owned cell: shown on the row's hover or focus, laid over the cell's corner so no column changes width. */
.mha .as-t td{position:relative}
.mha .as-rlink{position:absolute;right:4px;bottom:1px;display:none;font-size:10.5px;font-weight:600;background:rgba(255,255,255,.92);border-radius:4px;padding:0 4px;line-height:1.4}
/* Session 399 (brief B7): only on the cell under the pointer (or holding the focus), never on every cell of the row at once. */
.mha .as-t td:hover > .as-rlink,.mha .as-t td:focus-within > .as-rlink{display:inline}
.mha .as-rlink.as-keep{position:static;display:inline;margin-left:6px;font-size:11.5px;background:none;padding:0}
/* the row whose pick list is open sits above the rows after it */
.mha .as-t tr.popopen{position:relative;z-index:30;filter:none}
.mha .as-staffcell{position:relative}
/* Session 399 (brief B6): the List's type-ahead. The box sits in the Staff cell; its names are one list fixed to the screen (assign.js asgTaPlace keeps
   it inside the window: under the box or above it, leftward at the right edge), in the old pick list's look. */
.mha .as-tain{font:inherit;font-size:13px;font-weight:600;color:var(--as-ink);width:170px;border:1.5px solid var(--as-b500);border-radius:8px;padding:4px 8px;background:#ffffff}
.mha .as-tapop{position:fixed;left:8px;top:8px;width:340px;background:#ffffff;border-radius:12px;box-shadow:var(--as-pop);z-index:960;overflow:hidden;white-space:normal;font-size:13px;color:var(--as-text)}
.mha .as-tabody{overflow-y:auto;max-height:320px}
.mha .as-tapop .hd{padding:7px 12px;font-size:12px;font-weight:600;color:var(--as-muted);background:var(--as-s2);position:sticky;top:0;z-index:1}
.mha .as-tapop .r{display:flex;gap:10px;align-items:center;padding:7px 12px;border:0;border-bottom:1px solid var(--as-line);background:#ffffff;width:100%;text-align:left;cursor:pointer;color:var(--as-text)}
.mha .as-tapop .r:hover,.mha .as-tapop .r.on{background:var(--as-b100)}
.mha .as-tapop .r.grey .nm,.mha .as-tapop .r.grey .sb{opacity:.7}
.mha .as-tapop .r[disabled]{cursor:default}
.mha .as-tapop .r .nm{font-weight:600;color:var(--as-ink)}
.mha .as-tapop .r .sb{font-size:12px}
.mha .as-tapop .r .wn{font-size:12px;font-weight:700;color:var(--as-on-g);white-space:nowrap}
.mha .as-tapop .r .wn.hrs{color:var(--as-b700)}
.mha .as-tapop .ft{padding:9px 12px;font-size:12.5px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--as-line)}
.mha .as-tapop .hl{padding:8px 12px;font-size:12px;color:var(--as-muted);border-top:1px solid var(--as-line)}
.mha .as-legrow{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;align-items:center}
.mha .as-legrow .k{font-weight:600;color:var(--as-ink)}
.mha .as-legrow .i{display:inline-flex;align-items:center;gap:6px}
.mha .as-sw{display:inline-block;width:26px;height:16px;border-radius:4px}
.mha .as-legrow .tip{margin-left:auto;color:var(--as-muted)}
.mha .as-colpop{position:absolute;right:0;top:calc(100% + 6px);width:290px;background:#ffffff;border-radius:12px;box-shadow:var(--as-pop);z-index:25;padding:8px 0;max-height:70vh;overflow:auto}
.mha .as-colrow{display:flex;align-items:center;gap:10px;padding:6px 12px;font-size:13px;color:var(--as-ink)}
.mha .as-colrow.drag{opacity:.45}
.mha .as-colrow.dropto{box-shadow:inset 0 2px 0 var(--as-b500)}
.mha .as-colrow label{flex:1;display:flex;gap:8px;align-items:center;cursor:pointer}
.mha .as-colrow .as-grip{cursor:grab}
.mha .as-colmv{background:none;border:1px solid var(--as-line);border-radius:6px;width:24px;height:22px;cursor:pointer;color:var(--as-text);padding:0;font-size:12px}
.mha .as-colmv:hover{background:var(--as-s2)}
.mha .as-relbtn{position:relative}
.mha .as-msg{font-size:12.5px;color:var(--as-muted)}
.mha .as-msg.bad{color:#8a2617}
.mha .as-err{background:#ffffff;border-radius:14px;padding:20px;color:#8a2617}
.mha .as-wait{padding:40px;color:var(--as-muted)}

/* ---------- Settings > Services > Row colors (settings-service-row-colors) ---------- */
.mha.as-set{background:transparent;min-height:0}
.mha .as-rc{background:#ffffff;border-radius:14px;box-shadow:var(--as-shadow);overflow:visible;max-width:1080px}
.mha .as-rcsame{padding:14px 16px;background:var(--as-y100);display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:14px 14px 0 0}
.mha .as-rcrow{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--as-line);position:relative;flex-wrap:wrap}
.mha .as-rchead{background:var(--as-s2);font-size:12px;font-weight:600;color:var(--as-text);padding-top:9px;padding-bottom:9px}
.mha .as-rc .nm{font-size:14px;font-weight:600;color:var(--as-ink);width:230px;flex:none}
.mha .as-rc .kind{font-size:12.5px;color:var(--as-muted);width:120px;flex:none}
.mha .as-rc .sws{display:flex;gap:8px;width:252px;flex:none}
.mha .as-rc .sw{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--as-line);cursor:pointer;padding:0;flex:none}
.mha .as-rc .sw.on{outline:2.5px solid var(--as-ink);outline-offset:2px}
.mha .as-rc .sw[disabled],.mha .as-rc .plus[disabled]{cursor:default}
.mha .as-rc .plus{width:28px;height:28px;border-radius:8px;border:1.5px dashed var(--as-line2);background:#ffffff;color:var(--as-text);cursor:pointer;padding:0;flex:none;font-size:16px;font-weight:700;line-height:1}
.mha .as-rc .plus.on{outline:2.5px solid var(--as-ink);outline-offset:2px}
.mha .as-rc .prev{flex:1;min-width:160px;height:32px;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--as-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mha .as-rc .pop{position:absolute;left:390px;top:calc(100% - 4px);width:330px;background:#ffffff;border-radius:12px;box-shadow:var(--as-pop);z-index:5;padding:14px;display:flex;flex-direction:column;gap:12px}
.mha .as-rc .grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.mha .as-rc .grid button{height:26px;border-radius:6px;border:1px solid var(--as-line);padding:0;cursor:pointer}
.mha .as-rc .grid button.on{outline:2px solid var(--as-ink);outline-offset:1px}
.mha .as-rc .any{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--as-ink);flex-wrap:wrap}
.mha .as-rc .any input{width:40px;height:28px;border:1px solid var(--as-line);border-radius:6px;padding:0;background:#ffffff}
.mha .as-rc .any small{font-size:12px;font-weight:450;color:var(--as-muted)}
.mha .as-rc .acts{display:flex;justify-content:flex-end;gap:8px}
.mha .as-btnC{font-size:13px;font-weight:600;color:var(--as-ink);background:#ffffff;border:1.5px solid var(--as-line2);border-radius:10px;padding:7px 12px;cursor:pointer}
.mha .as-btnC:hover{background:var(--as-s2)}
.mha .as-btnP{font-size:13px;font-weight:700;color:#ffffff;background:var(--as-b700);border:0;border-radius:10px;padding:7px 12px;cursor:pointer}
.mha .as-btnP:hover{filter:brightness(1.08)}
.mha .as-btnP[disabled]{opacity:.5;cursor:default}
.mha .as-rcfoot{justify-content:space-between}
.mha .as-rcfoot span{font-size:12.5px;color:var(--as-muted)}
.mha .as-sp{font-size:14px;margin:0;max-width:1080px}
/* Settings: who makes assignments */
.mha .as-mode{background:#ffffff;border-radius:14px;box-shadow:var(--as-shadow);padding:18px 20px;display:flex;flex-direction:column;gap:12px;max-width:760px}
.mha .as-mode h2{margin:0;font-size:17px;font-weight:700;color:var(--as-ink)}
.mha .as-opt{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--as-ink)}
.mha .as-opt input{margin-top:3px}
.mha .as-opt small{display:block;font-size:12.5px;color:var(--as-muted)}
.mha .as-opt.off{color:var(--as-muted)}
.mha .as-kv{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;border-top:1px solid var(--as-line);padding-top:10px;flex-wrap:wrap}
.mha .as-kv b{color:var(--as-ink)}

/* the menu's Preview tag is home-preview.css's .hh-navtag (the same tag) */

/* Below 1180px the map collapses to a "Show map" button that slides it over the cleaner list (brief C5); at phone width the panes stack. */
@media (max-width:1180px){
  .mha .as-pane-l{max-width:none}
  .mha .as-pane-m{display:none}
  .mha .as-pane-r{max-width:none}
  .mha .as-showmap{display:inline-flex}
  .mha .as-panes.mapopen .as-pane-m{display:flex;position:fixed;right:16px;top:calc(var(--hdrH) + var(--bandH) + 16px);bottom:16px;width:min(720px,calc(100vw - 32px));z-index:40;box-shadow:var(--as-pop)}
  .mha .as-panes.mapopen .as-mapbox{min-height:0}
}
@media (max-width:700px){
  .mha .as-main{padding:16px 16px 32px}
  .mha .as-strip{padding:9px 16px}
  .mha .as-h1{font-size:28px}
  .mha .as-days{margin-left:0}
  .mha .as-pane-l,.mha .as-pane-r{flex:1 1 100%}
  .mha .as-right{margin-left:0}
  .mha .as-panes.mapopen .as-pane-m{left:8px;right:8px;width:auto;top:calc(var(--hdrH) + var(--bandH) + 8px);bottom:8px}
  .mha .as-legrow .tip{margin-left:0}
  .mha .as-rc .nm{width:100%}
  .mha .as-rc .pop{left:8px;right:8px;width:auto}
}
/* Session 398: Can finish next day (the office's toggle) and Try a time (nothing saved) */
.mha .as-c-nd{background:#e7f5ec;color:var(--as-on-g)}
.mha .as-c-red{background:#fbe3df;color:#8f2a1c}
.mha .as-c-try{background:var(--as-y100);color:var(--as-y-ink);border:1px dashed var(--as-a-line)}
.mha .as-ndrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.mha .as-nd{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--as-text);background:#ffffff;border:1.5px solid var(--as-line2);border-radius:999px;padding:2px 9px 2px 4px;cursor:pointer;white-space:nowrap}
.mha .as-nd:hover{background:var(--as-s2)}
.mha .as-nd .k{width:22px;height:13px;border-radius:999px;background:var(--as-line2);position:relative;flex:0 0 22px}
.mha .as-nd .k::after{content:'';position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:999px;background:#ffffff;transition:left .15s}
.mha .as-nd.on{background:#e7f5ec;border-color:var(--as-g500);color:var(--as-on-g)}
.mha .as-nd.on .k{background:var(--as-g500)}
.mha .as-nd.on .k::after{left:11px}
.mha .as-ndnote{font-size:12px;color:var(--as-muted)}
.mha .as-nd[disabled]{opacity:.6;cursor:default}
.mha .as-mline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.mha .as-mcard{max-width:340px}
.mha .as-trycell{position:relative;white-space:nowrap}
.mha .as-trymk{display:inline-block;margin-left:6px;vertical-align:middle}
.mha .as-try{position:absolute;left:0;top:calc(100% + 4px);width:360px;max-width:calc(100vw - 32px);background:#ffffff;border-radius:12px;box-shadow:var(--as-pop);z-index:20;white-space:normal;color:var(--as-text);font-size:13px;text-align:left}
.mha .as-mcard .as-try{position:static;width:auto;box-shadow:none;border:1px solid var(--as-line);margin-top:8px}
.mha .as-try .hd{padding:9px 12px;font-size:12.5px;font-weight:700;color:var(--as-ink);background:var(--as-s2);border-radius:12px 12px 0 0;display:flex;gap:8px;align-items:baseline}
.mha .as-try .hd span{font-weight:500;color:var(--as-muted);font-size:12px}
.mha .as-tryrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px 4px}
.mha .as-tryrow label{font-weight:600;color:var(--as-ink)}
.mha .as-tryrow input{width:96px;font:inherit;font-size:14px;font-weight:700;color:var(--as-ink);border:1.5px solid var(--as-line2);border-radius:8px;padding:5px 8px}
.mha .as-tryres{font-size:12px;color:var(--as-muted)}
.mha .as-tryout{padding:4px 12px 8px;display:grid;gap:6px}
.mha .as-tryg{font-weight:600;color:var(--as-on-g)}
.mha .as-tryg.bad{color:#8f2a1c}
.mha .as-tryc{font-size:12.5px;line-height:1.45}
.mha .as-tryclash{color:#8f2a1c;font-weight:600;border-left:3px solid #c43d2b;padding-left:6px;margin-top:3px}
.mha .as-tryok{color:var(--as-on-g);margin-top:3px}
.mha .as-trybad{color:#8f2a1c}
.mha .as-trywait,.mha .as-tryn{color:var(--as-muted)}
.mha .as-try .ft{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px 10px;border-top:1px solid var(--as-line)}
.mha .as-try .ft .w{font-size:12px;color:var(--as-muted)}


/* ---------- Session 399 (briefs/session-399-brief.md part B) ---------- */
/* B1. Full screen for the whole page: the Hub's menu and top bar hide; the panes (or the List) fill the window. */
body.as-fs .side,body.as-fs .side-scrim,body.as-fs .top,body.as-fs .topband{display:none}
body.as-fs .main{margin-left:0}
body.as-fs #page.as-page{padding-top:0}
body.as-fs .mha .as-strip{display:none}
body.as-fs .mha .as-main{max-width:none;padding:12px 16px 16px;gap:12px}
/* The three panes take the window's height at 1440 and up (the map stays a map, not a strip as tall as the cleaner list); the two lists scroll inside. */
@media (min-width:1181px){
  .mha .as-panes{height:max(620px,calc(100vh - var(--hdrH) - var(--bandH) - 230px))}
  .mha .as-pane-l,.mha .as-pane-r{overflow-y:auto}
  .mha .as-mapbox{min-height:0}
  body.as-fs .mha .as-panes{height:max(560px,calc(100vh - 215px))}
}
.mha .as-fsbtn{margin-left:4px}
/* B2. The map is the Team Map's (#tmMap and its own classes, index.html). On this page: unassigned cleans amber (its "needs a cleaner"), its legend at
   the bottom left (the selected clean's card is at the top left), its Fit all stops above the zoom buttons, no x on a Team Map planned move. */
.mha #tmMap .tm-st.un .tm-disc{background:var(--as-o500);border-color:#ffffff;border-style:solid;box-shadow:0 0 0 1px #d96a18}
.mha .tm-legdot.needcleaner{background:var(--as-o500);border:2px solid #ffffff;box-shadow:0 0 0 1px #d96a18}
.mha .tm-legend{top:auto;bottom:12px}
.mha .as-fitbtn{bottom:auto;top:12px;right:12px}
.mha .tm-plan-x{display:none}
.mha .as-mapnote{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:41;background:var(--as-y100);color:var(--as-y-ink);font-size:12.5px;font-weight:600;border-radius:8px;padding:6px 10px;box-shadow:var(--as-shadow)}
.mha .as-mapnote[hidden]{display:none}
/* B4 and B5. Who's available: Find any cleaner, then Full time, Part time and Not set, alphabetical. */
.mha .as-find{position:relative;padding:10px 18px;border-bottom:1px solid var(--as-line);display:flex;flex-direction:column;gap:4px}
.mha .as-findl{font-size:12px;font-weight:600;color:var(--as-text)}
.mha .as-findin{font:inherit;font-size:13.5px;color:var(--as-ink);border:1.5px solid var(--as-line2);border-radius:8px;padding:6px 10px;width:100%;background:#ffffff}
.mha .as-findin:focus{border-color:var(--as-b500)}
.mha .as-findlist{display:flex;flex-direction:column}
.mha .as-findlist:empty{display:none}
.mha .as-fo{display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:6px;background:#ffffff;width:100%;text-align:left;cursor:pointer;color:var(--as-text);font-size:13px}
.mha .as-fo:hover,.mha .as-fo.on{background:var(--as-b100)}
.mha .as-fo .nm{font-weight:600;color:var(--as-ink)}
.mha .as-fo .wn{margin-left:auto;font-size:12px;font-weight:600;color:var(--as-muted);white-space:nowrap}
.mha .as-fnone{padding:6px 8px;font-size:12.5px;color:var(--as-muted)}
.mha .as-grph{padding:8px 18px 6px;font-size:12px;font-weight:700;color:var(--as-text);background:var(--as-s2);border-bottom:1px solid var(--as-line)}
.mha .as-grph span{font-weight:600;color:var(--as-muted)}
.mha .as-grpn{padding:10px 18px;font-size:12.5px;color:var(--as-muted);border-bottom:1px solid var(--as-line)}
.mha .as-cr.as-clash{color:#8f2a1c;font-weight:600}
.mha .as-win.off{background:var(--as-s2);color:var(--as-text)}
@media (max-width:700px){ body.as-fs .mha .as-main{padding:12px} }