/* ============================================================
   Settings and Users, as drawn (session 380). Daniel, 23 October 2026: "Settings and User sessions both ran and came back NOT
   like the mockups ... Rewrite the session to fix it."
   The six approved drawings (mh-settings-users-mockups-v2: SettingsHome, SettingsAppointmentRules, SettingsByScreen, Users,
   UserPage, AddUser) ported rule for rule: every value below is the drawing's own (sizes, weights, colours, radii, paddings,
   gaps, shadows). Every rule sits under one wrapper, .mhd, and every class carries the d- prefix, so nothing else in the Hub
   changes and no Hub class of the same name (.card, .btn, .pill) leaks in. The drawings' top bar, stripe and left menu were
   context only: the Hub keeps its own. Only the phone rules at the end are not in the drawings (they draw no phone).
   ============================================================ */

/* The content area: .main padding 22px 40px 64px (28px on Settings home and By screen), .wrap 1320px centred, page #f2f4f5.
   The Hub's own .wrap gives 32px under the top band and 72px at the bottom, so the wrapper moves by the difference. */
body:has(#page > .mhd), body:has(#page > .mhd) .sky-fix{ background:#f2f4f5 }
.mhd{ font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif; color:#4d545a; font-size:14px; line-height:1.45; font-weight:450;
  letter-spacing:-0.006em; -webkit-font-smoothing:antialiased; font-feature-settings:normal;
  max-width:1320px; margin:-10px auto -8px; display:flex; flex-direction:column; gap:20px; min-width:0 }
.mhd.d-top28{ margin-top:-4px }
.mhd.d-home{ gap:22px }
.mhd.d-narrow{ max-width:920px }
.mhd *{ box-sizing:border-box }
/* buttons, inputs and selects keep the browser's own line height and letter spacing, as in the drawings (they set neither) */
.mhd button, .mhd input, .mhd select{ line-height:normal; letter-spacing:normal }
.mhd > div:empty, .mhd .d-stack > div:empty{ display:none }
.mhd .d-stack{ display:flex; flex-direction:column; gap:22px; min-width:0 }
.mhd .d-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.mhd a.d-a{ color:#1d6e77; text-decoration:none }
.mhd a.d-a:hover{ text-decoration:underline }
.mhd :focus-visible{ outline:2px solid #1d6e77; outline-offset:2px }

/* ---------- shared, every drawing ---------- */
.mhd .d-card{ background:#fff; border-radius:14px; box-shadow:0 4px 14px rgba(14,54,59,.08); overflow:hidden; border:0; margin:0; padding:0 }
.mhd .d-ic{ width:40px; height:40px; border-radius:10px; background:#144d54; color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 40px }
.mhd .d-ic.d-lg{ width:48px; height:48px; flex-basis:48px }
.mhd .d-ic.d-yellow{ background:#ffd13a; color:#144d54 }
.mhd .d-ic.d-pale{ background:#dceff0; color:#144d54 }
.mhd .d-ch{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid #dfe3e6 }
.mhd .d-ct{ font-size:17px; font-weight:700; color:#16181a; letter-spacing:-0.015em; margin:0; line-height:1.2; font-family:inherit }
.mhd .d-cs{ font-size:12.5px; color:#6b747b }
.mhd .d-b6{ font-weight:600 }
.mhd .d-b7{ font-weight:700 }
.mhd .d-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; line-height:1.45 }
.mhd .d-amber{ background:#fdf0d8; color:#7a5312 }
.mhd .d-green{ background:#e2f4ee; color:#08513f }
.mhd .d-teal{ background:#dceff0; color:#144d54 }
.mhd .d-grey{ background:#eef1f3; color:#4d545a }
.mhd .d-navy{ background:#144d54; color:#fff }
.mhd .d-orange{ background:#ffe8d6; color:#9a4a0e }
.mhd .d-red{ background:#fbe4e0; color:#8a2617 }
.mhd .d-purple{ background:#ece6f7; color:#4b2e83 }
.mhd .d-scr{ font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; background:#dceff0; color:#144d54; text-decoration:none; line-height:1.45 }
.mhd a.d-scr:hover{ text-decoration:underline }
.mhd .d-head .d-scr{ padding:3px 10px }
.mhd .d-lock{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:#6b747b }
.mhd .d-btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:10px; font-family:inherit; font-weight:600; font-size:13.5px;
  border:1px solid #c9d0d4; background:#fff; color:#16181a; cursor:pointer; white-space:nowrap; text-decoration:none; margin:0; box-shadow:none }
.mhd .d-btn:hover{ background:#f2f4f5 }
.mhd .d-btn.d-go{ background:linear-gradient(#ffd13a,#f5c21c); border:0; font-weight:700; box-shadow:0 6px 16px rgba(217,106,24,.28) }
.mhd .d-btn.d-go:hover{ background:linear-gradient(#ffdb5c,#f5c21c) }
.mhd .d-btn.d-danger{ border-color:#e7b4aa; color:#8a2617 }
.mhd .d-btn.d-danger:hover{ background:#fbe4e0 }
.mhd .d-btn[disabled]{ opacity:.5; cursor:not-allowed }
.mhd .d-ed{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#1d6e77; background:none; border:0; padding:6px 8px; border-radius:8px;
  cursor:pointer; font-family:inherit; text-decoration:none; height:auto; margin:0; box-shadow:none }
.mhd .d-ed:hover{ background:#e9ecee; text-decoration:none }
.mhd .d-ed[disabled]{ opacity:.5; cursor:not-allowed }
.mhd .d-ed[disabled]:hover{ background:none }

/* the breadcrumb, with chevrons */
.mhd .d-crumb{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#6b747b; flex-wrap:wrap; margin:0 }
.mhd .d-crumb a{ color:#1d6e77; text-decoration:none }
.mhd .d-crumb a:hover{ text-decoration:underline }

/* a page's header card: icon, title, line, where it shows, who can change it */
.mhd .d-head{ padding:20px 22px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap }
.mhd .d-hmain{ flex:1; min-width:320px }
.mhd .d-h1{ margin:0; font-size:28px; font-weight:800; color:#16181a; letter-spacing:-0.03em; line-height:1.45; font-family:inherit }
.mhd .d-lead{ font-size:15px; margin-top:4px }
.mhd .d-shows{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:12px }
.mhd .d-hside{ display:flex; flex-direction:column; gap:6px; align-items:flex-end }
.mhd .d-lockline{ display:inline-flex; align-items:center; gap:6px; font-weight:600 }

/* the section list on the left, and the column of sections */
.mhd .d-side2{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start }
.mhd .d-side2.full{ grid-template-columns:minmax(0,1fr) }
.mhd .d-col{ display:flex; flex-direction:column; gap:20px; min-width:0 }
.mhd .d-sub{ display:flex; flex-direction:column; gap:2px; padding:10px }
.mhd .d-sub a{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:10px; color:#4d545a; font-weight:600; font-size:14px; text-decoration:none }
.mhd .d-sub a:hover{ background:#e9ecee; text-decoration:none }
.mhd .d-sub a.on{ background:#dceff0; color:#144d54; font-weight:700 }
.mhd .d-sub .d-else{ border-top:1px solid #edf0f2; margin:8px 4px 4px; padding-top:10px }
.mhd .d-sub .d-else.d-first{ border-top:0; margin-top:0; padding-top:4px }

/* a section card, and its rules */
.mhd .d-sec{ padding:18px 22px; display:flex; flex-direction:column; gap:14px }
.mhd .d-sec.d-editing{ box-shadow:0 0 0 2px #1d6e77,0 4px 14px rgba(14,54,59,.08) }
.mhd .d-sh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.mhd .d-shr{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.mhd .d-msg{ font-size:13px }
.mhd .d-bad{ color:#8a2617 }
.mhd .d-okt{ color:#08513f }
.mhd .d-rule{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:start; padding:14px 0; border-top:1px solid #edf0f2 }
.mhd .d-rules > .d-rule:first-child, .mhd .d-rule.d-first{ border-top:0; padding-top:0 }
.mhd .d-rule.d-rsw{ align-items:center; gap:14px }
.mhd .d-sent{ font-size:16px; color:#16181a; line-height:1.6 }
.mhd .d-sent + .d-sent{ margin-top:6px }
.mhd .d-sent b{ font-weight:700 }
.mhd .d-val{ display:inline-flex; align-items:center; padding:1px 10px; margin:0 2px; border-radius:8px; background:#dceff0; color:#144d54; font-weight:800 }
.mhd .d-val.d-none{ background:#fdf0d8; color:#7a5312 }
.mhd .d-inp{ display:inline-flex; align-items:center; gap:4px; margin:0 2px }
.mhd .d-inp input{ width:64px; height:34px; border:2px solid #1d6e77; border-radius:8px; font-family:inherit; font-size:16px; font-weight:800; color:#16181a; text-align:center;
  background:#fff; padding:1px 2px; margin:0; box-shadow:none; outline:0; min-height:0 }
.mhd .d-inp input.d-wide{ width:320px; max-width:100%; text-align:left; padding:0 10px }
.mhd .d-inp input.d-time{ width:84px }
.mhd .d-chks{ display:inline-flex; gap:8px; flex-wrap:wrap; vertical-align:middle; margin:2px 0 }
.mhd .d-chk{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px; border-radius:999px; border:1px solid #c9d0d4; font-weight:600; font-size:13.5px;
  background:#fff; color:#4d545a; cursor:pointer; font-family:inherit; margin:0 }
.mhd .d-chk:hover{ border-color:#1d6e77 }
.mhd .d-chk.on{ background:#144d54; border-color:#144d54; color:#fff }
.mhd .d-chk[disabled]{ opacity:.5; cursor:not-allowed }
.mhd .d-why{ font-size:13px; color:#6b747b; margin-top:4px }
.mhd .d-fixed{ display:flex; gap:10px; align-items:flex-start; background:#f2f4f5; border-radius:10px; padding:10px 12px; font-size:13px }
.mhd .d-fixed svg{ flex:0 0 16px; margin-top:2px }
.mhd .d-prev{ border:1px dashed #c9d0d4; border-radius:12px; padding:12px 14px; background:#f8fafa; display:flex; flex-direction:column; gap:8px }
.mhd .d-pk{ font-size:12px; font-weight:700; color:#1d6e77 }
.mhd .d-sw{ position:relative; width:46px; height:26px; border-radius:999px; background:#1d6e77; border:0; cursor:pointer; flex:0 0 46px; padding:1px 6px; margin:0; display:inline-block }
.mhd .d-sw span{ position:absolute; right:3px; top:3px; width:20px; height:20px; border-radius:999px; background:#fff }
.mhd .d-sw.d-off{ background:#c9d0d4 }
.mhd .d-sw.d-off span{ right:auto; left:3px }
.mhd .d-sw.d-dis{ opacity:.45; cursor:not-allowed }
.mhd .d-sw.d-view{ cursor:default }
.mhd .d-hist{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#6b747b }
.mhd .d-hist:has(> span:empty){ display:none }
.mhd .d-impact{ display:flex; align-items:center; gap:10px; background:#fff5cc; border-radius:10px; padding:10px 14px; font-size:13.5px; color:#16181a }
.mhd .d-saved{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#08513f }
.mhd .d-note{ background:#fff; border-radius:14px; box-shadow:0 4px 14px rgba(14,54,59,.08); padding:14px 22px; display:flex; gap:10px; align-items:center; font-size:13.5px }

/* a tool kept as it works (377): its own look inside, as before */
.mhd .d-tool{ color:var(--ink); font-size:14px; line-height:1.5; letter-spacing:-0.006em; font-feature-settings:"cv02","cv03","cv04","cv11","tnum"; min-width:0 }
.mhd .d-tool a{ color:var(--teal-dark) }

/* ---------- Settings home (SettingsHome.html) ---------- */
.mhd .d-h1big{ margin:0; font-size:40px; font-weight:800; color:#144d54; letter-spacing:-0.035em; line-height:1.02; font-family:inherit }
.mhd .d-lead6{ font-size:15px; margin-top:6px }
.mhd .d-tools{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.mhd .d-search{ flex:1; min-width:280px; display:flex; align-items:center; gap:10px; height:48px; padding:0 18px; background:#fff; border:1px solid #c9d0d4; border-radius:999px; margin:0 }
.mhd .d-search input{ flex:1; border:0; outline:0; font-family:inherit; font-size:15px; color:#16181a; background:none; height:auto; padding:1px 2px; margin:0; box-shadow:none; min-width:0; border-radius:0; font-weight:400; line-height:normal }
.mhd .d-search:focus-within{ border-color:#1d6e77 }
.mhd .d-seg{ display:inline-flex; background:#e9ecee; border-radius:999px; padding:4px }
.mhd .d-seg button{ font-family:inherit; font-size:13.5px; font-weight:700; border:0; background:none; color:#4d545a; padding:8px 16px; border-radius:999px; cursor:pointer; margin:0; height:auto }
.mhd .d-seg button:hover{ background:#dfe3e6 }
.mhd .d-seg button.on{ background:#144d54; color:#fff }
.mhd .d-row{ display:grid; grid-template-columns:minmax(0,1fr) 28px; gap:12px; align-items:center; padding:14px 20px; border-top:1px solid #edf0f2; color:inherit; text-decoration:none; cursor:pointer }
.mhd .d-row:hover{ background:#e9ecee; text-decoration:none }
.mhd .d-ch + .d-row, .mhd .d-row.d-first{ border-top:0 }
.mhd .d-rn{ font-size:15px; font-weight:700; color:#16181a; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.mhd .d-rd{ font-size:13px; color:#4d545a; margin-top:2px }
.mhd .d-rv{ font-size:13px; color:#16181a; font-weight:600; margin-top:6px }
.mhd .d-used{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px }
.mhd .d-uk{ font-size:12px; font-weight:600; color:#6b747b }
.mhd .d-chev{ color:#9aa4ab; justify-self:end }
.mhd .d-look{ background:#fffaf0; box-shadow:0 4px 14px rgba(14,54,59,.08),inset 0 0 0 1px #f1dfba }
.mhd .d-look .d-ch{ border-bottom-color:#f1dfba }
.mhd .d-att{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) }
.mhd .d-att > a{ padding:16px 20px; display:flex; align-items:center; gap:14px; color:inherit; text-decoration:none }
.mhd .d-att > a + a{ border-left:1px solid #f1dfba }
.mhd .d-att > a:nth-child(3n+1){ border-left:0 }
.mhd .d-att > a:nth-child(n+4){ border-top:1px solid #f1dfba }
.mhd .d-att > a:hover{ background:#fff3d6; text-decoration:none }
.mhd .d-att .d-rn{ font-size:14px }
.mhd .d-att .d-pill{ font-size:13px }
.mhd .d-an{ font-size:30px; font-weight:800; color:#16181a; letter-spacing:-0.035em; line-height:1 }
.mhd .d-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start }
.mhd .d-grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) }
.mhd .d-grid3 > .d-row{ border-right:1px solid #edf0f2 }
.mhd .d-grid3 > .d-row:nth-child(-n+3){ border-top:0 }
.mhd .d-grid3 > .d-row:nth-child(3n){ border-right:0 }
.mhd .d-hit .d-where{ margin-left:auto }
.mhd mark{ background:#fdf0d8; color:inherit; padding:0 1px; border-radius:3px }
.mhd .d-empty{ padding:16px 20px; color:#6b747b; font-size:14px }

/* ---------- Settings, By screen (SettingsByScreen.html) ---------- */
.mhd .d-scrlist{ padding:10px; display:flex; flex-direction:column; gap:2px }
.mhd .d-scrlist a{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:10px; color:#4d545a; font-weight:600; text-decoration:none }
.mhd .d-scrlist a:hover{ background:#e9ecee; text-decoration:none }
.mhd .d-scrlist a.on{ background:#dceff0; color:#144d54; font-weight:700 }
.mhd .d-n{ font-size:12px; font-weight:700; color:#6b747b; background:#e9ecee; border-radius:999px; padding:1px 8px }
.mhd .on .d-n{ background:#fff; color:#144d54 }
.mhd .d-ph{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid #dfe3e6; flex-wrap:wrap }
.mhd .d-ct.d-ct20{ font-size:20px }
.mhd .d-part{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; padding:16px 20px; border-top:1px solid #edf0f2; align-items:start }
.mhd .d-ph + .d-part{ border-top:0 }
.mhd .d-pn{ display:flex; align-items:center; gap:10px }
.mhd .d-pb{ width:30px; height:30px; border-radius:8px; background:#e9ecee; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#144d54; flex:0 0 30px }
.mhd .d-pt{ font-weight:700; color:#16181a; font-size:15px }
.mhd .d-links{ display:flex; flex-direction:column; gap:8px }
.mhd .d-lk{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 14px; border-radius:10px; background:#f2f4f5; color:inherit; text-decoration:none }
.mhd .d-lk:hover{ background:#dceff0; text-decoration:none }
.mhd .d-ln{ font-weight:700; color:#16181a }
.mhd .d-lv{ font-size:13px; color:#4d545a }
.mhd .d-where{ font-size:12px; font-weight:700; color:#1d6e77; white-space:nowrap }
.mhd .d-gear{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#1d6e77; background:#fff; border:1px solid #c9d0d4; border-radius:999px; padding:6px 12px; text-decoration:none }
.mhd a.d-gear:hover{ background:#e9ecee; text-decoration:none }
.mhd .d-pfoot{ padding:14px 20px; border-top:1px solid #dfe3e6; background:#f8fafa; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.mhd .d-pfoot .d-cs{ font-size:13px; color:#4d545a }

/* ---------- Users (Users.html) ---------- */
.mhd .d-gap{ display:flex; align-items:center; gap:10px; background:#fdf0d8; color:#5c3e0c; border-radius:12px; padding:12px 16px; font-size:14px }
.mhd .d-gap svg{ flex:none }
.mhd .d-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid #edf0f2 }
.mhd .d-tabs{ display:flex; gap:4px; background:#e9ecee; border-radius:12px; padding:4px; max-width:100%; overflow-x:auto }
.mhd .d-tab{ height:36px; padding:0 14px; border-radius:9px; border:0; background:none; font-family:inherit; font-weight:600; font-size:13.5px; color:#4d545a; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; margin:0; white-space:nowrap; flex:none }
.mhd .d-tab:hover{ background:#dfe3e6 }
.mhd .d-tab.on{ background:#fff; color:#144d54; font-weight:700; box-shadow:0 1px 4px rgba(14,54,59,.12) }
.mhd .d-tab .d-tn{ font-size:12px; font-weight:700; color:#6b747b }
.mhd .d-usearch{ position:relative; margin-left:auto }
.mhd .d-usearch svg{ position:absolute; left:12px; top:12px; pointer-events:none }
.mhd .d-usearch input{ height:40px; border:1px solid #c9d0d4; border-radius:10px; padding:0 12px 0 36px; font-family:inherit; font-size:14px; width:280px; background:#fff;
  color:#000; margin:0; box-shadow:none; max-width:100%; font-weight:400 }
.mhd .d-usearch input:focus{ border-color:#1d6e77; outline:0 }
.mhd .d-filter{ padding:10px 18px; border-bottom:1px solid #edf0f2; font-size:13.5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.mhd .d-tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; position:relative }   /* the hidden column labels stay inside the scroll box, so the table never widens the page */
.mhd .d-tbl{ border-collapse:separate; border-spacing:0; width:100%; min-width:1060px; font-size:14px; margin:0; table-layout:auto }
.mhd .d-tbl th{ font-size:12.5px; font-weight:600; color:#6b747b; text-align:left; padding:12px 14px; border-bottom:1px solid #edf0f2; background:#fafbfb; white-space:nowrap;
  text-transform:none; letter-spacing:inherit; max-width:none; overflow:visible; text-overflow:clip; line-height:1.45; box-shadow:none; position:static }
.mhd .d-tbl th.c, .mhd .d-tbl td.c{ text-align:center }
.mhd .d-tbl th .d-grp{ display:block; font-size:11.5px; font-weight:700; color:#1d6e77; margin-bottom:2px }
.mhd .d-tbl td{ padding:14px 14px; border-bottom:1px solid #edf0f2; vertical-align:middle; max-width:none; overflow:visible; text-overflow:clip; white-space:normal; color:#4d545a; background:none; line-height:1.45; font-weight:inherit; font-size:inherit; box-shadow:none }
.mhd .d-tbl tr.d-tr{ cursor:pointer }
.mhd .d-tbl tr.d-tr:hover td{ background:#f8fafa }
.mhd .d-tbl tr.d-tr:focus-visible{ outline:2px solid #1d6e77; outline-offset:-2px }
.mhd .d-tbl .d-vline{ border-left:1px solid #edf0f2 }
.mhd .d-tbl .d-nowrap{ white-space:nowrap }
.mhd .d-who{ display:flex; align-items:center; gap:12px; min-width:0 }
.mhd .d-who > div{ min-width:0 }
.mhd .d-av{ width:38px; height:38px; border-radius:999px; background:#dceff0; color:#144d54; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex:0 0 38px }
.mhd .d-av.d-you{ background:#ffd13a }
.mhd .d-av.d-q{ background:#fdf0d8; color:#7a5312 }
.mhd .d-nm{ font-weight:700; color:#16181a; font-size:14.5px }
.mhd .d-em{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px }
.mhd .d-tbl .d-pill.d-sm{ font-size:11.5px; padding:1px 8px }
.mhd .d-yes{ display:inline-flex; width:26px; height:26px; border-radius:999px; background:#1d6e77; color:#fff; align-items:center; justify-content:center; vertical-align:middle }
.mhd .d-no{ display:inline-block; width:14px; height:2px; border-radius:2px; background:#c9d0d4; vertical-align:middle }
.mhd .d-open{ display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:13px; color:#1d6e77; text-decoration:none; white-space:nowrap }
.mhd .d-open:hover{ text-decoration:underline }
.mhd .d-tnote{ padding:12px 18px }
.mhd .d-quiet{ padding:0 18px 12px }
.mhd .d-quiet summary{ cursor:pointer; color:#1d6e77; font-weight:600; font-size:12.5px }
.mhd .d-quiet ul{ margin:6px 0 0; padding-left:18px }
.mhd .d-host{ padding:16px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.mhd .d-host .d-ct{ font-size:15px }

/* ---------- One person's page (UserPage.html) ---------- */
.mhd .d-uhead{ padding:20px 22px; display:flex; gap:18px; align-items:center; flex-wrap:wrap }
.mhd .d-av.d-big{ width:64px; height:64px; font-size:22px; flex:0 0 64px }
.mhd .d-titlerow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.mhd .d-facts{ display:flex; gap:18px; flex-wrap:wrap; margin-top:6px; font-size:14.5px }
.mhd .d-facts .d-cs{ font-size:14px }
.mhd .d-rule.d-urule{ display:flex; align-items:center; gap:16px }
.mhd .d-urule > .d-rmain{ flex:1; min-width:0 }
.mhd .d-urule .d-why{ margin-top:2px }
.mhd .d-sec > .d-cs.d-under{ margin-top:-6px }
.mhd .d-log{ display:grid; grid-template-columns:150px minmax(0,1fr) 120px; gap:12px; padding:10px 0; border-top:1px solid #edf0f2; font-size:13.5px }
.mhd .d-logs > .d-log:first-child{ border-top:0 }
.mhd .d-log .d-w{ color:#16181a }
.mhd .d-confirm{ display:flex; flex-direction:column; gap:10px; background:#fff5cc; border-radius:10px; padding:12px 14px; font-size:14px; color:#16181a }
.mhd .d-confirm .d-row2{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap }
.mhd .d-panel{ padding:18px 22px; display:flex; flex-direction:column; gap:12px; box-shadow:0 0 0 2px #1d6e77,0 4px 14px rgba(14,54,59,.08) }
.mhd .d-panel p{ margin:0; font-size:14px }
.mhd .d-prow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.mhd .d-sel{ height:38px; border:1px solid #c9d0d4; border-radius:10px; padding:0 10px; font-family:inherit; font-size:15px; color:#16181a; background:#fff; margin:0 2px; max-width:100% }

/* ---------- Add a user (AddUser.html) ---------- */
.mhd .d-asec{ padding:20px 22px; display:flex; flex-direction:column; gap:14px; border-top:1px solid #edf0f2 }
.mhd .d-asec.d-first{ border-top:0 }
.mhd .d-asec .d-lead{ font-size:15px; margin-top:-6px }
.mhd .d-step{ display:flex; align-items:center; gap:10px }
.mhd .d-num{ width:28px; height:28px; border-radius:999px; background:#144d54; color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex:0 0 28px }
.mhd .d-lbl{ display:block; font-size:13px; font-weight:700; color:#16181a; margin-bottom:6px }
.mhd .d-ainp{ width:100%; height:44px; border:1px solid #c9d0d4; border-radius:10px; padding:0 12px; font-family:inherit; font-size:15px; color:#16181a; background:#fff; margin:0; box-shadow:none; min-width:0; font-weight:400 }
.mhd .d-ainp:focus{ border:2px solid #1d6e77; outline:0 }
.mhd .d-fields{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px }
.mhd .d-pwrow{ display:flex; gap:8px }
.mhd .d-asec .d-btn{ height:42px; padding:0 16px; font-size:14px }
.mhd .d-people{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.mhd .d-pp{ display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #c9d0d4; border-radius:12px; background:#fff; font-family:inherit; text-align:left; cursor:pointer; margin:0; color:#000; font-size:13.3333px }
.mhd .d-pp:hover{ border-color:#1d6e77 }
.mhd .d-pp.on{ border:2px solid #1d6e77; background:#f1f9f9 }
.mhd .d-pp .d-av{ width:34px; height:34px; font-size:12px; flex:0 0 34px }
.mhd .d-pp .d-av.d-plus{ background:#eef1f3; color:#4d545a }
.mhd .d-pp b{ color:#16181a }
.mhd .d-roles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.mhd .d-rl{ padding:12px 14px; border:1px solid #c9d0d4; border-radius:12px; background:#fff; font-family:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:4px; margin:0; color:#000; font-size:13.3333px }
.mhd .d-rl:hover{ border-color:#1d6e77 }
.mhd .d-rl.on{ border:2px solid #1d6e77; background:#f1f9f9 }
.mhd .d-rl b{ color:#16181a; font-size:14.5px }
.mhd .d-arow{ display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid #edf0f2 }
.mhd .d-agrp + .d-arow{ border-top:0 }
.mhd .d-arow .d-sent{ font-size:15px; flex:1; line-height:1.45 }
.mhd .d-agrp{ font-size:12px; font-weight:700; color:#1d6e77; margin-top:6px }
.mhd .d-agrp.d-gap12{ margin-top:12px }
.mhd .d-tip{ display:flex; gap:10px; align-items:center; background:#fff5cc; border-radius:10px; padding:10px 14px; font-size:13.5px; color:#16181a; flex-wrap:wrap }
.mhd .d-afoot{ flex-direction:row; justify-content:flex-end; gap:10px; background:#fafbfb; align-items:center; flex-wrap:wrap }
.mhd .d-afoot .d-msg{ margin-right:auto; font-size:13.5px }

/* ---------- phone: the drawings draw none; the same parts stacked, with the Hub's own phone gutter ---------- */
@media (max-width:1100px){
  .mhd .d-grid3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .mhd .d-grid3 > .d-row{ border-top:1px solid #edf0f2; border-right:0 }
  .mhd .d-grid3 > .d-row:nth-child(-n+2){ border-top:0 }
  .mhd .d-grid3 > .d-row:nth-child(odd){ border-right:1px solid #edf0f2 }
}
@media (max-width:900px){
  .mhd .d-grid2, .mhd .d-side2{ grid-template-columns:minmax(0,1fr) }
  .mhd .d-roles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:760px){
  .mhd, .mhd.d-top28{ margin-top:-12px }
  .mhd .d-h1big{ font-size:32px }
  .mhd .d-h1{ font-size:24px }
  .mhd .d-search{ min-width:0; flex:1 1 100% }
  .mhd .d-hmain{ min-width:0; flex:1 1 100% }
  .mhd .d-hside{ align-items:flex-start }
  .mhd .d-grid3{ grid-template-columns:minmax(0,1fr) }
  .mhd .d-grid3 > .d-row{ border-right:0 !important; border-top:1px solid #edf0f2 }
  .mhd .d-grid3 > .d-row:first-child{ border-top:0 }
  .mhd .d-att{ grid-template-columns:minmax(0,1fr) }
  .mhd .d-att > a + a{ border-left:0; border-top:1px solid #f1dfba }
  .mhd .d-row, .mhd .d-ch, .mhd .d-ph, .mhd .d-part, .mhd .d-pfoot{ padding-left:16px; padding-right:16px }
  .mhd .d-head, .mhd .d-uhead, .mhd .d-sec, .mhd .d-asec, .mhd .d-panel{ padding:16px }
  .mhd .d-part{ grid-template-columns:minmax(0,1fr); gap:10px }
  .mhd .d-rule{ grid-template-columns:minmax(0,1fr) }
  .mhd .d-rule.d-rsw, .mhd .d-rule.d-urule{ display:flex }
  .mhd .d-inp input.d-wide{ width:100% }
  .mhd .d-bar{ padding:12px }
  .mhd .d-tabs{ width:100% }
  .mhd .d-tab{ padding:0 10px }
  .mhd .d-usearch{ margin-left:0; width:100% }
  .mhd .d-usearch input{ width:100% }
  .mhd .d-tbl td, .mhd .d-tbl th{ padding-left:12px; padding-right:12px }
  .mhd .d-log{ grid-template-columns:minmax(0,1fr); gap:2px }
  .mhd .d-fields, .mhd .d-people, .mhd .d-roles{ grid-template-columns:minmax(0,1fr) }
  .mhd .d-pwrow{ flex-wrap:wrap }
}