/* ═══════════════════════════════════════════════════════════════════════════
   platform/module-home.css — Module homes v3 (2026-09-27)

   The one shape every owner module home takes, drawn once
   (design_concepts/module_homes_v3/index.html, approved with the doors grid
   moved up under the header). Markup comes from
   frontend/commons/components/module_home.php; data from
   platform/module-home.js. Linked by header.php only while flag
   `module_home_v3` is on, and every rule is scoped under `.mh-page`, so no
   other screen can pick any of it up.

   It rides on the canvas (components.css §16): the transparent sticky bar,
   the gradient hero behind it, the rounded sheet over the hero's foot. What
   this file adds is Home HB's language on top of that:
     header  — live line · extra widget · search pill · white round actions
     sheet   — the doors card · Also chips · Needs you · the latest list ·
               the two banners

   The hero is a fixed gradient in both schemes, so everything ON it is white
   or a `--md-paper-*` role — the frozen pairs made for surfaces that do not
   invert (theme.css). A role token there would go pale-on-pale after sunset.
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-page > .md-canvas__hero { padding-bottom: 50px; }
/* The line art on the blue head sits further back on every module home
   (2026-10-11, the owner's eye): at full strength it ran through the figure
   and the actions and made them read dull. The same strength as the
   customer's page (crm/customer-hub.css). */
.md-canvas-page.mh-page > .md-canvas__hero::after { opacity: .3; }
.mh-page > .md-canvas__sheet { gap: 14px; }
.mh-page > .md-canvas__sheet > * { flex-shrink: 0; }

/* ── 1 · The header ─────────────────────────────────────────────────────── */

/* The live line: one sentence with the number that matters. */
.mh-live {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin: 0 2px 12px;
    color: var(--md-on-brand);
    font-size: 15px;
    line-height: 1.5;
}
.mh-live__txt { min-width: 0; }
.mh-live b {
    font-size: 17px;
    font-weight: var(--md-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.mh-live > .material-symbols-rounded { font-size: 20px; flex: none; }
.mh-live__dot {
    width: 8px; height: 8px; flex: none;
    border-radius: var(--md-shape-full);
    background: var(--md-paper-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-paper-green) 30%, transparent);
}
/* Until the call answers: one soft bar where the sentence will be. */
.mh-live.is-skel .mh-live__txt {
    width: 62%; height: 14px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--md-on-brand) 22%, transparent);
}

/* ── The figure (owner, 2026-10-09: B1 of billing_home_header_concepts.html)
   The live sentence drawn as a headline: a small label with the green dot,
   one large figure with a word beside it, and a frosted pill under it. Drawn
   by module-home.js (paintLive); a home whose line is one plain sentence
   (Studio) keeps the line above. White literals: this header is a fixed
   gradient in both schemes. */
.mh-live--fig { align-items: flex-start; margin-bottom: 14px; }
.mh-live--fig .mh-live__dot { margin-top: 7px; }
.mh-live--fig > .material-symbols-rounded { margin-top: 1px; }
/* No label to sit beside: the dot or the glyph would stand next to a 36px
   figure, so it steps aside. */
.mh-live--fig.mh-live--nok .mh-live__dot,
.mh-live--fig.mh-live--nok > .material-symbols-rounded { display: none; }
/* A glyph is 20px where the dot is 8: what hangs under the label comes back
   by the glyph's width, not the dot's. */
.mh-live--fig > .material-symbols-rounded ~ .mh-live__txt .mh-fig__big,
.mh-live--fig > .material-symbols-rounded ~ .mh-live__txt .mh-fig__none,
.mh-live--fig > .material-symbols-rounded ~ .mh-live__txt .mh-fig__pill { margin-left: -28px; }
.mh-live--fig.mh-live--nok > .material-symbols-rounded ~ .mh-live__txt .mh-fig__big,
.mh-live--fig.mh-live--nok > .material-symbols-rounded ~ .mh-live__txt .mh-fig__none,
.mh-live--fig.mh-live--nok > .material-symbols-rounded ~ .mh-live__txt .mh-fig__pill { margin-left: 0; }
.mh-live--fig .mh-live__txt { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mh-fig__k { font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--md-on-brand) 90%, transparent); }
.mh-live--fig .mh-fig__k { margin-left: 0; }
.mh-fig__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-left: -16px; }
.mh-live--fig.mh-live--nok .mh-fig__big,
.mh-live--fig.mh-live--nok .mh-fig__none,
.mh-live--fig.mh-live--nok .mh-fig__pill { margin-left: 0; }
.mh-live--fig .mh-fig__big b {
    font-family: var(--font-brand);
    font-size: 36px; line-height: 1.2;
    font-weight: var(--md-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.mh-fig__big > span { font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--md-on-brand) 92%, transparent); }
.mh-fig__none {
    margin-left: -16px;
    font-family: var(--font-brand);
    font-size: 22px; line-height: 1.4; font-weight: var(--md-weight-semibold);
}
/* 32px to look at; a link takes the 48px tap target through its margins. */
.mh-fig__pill {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    max-width: 100%;
    min-height: 48px; margin: -2px 0 -8px -16px;
    padding: 0 11px;
    font-size: 12.5px; line-height: 1.5; font-weight: var(--md-weight-medium);
    color: var(--md-on-brand);
    text-decoration: none;
}
.mh-fig__pill::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 8px; bottom: 8px; z-index: -1;
    border-radius: var(--md-shape-full);
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.mh-fig__pill i { width: 8px; height: 8px; flex: none; border-radius: var(--md-shape-full); background: var(--md-paper-amber); }
.mh-fig__pill span:not(.material-symbols-rounded) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-fig__pill .material-symbols-rounded { font-size: 18px; flex: none; margin-right: -5px; }

/* The quick actions: one frosted strip ruled into cells (2026-10-09, with the
   figure above; they were Home HB's white circles). Any number of actions
   shares one row. The `--tiles` layout below is its own thing and unchanged. */
.mh-qa {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 16px 0 0;
}
.mh-qa--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A home with the search as a field in the blue (Customers, Billing): room
   between the field and the actions under it (owner, 2026-11-14 — on Billing
   they touched). Customers had this in its own sheet; now every home has it. */
.md-canvas__find + .mh-qa:not(.mh-qa--tiles), .md-canvas__find + .mh-qa--tiles { margin-top: 16px; }
.mh-qa__a {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 2px 0 0;
    border: 0; background: none; font: inherit; cursor: pointer;
    color: var(--md-on-brand);
    text-align: center;
    text-decoration: none;
    border-radius: var(--md-shape-lg);
}
.mh-qa__c {
    position: relative;
    width: 54px; height: 54px;
    border-radius: var(--md-shape-full);
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .96);
    color: var(--md-paper-on-blue);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55);
}
.mh-qa__c > .material-symbols-rounded { font-size: 25px; }
/* The small "+" on a create verb. */
.mh-qa__plus {
    position: absolute; right: -2px; bottom: -2px;
    width: 19px; height: 19px;
    border-radius: var(--md-shape-full);
    display: grid; place-items: center;
    background: var(--grad-hero);
    color: var(--md-on-brand);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .96);
}
.mh-qa__plus .material-symbols-rounded { font-size: 14px; }
.mh-qa__lbl { font-size: 13px; line-height: 1.5; font-weight: var(--md-weight-semibold); }
.mh-qa__a.is-off .mh-qa__c { opacity: .7; }

/* Tiles — two rows of glass tiles, circle left and the full label beside it
   (Products: "Add Bookable Product"). */
.mh-qa:not(.mh-qa--tiles) {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border-radius: var(--md-shape-xl);
    background: var(--hero-glass, rgba(255, 255, 255, .08));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    overflow: hidden;
}
.mh-qa:not(.mh-qa--tiles) .mh-qa__a {
    justify-content: center;
    gap: 3px;
    min-width: 0; min-height: 64px;
    padding: 9px 2px 7px;
    border-radius: 0;
    box-shadow: 1px 0 0 rgba(255, 255, 255, .24);
}
.mh-qa:not(.mh-qa--tiles) .mh-qa__a:last-child { box-shadow: none; }
.mh-qa:not(.mh-qa--tiles) .mh-qa__c {
    width: auto; height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--md-on-brand);
}
.mh-qa:not(.mh-qa--tiles) .mh-qa__c > .material-symbols-rounded { font-size: 24px; }
/* The glyphs of the create verbs already carry a plus (note_add, person_add). */
.mh-qa:not(.mh-qa--tiles) .mh-qa__plus { display: none; }
.mh-qa:not(.mh-qa--tiles) .mh-qa__lbl {
    max-width: 100%;
    font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The highlighted shortcut (`'hot' => true`; billing's Quick bill). Until
   2026-11-14 a glossy crimson cell with a light streak every 7 seconds; the
   owner then: "the quick bill button is too red, we need to make it better",
   with "keep it simple and basic". Now the strip's one white cell: a red bolt,
   the name in the brand's ink, no gloss and no streak. It still reads as the
   first thing to tap, and red is down to the bolt. */
.mh-qa:not(.mh-qa--tiles) .mh-qa__a--hot {
    background: var(--md-surface-container-lowest);
    box-shadow: none;
}
.mh-qa:not(.mh-qa--tiles) .mh-qa__a--hot .mh-qa__c > .material-symbols-rounded {
    font-size: 26px;
    color: #E11D48;
    font-variation-settings: 'FILL' 1, 'wght' 600;
}
.mh-qa:not(.mh-qa--tiles) .mh-qa__a--hot .mh-qa__lbl {
    color: var(--md-primary);
    font-weight: var(--md-weight-semibold);
    text-shadow: none;
}
.mh-qa--tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.mh-qa--tiles .mh-qa__a {
    flex-direction: row; gap: 9px;
    min-height: 60px;
    padding: 8px 8px 8px 9px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    text-align: start;
}
.mh-qa--tiles .mh-qa__c { width: 38px; height: 38px; flex: none; }
.mh-qa--tiles .mh-qa__c > .material-symbols-rounded { font-size: 21px; }
.mh-qa--tiles .mh-qa__plus { width: 17px; height: 17px; right: -3px; bottom: -3px; }
.mh-qa--tiles .mh-qa__plus .material-symbols-rounded { font-size: 13px; }
.mh-qa--tiles .mh-qa__lbl {
    min-width: 0;
    /* 1.4, not tighter: Devanagari's matras sit above and below the line
       and a tight line with the clamp's overflow cuts them off. */
    font-size: 13px; line-height: 1.4;
    padding-block: 1px;
    text-wrap: balance;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
}
.mh-qa--tiles .mh-qa__a.is-off { opacity: .75; }
.mh-qa--tiles .mh-qa__a.is-off .mh-qa__c { opacity: 1; }

/* Glass chips and strips on the gradient — the week (Bookings), the period
   (Reports), Tasks' filters. */
.mh-glass {
    background: rgba(255, 255, 255, .15);
    color: var(--md-on-brand);
    border-radius: var(--md-shape-lg);
}
.mh-chips {
    display: flex; gap: 6px;
    margin: 0 -14px 12px;
    padding: 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.mh-chips::-webkit-scrollbar { display: none; }
.mh-chip {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--md-shape-full);
    background: rgba(255, 255, 255, .16);
    color: var(--md-on-brand);
    font: inherit;
    font-size: 13px; line-height: 1.5; font-weight: var(--md-weight-semibold);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.mh-chip.is-on { background: rgba(255, 255, 255, .96); color: var(--md-paper-on-blue); }
.mh-chip__n {
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: var(--md-shape-full);
    display: inline-grid; place-items: center;
    background: rgba(255, 255, 255, .25);
    font-size: 11.5px; line-height: 1;
}
.mh-chip.is-on .mh-chip__n { background: var(--md-paper-blue); }
.mh-chip--late .mh-chip__n { background: var(--md-paper-coral); color: var(--md-paper-on-coral); }

/* The week strip (Bookings). */
.mh-week { display: flex; gap: 5px; margin: 0 0 12px; }
.mh-week__d {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 5px 0;
    border-radius: var(--md-shape-lg);
    background: rgba(255, 255, 255, .14);
    color: var(--md-on-brand);
    font-size: 11.5px; line-height: 1.5;
    text-decoration: none;
}
.mh-week__d b { font-size: 15px; font-weight: var(--md-weight-semibold); }
.mh-week__d.is-on { background: rgba(255, 255, 255, .96); color: var(--md-paper-on-blue); }
.mh-week__dot { width: 5px; height: 5px; border-radius: var(--md-shape-full); background: var(--md-paper-green); visibility: hidden; }
.mh-week__d.has-b .mh-week__dot { visibility: visible; }
.mh-week__d.is-on .mh-week__dot { background: var(--md-paper-on-green); }

/* People circles (Staff, Tasks). */
.mh-ppl {
    display: flex; gap: 8px;
    margin: 0 -14px 12px;
    padding: 0 14px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.mh-ppl::-webkit-scrollbar { display: none; }
.mh-ppl__p {
    flex: none; width: 58px;
    padding: 6px 0 0;                /* the count's room above the avatar (.md-state clips) */
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border: 0; background: none; font: inherit; cursor: pointer;
    color: var(--md-on-brand);
    font-size: 12px; line-height: 1.5;
    text-decoration: none;
}
.mh-ppl__p > span:last-child { max-width: 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-ppl__a {
    position: relative;
    width: 44px; height: 44px;
    border-radius: var(--md-shape-full);
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .95);
    color: var(--md-paper-on-blue);
    font-size: 15px; font-weight: var(--md-weight-semibold);
}
.mh-ppl__a .material-symbols-rounded { font-size: 22px; }
.mh-ppl__p.is-on .mh-ppl__a { box-shadow: 0 0 0 3px var(--md-paper-blue); }
.mh-ppl__in {
    position: absolute; right: 0; bottom: 0;
    width: 12px; height: 12px;
    border-radius: var(--md-shape-full);
    border: 2px solid rgba(255, 255, 255, .95);
    background: var(--md-paper-line);
}
.mh-ppl__in.is-in { background: var(--md-pos); }
.mh-ppl__n {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: var(--md-shape-full);
    display: grid; place-items: center;
    background: var(--md-error); color: var(--md-on-error);
    font-size: 11px; line-height: 1; font-weight: var(--md-weight-semibold);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .95);
}
.mh-ppl__n[hidden] { display: none; }

/* A glass card in the header (Website's site card, Reports' headline). */
.mh-hcard {
    display: flex; flex-direction: column; gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: var(--md-shape-xl);
    background: rgba(255, 255, 255, .14);
    color: var(--md-on-brand);
}
.mh-hcard__r1 { display: flex; align-items: center; gap: 10px; }
.mh-hcard__lg {
    width: 42px; height: 42px; flex: none;
    border-radius: var(--md-shape-full);
    background: rgba(255, 255, 255, .96);
    display: grid; place-items: center;
    overflow: hidden;
}
.mh-hcard__lg img { width: 30px; height: 30px; object-fit: contain; }
.mh-hcard__lg img.is-photo { width: 100%; height: 100%; object-fit: cover; }
.mh-hcard__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.mh-hcard__tx b { font-size: 15px; font-weight: var(--md-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-hcard__tx span { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-hcard__lnk {
    display: flex; align-items: center; gap: 8px;
    min-height: 40px;
    padding: 0 6px 0 12px;
    border-radius: var(--md-shape-md);
    background: rgba(255, 255, 255, .95);
    color: var(--md-paper-ink);
    font-size: 13px; line-height: 1.5;
}
.mh-hcard__lnk > span:not(.material-symbols-rounded) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-hcard__lnk wbr { display: none; }
.mh-hcard__lnk .material-symbols-rounded { font-size: 18px; color: var(--md-paper-on-blue); }
.mh-hcard__ib {
    width: 36px; height: 36px; flex: none;
    border: 0; border-radius: var(--md-shape-full);
    display: grid; place-items: center;
    background: none; cursor: pointer;
    color: var(--md-paper-on-blue);
}
.mh-hcard__big { font-size: 28px; line-height: 1.3; font-weight: var(--md-weight-semibold); font-variant-numeric: tabular-nums; }
.mh-hcard__small { font-size: 13px; line-height: 1.5; opacity: .92; }

/* ── 2 · The doors card ─────────────────────────────────────────────────── */
/* One card ruled into cells — the same grid as the dashboard's All Services
   (owner pick C, 2026-09-28). Each door draws the line on its right and bottom
   edge, outside itself; the card has no padding and clips, so the lines on its
   outer edges fall away and the card's outline is the frame. Any door count
   works (a flag off, a staff login with fewer doors). */
.mh-doors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--md-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-on-surface) 6%, transparent), var(--md-elev-1);
}
.mh-door {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    /* Compact (owner, 2026-10-09), the same measure as Home's tiles: about
       97px a door, down from 114. The 12px on top still holds the count,
       which hangs 5px above the icon with a 2px ring: the door is
       `.md-state`, which clips to its box. */
    padding: 12px 2px 9px;
    border-radius: 0;
    box-shadow: 1px 0 0 var(--md-outline-variant), 0 1px 0 var(--md-outline-variant);
    color: var(--md-on-surface);
    text-align: center;
    text-decoration: none;
    font-size: 13px; line-height: 1.5; font-weight: var(--md-weight-medium);
}
/* A door that opens something in place (a dialog) is a <button>: the UA's
   border, fill and font go, so it is the same object as its neighbours. */
button.mh-door, button.mh-also__a, button.mh-pick__o {
    border: 0;
    font: inherit;
    cursor: pointer;
}
/* A pick option that is a button (Scan a barcode) wore the browser's grey;
   :where keeps this below the coloured options' own backgrounds. */
:where(button).mh-pick__o { background: none; text-align: start; width: 100%; }
button.mh-door { background: none; width: 100%; font-size: 13px; line-height: 1.5; font-weight: var(--md-weight-medium); color: var(--md-on-surface); }
.mh-door__ic {
    position: relative;
    width: 52px; height: 52px;
    border-radius: 18px;
    display: grid; place-items: center;
    background: var(--md-surface-container-low);
}
.mh-door__ic img { width: 40px; height: 40px; object-fit: contain; display: block; }
.mh-door.is-off .mh-door__ic { opacity: .55; }
.mh-door__n {
    position: absolute; top: -5px; right: -8px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: var(--md-shape-full);
    background: var(--md-error);
    color: var(--md-on-error);
    font-size: 11px; line-height: 20px; font-weight: var(--md-weight-semibold);
    text-align: center;
    box-shadow: 0 0 0 2px var(--md-surface-container-lowest);
}
/* A count that is information, not a warning (13 bills), wears the brand. */
.mh-door__n--i { background: var(--md-primary); color: var(--md-on-primary); }
.mh-door__n[hidden] { display: none; }
/* The Maintenance / Soon word, hung under the icon. */
.mh-door__tag {
    position: absolute; bottom: -7px; left: 50%;
    translate: -50% 0;
    padding: 0 6px;
    border-radius: var(--md-shape-full);
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    font-size: 10.5px; line-height: 1.6; font-weight: var(--md-weight-semibold);
    white-space: nowrap;
}

/* "Other shortcuts" — doors that live in other modules (owner 2026-09-28:
   better and larger than the "Also:" chips it replaces). Its own heading and
   one ruled card, the doors' grid a size down: 44px icon tile, 13px name. */
.mh-also__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background: var(--md-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-on-surface) 6%, transparent), var(--md-elev-1);
}
.mh-also__a {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    /* Compact with the doors above it (2026-10-09). */
    padding: 11px 4px 9px;
    box-shadow: 1px 0 0 var(--md-outline-variant), 0 1px 0 var(--md-outline-variant);
    color: var(--md-on-surface);
    font-size: 13px; line-height: 1.5; font-weight: var(--md-weight-medium);
    text-align: center;
    text-decoration: none;
}
button.mh-also__a { background: none; width: 100%; }
.mh-also__ic {
    width: 40px; height: 40px;
    border-radius: 13px;
    display: grid; place-items: center;
    background: var(--md-surface-container-low);
}
.mh-also__ic img { width: 30px; height: 30px; object-fit: contain; display: block; }
.mh-also__a.is-off .mh-also__ic { opacity: .55; }

/* The pick-one dialog a door can open ("Create new bill" → which kind). The
   house centred dialog (dialog.css .auth-modal-overlay), its options as rows. */
.mh-pick { z-index: 99999; }
.mh-pick__box { max-width: 380px; }
.mh-pick__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
/* The body scrolls; its options must not shrink to fit it instead. A flex
   child with overflow: hidden (every option, for its ripple) squeezes, and a
   long title or a Marathi line was cut top and bottom on a short phone
   (Products' Add, 2026-11-03) — the trap components.css §sheet describes. */
.mh-pick__body > * { flex-shrink: 0; }
/* The close button, on the blue head. 48px to the finger; the negative margin
   keeps the head the height its 38px icon gives it. */
.mh-pick__x { margin: -5px -4px -5px 0; }
.mh-pick__o {
    display: flex; align-items: center; gap: 12px;
    min-height: 64px;
    padding: 10px 8px 10px 12px;
    border-radius: var(--md-shape-lg);
    box-shadow: inset 0 0 0 1px var(--md-outline-variant);
    color: var(--md-on-surface);
    text-decoration: none;
}
.mh-pick__o.is-off { opacity: .55; }
.mh-pick__ic {
    width: 42px; height: 42px; flex: none;
    border-radius: var(--md-shape-md);
    display: grid; place-items: center;
    background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.mh-pick__ic .material-symbols-rounded { font-size: 22px; }
/* `tint` on an option (module_home.php): the icon tile in that colour only. */
.mh-pick__ic.md-tint-coral { background: var(--md-neg-container); color: var(--md-on-neg-container); }
.mh-pick__ic.md-tint-teal  { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.mh-pick__ic.md-tint-green { background: var(--md-pos-container); color: var(--md-on-pos-container); }
.mh-pick__ic.md-tint-amber { background: var(--md-warn-container); color: var(--md-on-warn-container); }
/* `group` on an option: a small heading over the ones that follow. */
.mh-pick__gh { margin: 6px 4px -2px; font-size: 13px; font-weight: var(--md-weight-bold); color: var(--md-on-surface-variant); }
.mh-pick__gh:first-child { margin-top: 0; }
.mh-pick__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.mh-pick__tx b { font-size: 15px; font-weight: var(--md-weight-semibold); }
.mh-pick__tx span { font-size: 13px; color: var(--md-on-surface-variant); }
.mh-pick__go { color: var(--md-on-surface-variant); font-size: 22px; }

/* 'look' => 'doors' (Products' Add, 2026-11-12, design_concepts/
   products_add_v5_preview.html A): two big tiles for what owners come with
   (a list, one item), then the other ways in ONE ruled card. Also Products'
   first day, which lays the same choices on the page (.mh-pick__doors there). */
.mh-pick__body--doors { gap: 12px; }
.mh-pick__doors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mh-pick__door {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    min-width: 0; min-height: 124px; padding: 14px 14px 13px; box-sizing: border-box;
    border-radius: var(--md-shape-lg);
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    text-decoration: none; text-align: start;
}
.mh-pick__door img { width: 46px; height: 46px; object-fit: contain; margin-bottom: 6px; }
.mh-pick__door b { font-size: 16px; line-height: 1.3; font-weight: var(--md-weight-semibold); overflow-wrap: anywhere; }
.mh-pick__door span { font-size: 12.5px; line-height: 1.4; opacity: .9; overflow-wrap: anywhere; }
.mh-pick__door.is-off { opacity: .55; }
.mh-pick__list {
    border-radius: var(--md-shape-lg); overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--md-outline-variant);
    background: var(--md-surface-container-lowest);
}
.mh-pick__list > .mh-pick__o { min-height: 60px; border-radius: 0; box-shadow: none; width: 100%; }
.mh-pick__list > .mh-pick__o + .mh-pick__o { border-top: 1px solid var(--md-outline-variant); }
.mh-pick__list .mh-pick__ic { width: 40px; height: 40px; }

/* The headliner (`'hot' => true`; billing's Quick bill, owner 2026-10-09). The
   same crimson and gloss the Quick bill shortcut wears in the header strip
   (.mh-qa__a--hot), so one colour means one thing. Taller than its
   neighbours, the option's glyph large and faint behind it, its line a frosted
   pill. The gloss is ::before because `.md-state` owns ::after for the ripple;
   the sweep is its own element for the same reason. */
.mh-pick__o--hot {
    /* Quiet like the header's Quick bill (owner, 2026-11-14): a white card with
       a red edge and a red bolt, not a crimson slab with gloss and a sweep. */
    min-height: 72px;
    padding: 12px 8px 12px 14px;
    border-radius: 14px;
    background: var(--md-surface-container-lowest);
    color: var(--md-on-surface);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #E11D48 55%, transparent);
}
.mh-pick__o--hot .mh-pick__ic {
    width: 48px; height: 48px;
    border-radius: var(--md-shape-lg);
    background: color-mix(in srgb, #E11D48 12%, var(--md-surface-container-lowest));
    color: #E11D48;
}
.mh-pick__o--hot .mh-pick__ic .material-symbols-rounded { font-size: 28px; font-variation-settings: 'FILL' 1; }
.mh-pick__o--hot .mh-pick__tx { gap: 5px; }
.mh-pick__o--hot .mh-pick__tx b { font-size: 16px; line-height: 1.3; }
.mh-pick__o--hot .mh-pick__pill {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    max-width: 100%;
    min-height: 24px; padding: 1px 10px 1px 7px;
    border-radius: 12px;
    background: color-mix(in srgb, #E11D48 10%, var(--md-surface-container-lowest));
    font-size: 12.5px; line-height: 1.5; font-weight: var(--md-weight-semibold);
    color: #9F1239;
}
.mh-pick__pill .material-symbols-rounded { font-size: 15px; color: inherit; }
.mh-pick__o--hot .mh-pick__go { color: var(--md-on-surface-variant); }
.mh-pick__o--hot .mh-pick__ghost, .mh-pick__o--hot .mh-pick__sweep { display: none; }
.mh-pick__ghost {
    position: absolute; right: 30px; top: -16px; z-index: -1;
    font-size: 116px; line-height: 1;
    font-variation-settings: 'FILL' 1;
    opacity: .15;
    transform: rotate(12deg);
    pointer-events: none;
}
/* The other kinds, in a colour each (`'tone'`; billing's Table bill in amber
   and Regular bill in teal, owner 2026-10-09). Since 2026-11-14 quiet like
   Quick bill ("keep it simple and basic"): a white card, a thin edge and an
   icon tile in the kind's colour; no gloss, faint glyph or band of light. */
.mh-pick__o--tone {
    min-height: 72px;
    padding: 12px 8px 12px 14px;
    border-radius: 14px;
    background: var(--md-surface-container-lowest);
    color: var(--md-on-surface);
    --tone: #B45309;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 45%, transparent);
}
.mh-pick__o--amber { --tone: #B45309; }
.mh-pick__o--teal  { --tone: #0F766E; }
.mh-pick__o--tone .mh-pick__ic {
    width: 48px; height: 48px;
    border-radius: var(--md-shape-lg);
    background: color-mix(in srgb, var(--tone) 12%, var(--md-surface-container-lowest));
    color: var(--tone);
}
.mh-pick__o--tone .mh-pick__ic .material-symbols-rounded { font-size: 26px; font-variation-settings: 'FILL' 1; }
.mh-pick__o--tone .mh-pick__tx b { font-size: 16px; }
.mh-pick__o--tone .mh-pick__tx span { color: var(--md-on-surface-variant); }
.mh-pick__o--tone .mh-pick__go { color: var(--md-on-surface-variant); }
.mh-pick__o--tone .mh-pick__ghost, .mh-pick__o--tone .mh-pick__sweep { display: none; }

/* One band of light across the card each time the dialog opens, then still. */
.mh-pick__sweep {
    position: absolute; top: 0; bottom: 0; left: -45%; width: 38%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    pointer-events: none;
}
.mh-pick.active .mh-pick__sweep { animation: mh-pick-sweep 900ms ease-in-out 320ms 1 both; }
.mh-pick.active .mh-pick__o:nth-child(2) .mh-pick__sweep { animation-delay: 480ms; }
.mh-pick.active .mh-pick__o:nth-child(3) .mh-pick__sweep { animation-delay: 640ms; }
@keyframes mh-pick-sweep { from { left: -45%; } to { left: 120%; } }
/* Each time the dialog opens the options rise in one after another and their
   icons pop (MOTION.md: transform and opacity only, fill mode `backwards`). */
.mh-pick.active .mh-pick__o { animation: mh-pick-rise var(--md-dur-long) var(--md-ease) 60ms backwards; }
.mh-pick.active .mh-pick__o:nth-child(2) { animation-delay: 130ms; }
.mh-pick.active .mh-pick__o:nth-child(3) { animation-delay: 200ms; }
.mh-pick.active .mh-pick__o:nth-child(n+4) { animation-delay: 270ms; }
.mh-pick.active .mh-pick__ic { animation: mh-pick-pop 450ms var(--md-ease-emphasized) 220ms backwards; }
.mh-pick.active .mh-pick__o:nth-child(2) .mh-pick__ic { animation-delay: 290ms; }
.mh-pick.active .mh-pick__o:nth-child(3) .mh-pick__ic { animation-delay: 360ms; }
@keyframes mh-pick-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes mh-pick-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .mh-pick__sweep { display: none; }
    .mh-pick.active .mh-pick__o, .mh-pick.active .mh-pick__ic { animation: none; }
}

/* ── Section heads ──────────────────────────────────────────────────────── */
.mh-sec { display: flex; flex-direction: column; gap: 8px; }
.mh-sec[hidden] { display: none; }
.mh-sech {
    display: flex; align-items: center; gap: 6px;
    min-height: 32px;
    padding: 0 2px;
    margin: 0;
    font-size: 15px; line-height: 1.5; font-weight: var(--md-weight-semibold);
    color: var(--md-on-surface);
}
.mh-sech__n {
    font-size: 13px; font-weight: var(--md-weight-regular);
    color: var(--md-on-surface-variant);
}
.mh-sech__all {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 2px;
    min-height: 40px;
    padding: 0 4px 0 10px;
    border-radius: var(--md-shape-full);
    color: var(--md-primary);
    font-size: 13px; line-height: 1.5; font-weight: var(--md-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}
.mh-sech__all .material-symbols-rounded { font-size: 18px; }
/* 40px drawn, 48px to touch (Play accessibility check, 2026-11-05): 4px of
   transparent border above and below, given back as margin. */
.mh-sech__all {
    min-height: 48px; margin: -4px 0 -4px auto;
    border: solid transparent; border-width: 4px 0;
    border-radius: 20px / 24px;
}

/* ── 3 · 4 · Rows: Needs you and the latest list ────────────────────────── */
.mh-list {
    background: var(--md-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    box-shadow: var(--md-elev-1);
    overflow: hidden;
}
.mh-row {
    display: flex; align-items: center; gap: 8px;
    min-height: 64px;
    padding-right: 12px;
}
.mh-row + .mh-row { box-shadow: inset 0 1px 0 var(--md-outline-variant); }
.mh-row__main {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0 10px 12px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--md-shape-lg);
}
.mh-row__lead {
    width: 42px; height: 42px; flex: none;
    border-radius: var(--md-shape-lg);
    display: grid; place-items: center;
    background: var(--md-surface-container);
    color: var(--md-on-surface-variant);
}
.mh-row__lead img { width: 30px; height: 30px; object-fit: contain; display: block; }
.mh-row__lead .material-symbols-rounded { font-size: 22px; }
.mh-row__lead--ini {
    border-radius: var(--md-shape-full);
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-size: 14px; font-weight: var(--md-weight-semibold);
}
.mh-row__lead--day {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-size: 15px; font-weight: var(--md-weight-semibold);
}
.mh-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.mh-row__txt b {
    font-size: 15px; font-weight: var(--md-weight-semibold);
    color: var(--md-on-surface);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mh-row__txt span {
    font-size: 13px;
    color: var(--md-on-surface-variant);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mh-row__txt b.is-done { text-decoration: line-through; color: var(--md-on-surface-variant); }
.mh-row .material-symbols-rounded.mh-row__chev { font-size: 22px; color: var(--md-on-surface-variant); flex: none; }

/* The action ON the row. */
.mh-act {
    flex: none;
    height: 36px;
    padding: 0 14px 0 10px;
    border: 0;
    border-radius: var(--md-shape-full);
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font: inherit;
    font-size: 13px; line-height: 1.5; font-weight: var(--md-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.mh-act .material-symbols-rounded { font-size: 18px; }
.mh-act--wa { background: var(--md-pos-container); color: var(--md-on-pos-container); }
.mh-act--icon { width: 40px; height: 40px; padding: 0; justify-content: center; }
/* Touch size (Play accessibility check, 2026-11-05): drawn 36px (the round
   one 40px), 48px to touch — transparent border the fill does not paint
   under, given back as margin. The pill grows only up and down (the row's
   own link is beside it); the round one 4px all round (8px from the link). */
.mh-act {
    height: 48px; margin: -6px 0;
    border: solid transparent; border-width: 6px 0;
    border-radius: 18px / 24px;
    background-clip: padding-box;
}
.mh-act--icon { width: 48px; height: 48px; margin: -4px; border-width: 4px; border-radius: var(--md-shape-full); }

/* Amount + state on the tail of a latest row. */
.mh-amt {
    flex: none;
    display: flex; flex-direction: column; align-items: flex-end;
    line-height: 1.5;
    font-size: 15px; font-weight: var(--md-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mh-amt small { font-size: 12px; font-weight: var(--md-weight-semibold); color: var(--md-on-surface-variant); }
.mh-amt small.is-pos { color: var(--md-pos); }
.mh-amt small.is-neg { color: var(--md-neg); }
.mh-tag {
    flex: none;
    padding: 0 10px;
    border-radius: var(--md-shape-full);
    font-size: 12px; line-height: 1.8; font-weight: var(--md-weight-semibold);
    background: var(--md-surface-container-high);
    color: var(--md-on-surface-variant);
}
.mh-tag--pos { background: var(--md-pos-container); color: var(--md-on-pos-container); }
.mh-tag--neg { background: var(--md-neg-container); color: var(--md-on-neg-container); }
.mh-tag--warn { background: var(--md-warn-container); color: var(--md-on-warn-container); }

/* Rows before the call answers. */
.mh-row.is-skel .mh-row__lead { background: var(--md-surface-container-high); }
.mh-row.is-skel .mh-row__txt b,
.mh-row.is-skel .mh-row__txt span {
    height: 12px; width: 55%;
    border-radius: 6px;
    background: var(--md-surface-container-high);
}
.mh-row.is-skel .mh-row__txt span { width: 35%; margin-top: 8px; }

/* The empty state and the failed call — one calm card, the create verb on it. */
.mh-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 18px 16px;
    border-radius: var(--md-shape-xl);
    background: var(--md-surface-container-lowest);
    box-shadow: var(--md-elev-1);
    text-align: center;
    line-height: 1.5;
}
.mh-empty[hidden] { display: none; }
.mh-empty img { width: 52px; height: 52px; object-fit: contain; }
.mh-empty b { font-size: 15px; font-weight: var(--md-weight-semibold); color: var(--md-on-surface); }
.mh-empty > span { font-size: 13px; color: var(--md-on-surface-variant); }
.mh-empty .mh-act { margin-top: 0; }   /* 6px apart, as before: the box's 6px of touch border above takes it */

/* A calm key/value card (Expenses "Where it went", Reports). */
.mh-kv {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px;
    border-radius: var(--md-shape-xl);
    background: var(--md-surface-container-lowest);
    box-shadow: var(--md-elev-1);
    color: inherit;
    text-decoration: none;
}
.mh-kv[hidden] { display: none; }
.mh-kv__h { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.5; font-weight: var(--md-weight-semibold); }
.mh-kv__h img { width: 28px; height: 28px; object-fit: contain; }
.mh-kv__l { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--md-on-surface-variant); }
.mh-kv__l > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-kv__l b { color: var(--md-on-surface); font-weight: var(--md-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mh-kv__l.is-tot { padding-top: 6px; box-shadow: inset 0 1px 0 var(--md-outline-variant); color: var(--md-on-surface); font-weight: var(--md-weight-semibold); }
.mh-kv__l b.is-neg { color: var(--md-neg); }
.mh-kv__l b.is-pos { color: var(--md-pos); }
.mh-bar { height: 8px; border-radius: var(--md-shape-full); background: var(--md-surface-container-high); overflow: hidden; }
.mh-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--md-pos); transition: width var(--md-dur-long, 400ms) var(--md-ease, ease); }

/* ── 5 · The banners ────────────────────────────────────────────────────── */
/* Myra's offer: a calm row (module_home.php mh_render_banner, 2026-10-21),
   the Blogs page's own .md-list / .md-row — a thin rule, not a shadow slab. */
.mh-myra { box-shadow: 0 0 0 1px var(--md-outline-variant); }
.mh-myra .md-row.is-off { opacity: .6; }
.mh-ban {
    display: flex; align-items: center; gap: 12px;
    min-height: 72px;
    padding: 12px 14px;
    border-radius: var(--md-shape-xl);
    background: var(--grad-crimson);
    color: var(--md-on-brand);
    text-decoration: none;
    box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--myra) 90%, transparent);
}
.mh-ban--blue {
    background: var(--grad-hero);
    box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--md-primary) 90%, transparent);
}
.mh-ban.is-off { opacity: .6; }
.mh-ban__ava {
    width: 46px; height: 46px; flex: none;
    border-radius: var(--md-shape-full);
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}
.mh-ban__ava img { width: 30px; height: 30px; object-fit: contain; }
.mh-ban__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.mh-ban__tx b { font-size: 15px; font-weight: var(--md-weight-semibold); }
.mh-ban__tx span { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-ban__go {
    width: 32px; height: 32px; flex: none;
    border-radius: var(--md-shape-full);
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .2);
}
.mh-ban__go .material-symbols-rounded { font-size: 20px; }

/* The extended FAB (Tasks) — the brand gradient, not red: red means error. */
.mh-efab {
    position: fixed;
    right: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: inline-flex; align-items: center; gap: 8px;
    height: 54px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: var(--md-shape-full);
    background: var(--grad-hero);
    color: var(--md-on-brand);
    font: inherit;
    font-size: 15px; line-height: 1.5; font-weight: var(--md-weight-semibold);
    text-decoration: none;
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--md-primary) 80%, transparent);
    cursor: pointer;
}
.mh-efab .material-symbols-rounded { font-size: 22px; }
.mh-efab.is-off { opacity: .6; }

/* A switch on the gradient (Website's live toggle). The input stays a real
   checkbox, visually hidden; the track is its sibling. */
.mh-sw { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.mh-sw__t {
    position: relative;
    width: 46px; height: 28px;
    border-radius: var(--md-shape-full);
    background: rgba(255, 255, 255, .3);
    transition: background var(--md-dur-short, 150ms) var(--md-ease, ease);
}
.mh-sw__t::after {
    content: '';
    position: absolute; left: 4px; top: 4px;
    width: 20px; height: 20px;
    border-radius: var(--md-shape-full);
    background: rgba(255, 255, 255, .96);
    transition: translate var(--md-dur-short, 150ms) var(--md-ease, ease);
}
.mh-sw input:checked + .mh-sw__t { background: var(--md-paper-green); }
.mh-sw input:checked + .mh-sw__t::after { translate: 18px 0; background: var(--md-paper-on-green); }
.mh-sw input:focus-visible + .mh-sw__t { outline: 2px solid rgba(255, 255, 255, .96); outline-offset: 2px; }
.mh-sw input:disabled + .mh-sw__t { opacity: .6; }
.mh-hcard__tx .mh-live { margin: 0; min-height: 0; font-size: 13px; display: inline; }

/* A module's own section stack placed inside the sheet (Studio's shelves):
   the sheet already carries the side padding. */
.mh-page .md-canvas__sheet > .st { padding: 0; }