/* MoveHappy Office — the registered style. Tokens only. Components take every color, face, size and distance from here and never restate a value. One light theme by design: the office desk is always light. Declaration order inside a rule, everywhere in this style: position, box, spacing, type, color and border, effects. 2026-10-24 refresh: a quieter desk — neutral grey ink on a soft canvas, white cards with hairline borders and soft neutral shadows, light-grey inset panels for the groups inside a card, small soft status tags, an 8px rhythm with a little more air, a neutral charcoal sidebar. Names are unchanged where they existed, so parts and pages pick the new values up. 2026-10-24, fourth pass (material studies): button faces are stone (a fine grain over a top-lit gradient) standing on a ledge in their edge colour, the top nav is an El Capitan title bar and cards rest on Material's 2dp shadow at half strength. 2026-10-25, warm desk: the neutrals took the documents' warmth so every surface belongs with the ivory sheet: the canvas is a soft clay grey, cards and panels a whisper-warm white (still whiter than the sheet), lines and inks warm greys (muted ink is the documents' caption ink) and shadows a warm umber, not black. The brand and status colours are unchanged; the blue is now the cool complement to a warm ground. 2026-10-25, no wells: a group inside a card or the panel is a band of the sheet between hairlines, its padding inside it, as cells are, not a light-grey pressed-in box; the quote's side cards are white notes (--mh-shadow-note). 2026-10-26, a nudge after ElevenLabs (the owner liked its palette, borders, tabs and dark app, not its flat buttons): a creamier canvas, cards on a hairline ring with a close soft shadow instead of Material's longer one, tab wells as an open pill outlined in a hairline with the chosen tab a lifted white pill, round outlined steps (back and next), warm grey for what a menu has under the pointer, and a warmer, grained dark for the sidebar with its active item a soft lifted pill. The stone buttons keep their ledge and lift; light ones are whiter. Documents keep sharp corners. */ /* Lato, shown with the fallback until it arrives instead of blank text. */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/4d3e9082410f2959.ttf) format("truetype"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/04393e6516bf5491.ttf) format("truetype"); } /* Barlow and Barlow Condensed (the Barlow Project Authors, OFL-1.1, no reserved name): the office's faces on screen since 2026-10-28, the owner's pick for a friendlier, more organic build with tall, narrow titles. Latin files only. Barlow's x-height is Lato's (50.6 against 50.7 per 100px) and its lines run 7% shorter, so it is set at its own size and nothing grows longer; its figures are tabular with a plain zero. The titles' face is Barlow Condensed Medium answering for the weights 400-500 (the serif's titles ask for 400) and SemiBold for 600 and up. Print keeps Lato and Newsreader. */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/481c2cd28e2f4a8b.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/d66f7aa016d26b1c.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/e6390b90bf8d2aa9.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/beef6bf875b6c872.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/145e80f79f9bc911.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600 900; font-display: swap; src: url(/assets/fonts/3c28853997d44527.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Newsreader (Production Type, OFL-1.1): the documents' title face, one Latin file at the display optical size. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/075d4791160cdaee.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Brand and signal */ --mh-blue: #2c78c5; /* primary: actions, links in chrome, selected rows, focus (white text 4.6:1) */ --mh-blue-deep: #2366ad; /* hover and pressed primary */ --mh-blue-soft: #e9f2fc; /* tinted primary: active navigation, selected cells */ --mh-blue-line: rgba(44, 120, 197, 0.3); --mh-sky: #36a9e1; /* the light information blue: accents, chart fills (not under white text) */ --mh-info: #1b7db5; /* the information action (the old btn-info, this app's usual Save): white text 4.5:1 */ --mh-info-deep: #156796; --mh-sky-deep: #1f92cb; --mh-sky-soft: #e6f5fc; /* information buttons and chips */ --mh-sky-tint: #d3edf9; /* information buttons hovered */ --mh-sky-ink: #0f6a96; /* text on the soft information blue (5.4:1) */ --mh-sky-line: rgba(54, 169, 225, 0.32); --mh-signal: #d6383d; /* counters that need attention, danger (white text 4.7:1) */ --mh-signal-deep: #b52f34; --mh-signal-soft: #fdeced; --mh-signal-line: rgba(214, 56, 61, 0.3); /* the cut edge of signal paper */ --mh-signal-ring: rgba(214, 56, 61, 0.55); /* a recording light's breath as it leaves (Ask MoveHappy's listening dot) */ --mh-success: #1a865a; /* white text 4.6:1 */ --mh-success-deep: #15704b; --mh-success-soft: #e5f5ee; --mh-success-line: rgba(26, 134, 90, 0.3); /* the cut edge of success paper */ --mh-warning: #e9a23b; /* takes ink, not white, for text (6.8:1) */ --mh-warning-deep: #cc8a28; /* Ledges: a coloured stone's thickness, one step under its edge (its -deep colour at 88% lightness), as a light button's --mh-ink-faint ledge sits just under its --mh-line-strong edge: a darker band would read as a bigger, heavier button than the light ones beside it. */ --mh-blue-ledge: #1f5a98; --mh-info-ledge: #125b84; --mh-signal-ledge: #9f292e; --mh-success-ledge: #126342; --mh-warning-ledge: #b47923; --mh-warning-soft: #fdf3e3; --mh-warning-line: rgba(204, 138, 40, 0.38); --mh-warning-ink: #95651d; /* amber text on the soft amber (4.6:1) */ --mh-accent: #c2399b; /* the logo's magenta: items that join a placeholder to a quote */ --mh-accent-deep: #962a77; --mh-accent-soft: #fbeaf5; --mh-accent-line: rgba(194, 57, 155, 0.3); --mh-link: #1f8f5f; /* in-content links (the retained theme's green) */ --mh-main-brand: #65bcf1; /* main sidebar mark */ --mh-admin-brand: #e26d73; /* admin sidebar mark */ --mh-sidebar-mark: var(--mh-main-brand); /* the sidebar's mark; the sidebar sets its own (main or admin) */ /* The mark is a small glazed tile, as an app's icon is: light across its top, a shade at its foot, a lit lip and a dark hairline round it, set on the dark with a contact shade and a soft drop (the 2026-10-28 featured pass). */ --mh-sidebar-mark-face: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(0, 0, 0, 0.1) 100%); --mh-sidebar-mark-edge: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.32), 0 5px 12px -4px rgba(0, 0, 0, 0.5); --mh-on-accent: #ffffff; /* text on a colored fill */ /* Charts: eight series colours in a fixed order, the first the brand blue, then clay and garden hues that sit on the warm paper; checked together for colour-blind separation. A chart takes them in order and never repeats one: a ninth series and on fold into Other. Text beside a mark keeps the ink colours; the ochre is under 3:1 on paper, so it is always named on a legend line. */ --mh-chart-1: #2c78c5; /* blue */ --mh-chart-2: #d0643c; /* terracotta */ --mh-chart-3: #1f9a78; /* teal */ --mh-chart-4: #d99a1f; /* ochre */ --mh-chart-5: #d4708f; /* rose */ --mh-chart-6: #4f8a3c; /* moss */ --mh-chart-7: #6a5bc4; /* violet */ --mh-chart-8: #b0733a; /* amber brown */ --mh-chart-other: #a39d94; /* everything past the eighth, folded */ /* Surfaces */ --mh-paper: #fffefc; /* cards, the content panel and the top nav */ --mh-glass: rgba(255, 254, 252, 0.92); /* the top nav over scrolled content */ --mh-on-accent-line: rgba(255, 255, 255, 0.28); /* a divider inside a coloured button */ --mh-canvas: #f4f2ee; /* page ground and the footer: a cream (ElevenLabs' #f5f3f1, a touch warmer) */ --mh-subtle: #faf8f5; /* table heads, hovered rows, wells */ --mh-tint: #f4f1ec; /* the Admin column of the site menu */ --mh-charcoal: #27231f; /* sidebar ground: a warm umber charcoal, as a dark app's ground is */ --mh-charcoal-deep: #1f1c19; --mh-charcoal-ground: #171512; --mh-sidebar-ink: rgba(255, 249, 241, 0.64); --mh-sidebar-ink-strong: #fffaf3; --mh-sidebar-hover: rgba(255, 249, 241, 0.05); --mh-sidebar-active: rgba(255, 249, 241, 0.1); --mh-sidebar-active-edge: inset 0 1px 0 rgba(255, 249, 241, 0.06), inset 0 0 0 1px rgba(255, 249, 241, 0.05), 0 1px 2px rgba(0, 0, 0, 0.28); /* the active item: a soft pill lifted off the dark, lit along its top */ --mh-sidebar-radius: 8px; /* Lines */ --mh-line: #e6e2dc; /* card and panel edges, the top nav's bottom edge */ --mh-line-soft: #f0ede8; /* dividers inside cards and menus, table rows */ --mh-line-strong: #d5d0c7; /* emphasised edges */ --mh-line-input: #d5d0c7; /* fields */ --mh-line-footer: rgba(90, 72, 48, 0.14); --mh-avatar-ring: rgba(44, 120, 197, 0.28); /* Ink */ --mh-ink: #1c1a17; /* headings and strong text */ --mh-ink-body: #3b3833; /* body text */ --mh-ink-muted: #6f6a63; /* secondary text, the top nav */ --mh-ink-soft: #a39d94; /* icons, placeholders */ --mh-ink-faint: #cac4ba; /* Title marks: the icon tile beside a page, card or form title, a small piece of warm stone pressed into the sheet with the icon in muted ink (it was blue on a blue tint; blue now only means "act here"). */ --mh-mark-ground: var(--mh-tint); --mh-mark-ink: var(--mh-ink-muted); /* Type: Lato here is what prints; on screen the office's face is Barlow (the screen block after this one). */ --mh-font: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; --mh-font-print: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; /* the printed face, kept on screen by what is printed as it shows (the quote's proposal) */ --mh-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* code and addresses (an API's paths) */ --mh-text: 14px; /* body */ --mh-text-nav: 13px; --mh-text-small: 12px; --mh-text-xs: 11px; --mh-text-lg: 16px; --mh-text-xl: 19px; /* card titles */ --mh-text-2xl: 24px; /* page titles */ --mh-text-3xl: 30px; /* figures */ --mh-leading: 1.5; --mh-leading-tight: 1.25; --mh-tracking-tight: -0.01em; --mh-tracking-caps: 0.06em; /* small capitals in table heads and labels */ /* Space, a 4px scale */ --mh-space-1: 4px; --mh-space-2: 8px; --mh-space-3: 12px; --mh-space-4: 16px; --mh-space-5: 20px; --mh-space-6: 24px; --mh-space-8: 32px; --mh-space-10: 40px; --mh-space-12: 48px; /* Radius */ --mh-radius-xs: 2px; /* status tags */ --mh-radius-sm: 3px; /* chips, badges, small buttons, event tiles */ --mh-radius: 4px; /* buttons, fields, insets */ --mh-radius-lg: 5px; /* menus, side widgets, inner panels */ --mh-radius-xl: 6px; /* cards and the content panel: paper, barely rounded */ --mh-radius-pill: 999px; --mh-radius-round: 50%; /* avatars */ /* Shadow: paper on a desk. Cards rest on the canvas with a resting shadow drawn after Material's 2dp (a short umbra, a penumbra and a faint ambient) at half its strength and rise to 4dp when hovered; buttons stand on a ledge (see the material tokens); insets are pressed in. */ --mh-shadow-xs: 0 1px 0 rgba(40, 30, 18, 0.035), 0 1px 2px rgba(40, 30, 18, 0.07); --mh-shadow-sm: 0 0 0 1px rgba(40, 30, 18, 0.025), 0 1px 3px rgba(40, 30, 18, 0.075), 0 1px 2px -1px rgba(40, 30, 18, 0.075); /* cards and the content panel: resting on a hairline with a close soft shade */ --mh-shadow-md: 0 1px 2px rgba(40, 30, 18, 0.05), 0 4px 8px -2px rgba(40, 30, 18, 0.07), 0 16px 26px -14px rgba(40, 30, 18, 0.2); --mh-shadow-nav: 0 1px 0 rgba(40, 30, 18, 0.05), 0 4px 12px -8px rgba(40, 30, 18, 0.12); --mh-shadow-menu: 0 0 0 1px rgba(40, 30, 18, 0.02), 0 4px 8px rgba(40, 30, 18, 0.06), 0 18px 36px -8px rgba(40, 30, 18, 0.2); --mh-shadow-lift: 0 5px 9px rgba(40, 30, 18, 0.12); /* buttons: one soft drop under the slab (Material Studies' Kaolin), its ledge drawn with it */ --mh-shadow-lift-hover: 0 5px 9px rgba(40, 30, 18, 0.12), 0 5px 9px rgba(40, 30, 18, 0.08); /* a hovered button, two pixels up: a second soft drop joins the first */ --mh-shadow-raise: 0 2px 4px -1px rgba(40, 30, 18, 0.09), 0 4px 5px rgba(40, 30, 18, 0.065), 0 1px 10px rgba(40, 30, 18, 0.055); /* a hovered card: the same sheet two steps higher (Material 4dp at half strength) */ --mh-shadow-paper: 0 1px 0 rgba(40, 30, 18, 0.03), 0 1px 2px -1px rgba(40, 30, 18, 0.14), 0 2px 4px -3px rgba(40, 30, 18, 0.12); /* coloured paper: calendar events, chips */ --mh-shadow-paper-raise: 0 1px 0 rgba(40, 30, 18, 0.03), 0 2px 3px -1px rgba(40, 30, 18, 0.12), 0 5px 9px -6px rgba(40, 30, 18, 0.18); --mh-shadow-press: inset 0 2px 4px rgba(40, 30, 18, 0.18), 0 1px 0 rgba(255, 255, 255, 0.5); /* a pressed button, set down into the sheet: shade inside, the sheet's lit edge below */ --mh-shadow-tray: inset 0 1px 0 #fffefc, inset 0 10px 12px -12px rgba(40, 30, 18, 0.16); /* a tray set under a card's head: its lit lip, then the head's soft shade falling in */ --mh-shadow-field: inset 0 1px 2px rgba(40, 30, 18, 0.07); /* fields: pressed slightly into the sheet */ --mh-shadow-pit: inset 0 1px 2px rgba(40, 30, 18, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.4); /* fields' kin: tracks and switches (a group inside a card is a band now, not a well) */ /* A note: a white sheet laid on the desk beside the work (the quote's side cards and posting cards), like a Post-it but white and physical: a crisp cut edge, a contact shade, and a soft lift that deepens toward the foot as a sheet that curls a little; its face is lit at the top. */ --mh-shadow-note: 0 0 0 1px rgba(40, 30, 18, 0.05), 0 1px 1px rgba(40, 30, 18, 0.05), 0 2px 3px -1px rgba(40, 30, 18, 0.07), 0 14px 18px -14px rgba(40, 30, 18, 0.34); --mh-note-face: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 40%, rgba(120, 100, 70, 0.03) 100%); --mh-focus: 0 0 0 3px rgba(44, 120, 197, 0.26); /* Finish (2026-10-28, the featured pass): what is behind a dialog dims to a warm umber, a little softened, never to cold black; a selection is the night card's ember, washed; scrollbars are thin and warm where a pane scrolls. */ --mh-scrim: rgba(28, 22, 16, 0.38); --mh-scrim-ink: #1c1610; /* the old modals' backdrop colour; their opacity sets how much */ --mh-scrim-blur: blur(2px) saturate(0.9); --mh-selection: rgba(232, 131, 74, 0.24); --mh-scrollbar: rgba(90, 72, 48, 0.28); --mh-row-hover: rgba(120, 100, 70, 0.04); /* a row that opens something, under the pointer */ /* Fields with a mark (2026-10-28, the owner: an inner icon that says what a field is for, material and textured; then flush with the field as a part of it, a soft shadow on its inner edge): the field's left end is a well of warm stone the field's full height, its kind drawn in it in muted ink, a hairline between it and the words with a soft shade falling from that line onto the field; the well takes the information blue's tint while the field is in use. The face is the paper a shade warmer at its foot, pressed in a little, on a softer edge with rounder corners. */ --mh-field-well: linear-gradient(180deg, #faf8f3 0%, #efeae2 100%); --mh-field-well-on: linear-gradient(180deg, #f3f7fc 0%, #dfe9f6 100%); --mh-field-well-line: #e3ddd3; --mh-field-well-line-on: #c4d6ec; --mh-field-well-shade: linear-gradient(90deg, rgba(40, 30, 18, 0.075), rgba(40, 30, 18, 0)); --mh-field-face: linear-gradient(180deg, #fffefc 0%, #fdfbf8 100%); --mh-field-edge: #dcd6cc; --mh-field-edge-hover: #cdc6ba; --mh-radius-field: 7px; --mh-shadow-field-soft: inset 0 1px 2px rgba(40, 30, 18, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9); --mh-glyph-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='3' width='11.6' height='11' rx='2.2'/%3E%3Cpath d='M2.5 6.6h11M5.4 1.6v2.6M10.6 1.6v2.6'/%3E%3C/g%3E%3Ccircle cx='5.6' cy='9.6' r='.85' fill='%238a847b'/%3E%3Ccircle cx='8' cy='9.6' r='.85' fill='%238a847b'/%3E%3Ccircle cx='10.4' cy='9.6' r='.85' fill='%238a847b'/%3E%3C/svg%3E"); --mh-glyph-money: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 4.7c-.5-.9-1.5-1.4-2.7-1.4-1.6 0-2.8.8-2.8 2 0 2.9 5.8 1.6 5.8 4.6 0 1.3-1.3 2.2-3 2.2-1.3 0-2.4-.6-2.9-1.6M8 1.6v12.8'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-percent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12.4l8.8-8.8'/%3E%3Ccircle cx='4.8' cy='4.8' r='1.7'/%3E%3Ccircle cx='11.2' cy='11.2' r='1.7'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-hash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 2.4L5 13.6M11 2.4L9.7 13.6M2.7 6h11M2.2 10h11'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-weight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 6.2a2.4 2.4 0 1 1 4.8 0'/%3E%3Cpath d='M4.4 6.2h7.2l1.4 7.4H3z'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.9l5.4 3v6.2L8 14.1l-5.4-3V4.9z'/%3E%3Cpath d='M2.7 4.9L8 7.9l5.3-3M8 7.9v6.1'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.6V8l2.4 1.5'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.1 2.3l1.6 3.1-1.2 1.1c.8 1.7 2.1 3 3.8 3.8l1.1-1.2 3.1 1.6-.6 2.2c-.2.6-.8.9-1.4.9C6.4 13.3 2.7 9.6 2.2 4.5c0-.6.3-1.2.9-1.4z'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.4' width='12' height='9.2' rx='2.2'/%3E%3Cpath d='M2.6 4.6L8 8.8l5.4-4.2'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='2'/%3E%3Cpath d='M5.4 7V5.1a2.6 2.6 0 0 1 5.2 0V7'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.7 9.3l2.6-2.6M7.4 4.4l1-1a2.6 2.6 0 0 1 3.7 3.7l-1 1M8.6 11.6l-1 1a2.6 2.6 0 0 1-3.7-3.7l1-1'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14.4s4.6-4.2 4.6-7.6a4.6 4.6 0 0 0-9.2 0c0 3.4 4.6 7.6 4.6 7.6z'/%3E%3Ccircle cx='8' cy='6.8' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M2.2 8h11.6M8 2c-1.9 1.8-2.8 3.8-2.8 6S6.1 12.2 8 14c1.9-1.8 2.8-3.8 2.8-6S9.9 3.8 8 2z'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.8' width='12' height='10.4' rx='2.2'/%3E%3Ccircle cx='5.8' cy='6.4' r='1.2'/%3E%3Cpath d='M2.6 11.6l3.4-3 2.5 2 2-1.6 2.9 2.4'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5.4' r='2.7'/%3E%3Cpath d='M2.9 13.6c.7-2.6 2.7-4 5.1-4s4.4 1.4 5.1 4'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='2' width='9.2' height='12' rx='1.4'/%3E%3Cpath d='M6 5h1M9 5h1M6 7.8h1M9 7.8h1M7 14v-2.6h2V14'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.4h10M3 8h10M3 11.6h6.4'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 2.8l2.6 2.6-7.4 7.4-3.3.7.7-3.3z'/%3E%3Cpath d='M9.2 4.2l2.6 2.6'/%3E%3C/g%3E%3C/svg%3E"); --mh-glyph-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238a847b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4.5h7M6 8h7M6 11.5h7'/%3E%3C/g%3E%3Ccircle cx='3.2' cy='4.5' r='.95' fill='%238a847b'/%3E%3Ccircle cx='3.2' cy='8' r='.95' fill='%238a847b'/%3E%3Ccircle cx='3.2' cy='11.5' r='.95' fill='%238a847b'/%3E%3C/svg%3E"); /* Rings and tracks: a white piece raised off the sheet (a chosen tab, a round step, a white chip) is drawn by a hairline ring and two faint drops, not a border; a tab well is an open pill outlined by a hairline, not pressed in, and what is chosen in it is that white pill, lifted. Hovering an unchosen tab tints it warm grey. */ --mh-ring: rgba(40, 30, 18, 0.11); --mh-shadow-ring: 0 0 0 1px var(--mh-ring), 0 1px 1px rgba(40, 30, 18, 0.05), 0 2px 4px rgba(40, 30, 18, 0.055); --mh-shadow-ring-hover: 0 0 0 1px var(--mh-ring), 0 2px 2px rgba(40, 30, 18, 0.05), 0 4px 9px -1px rgba(40, 30, 18, 0.1); --mh-track-ground: transparent; --mh-track-edge: inset 0 0 0 1px var(--mh-line); --mh-track-radius: var(--mh-radius-pill); --mh-track-pad: 1px; /* the chosen tab sits flush in its well, a pixel inside the edge */ --mh-tab-face: #ffffff; --mh-tab-hover: var(--mh-tint); --mh-tab-shadow: var(--mh-shadow-ring); --mh-hover-ground: var(--mh-tint); /* what a menu or list has under the pointer: warm grey, not blue */ /* Night: a dark card, the Sales Goal (after ElevenMusic's dark app, the owner's pick): a grained warm stone ground with a darker panel stepped into it, white ink, and ember (a warm orange) for what has been booked. */ --mh-night: #36312d; /* the card's ground, grained */ --mh-night-deep: #24211e; /* the panel stepped into it */ --mh-night-line: rgba(255, 249, 241, 0.09); --mh-night-ink: #fffaf3; /* titles and figures (15:1 on the panel) */ --mh-night-ink-soft: rgba(255, 249, 241, 0.64); /* labels and notes (7:1) */ --mh-night-ink-faint: rgba(255, 249, 241, 0.42); --mh-night-mark: rgba(255, 249, 241, 0.09); /* quiet bars: an even pace behind the booked ones */ --mh-ember: #e8834a; /* booked */ --mh-ember-lit: #f7ab72; /* booked today, and past the goal */ --mh-ember-deep: #c8622f; /* Dusk: the night's cool companion, the Closing Rate beside the Sales Goal: a grained blue slate with a deeper panel stepped into it and the same white ink. The chart colours sit on its panel as they are, but the ochre, a step deeper (checked on the panel: lightness, colour-blind separation and 3:1 contrast). */ --mh-dusk: #1f2732; /* the card's ground, grained */ --mh-dusk-deep: #151b24; /* the panel stepped into it */ --mh-dusk-line: rgba(236, 242, 250, 0.1); --mh-dusk-ink: #f3f6fa; /* titles and figures (16:1 on the panel) */ --mh-dusk-ink-soft: rgba(236, 242, 250, 0.66); /* labels and notes (7:1) */ --mh-dusk-ink-faint: rgba(236, 242, 250, 0.46); /* small notes (4:1) */ --mh-dusk-chart-4: #c2881a; /* the ochre on the dusk panel */ --mh-dusk-month: #5b8fd6; /* a report's plate: each month's rate, the context (validated with the trend on the panel) */ --mh-dusk-trend: #d8763e; /* a report's plate: the trailing average over it, the ember stepped into the dusk's band */ /* Dawn: the light third of the dashboard's three (Sales Goal's warm night, Closing Rate's cool dusk), Sales Stats: a pale apricot ground lit from its top corner, a deeper panel stepped into it, warm dark ink. Its lines take one colour from each card (the goal's ember deepened, the dusk's blue, and a teal), checked on the panel: lightness, colour-blind separation, the normal-vision floor and 3:1 contrast. */ --mh-dawn: #fcf1e6; /* the card's ground */ --mh-dawn-glow: rgba(247, 171, 114, 0.26); /* the light in its top corner */ --mh-dawn-edge: #ecdac8; --mh-dawn-deep: #f6e4d4; /* the panel stepped into it */ --mh-dawn-line: rgba(122, 76, 44, 0.14); --mh-dawn-ink: #22190f; /* figures (14:1 on the panel) */ --mh-dawn-ink-body: #4a3d33; /* comparisons (9.4:1) */ --mh-dawn-ink-soft: #76604f; /* labels and notes (4.8:1 on the panel) */ --mh-dawn-this: #c8622f; /* this month: the goal's ember, deepened (3.2:1) */ --mh-dawn-this-ink: #a54d22; /* Today under the lines (4.6:1) */ --mh-dawn-last: #3a6fb0; /* last month: the dusk's blue */ --mh-dawn-year: #1b8c6e; /* this month a year ago: teal, dashed */ /* Day: the cool light of the dashboard's four (Discount Cal), opposite the dawn: a pale blue-grey ground lit from its top corner, a deeper panel stepped into it and cool dark ink, so across the row light and dark, cool and warm take turns (day, night, dusk, dawn). Its rings keep the old calendar's colours, read apart by how far each ring runs. */ --mh-day: #eef2f6; /* the card's ground */ --mh-day-glow: rgba(255, 255, 255, 0.75); /* the light in its top corner */ --mh-day-edge: #dce3eb; --mh-day-deep: #e5ebf1; /* the panel stepped into it */ --mh-day-line: rgba(40, 60, 90, 0.14); --mh-day-face: rgba(255, 255, 255, 0.55); /* a step's face; a day under the pointer */ --mh-day-track: rgba(40, 60, 90, 0.1); /* a day's empty ring */ --mh-day-ink: #18202b; /* the month (13.7:1 on the panel) */ --mh-day-ink-body: #2e3a48; /* the days' numbers (9.6:1) */ --mh-day-ink-soft: #566273; /* labels and the weekdays (5.2:1) */ --mh-day-open: #1a865a; /* a day under a third full */ --mh-day-filling: #c98a12; /* under two thirds */ --mh-day-busy: #d6383d; /* busy, and booked full */ --mh-day-busy-wash: rgba(214, 56, 61, 0.14); /* Each tone writes its days' numbers in its own deep ink (the slots' way), 4.5:1 or better on the panel under the day's heaviest shade (open 19%, filling 30%, busy and full 42% of the tone). */ --mh-day-open-ink: #115a3c; /* 5.5:1 */ --mh-day-filling-ink: #6b4712; /* 5.3:1 */ --mh-day-busy-ink: #7a1d21; /* 4.8:1; a busy or full day's number */ /* The same day language on paper (the jump calendars of Crew Cal, Job Cal, Staff Cal and the quote, 2026-10-28): a day is a shade of its tone with a ring of it and its number in the tone's deep ink; a full day is the busy shade at its heaviest under a firm ring; the chosen day alone is a raised dark stone. */ --mh-day-open-wash: rgba(26, 134, 90, 0.13); --mh-day-open-ring: rgba(26, 134, 90, 0.5); --mh-day-filling-wash: rgba(201, 138, 18, 0.16); --mh-day-filling-ring: rgba(201, 138, 18, 0.58); --mh-day-busy-ring: rgba(214, 56, 61, 0.5); --mh-day-full-wash: rgba(214, 56, 61, 0.3); /* Documents: a page read as paper, not as UI (the quote's proposal, a member's file): fine warm paper (an ivory face with a faint grain and a vellum sheen, a fine edge, a soft warm shadow on the desk), warm print ink, a refined serif for titles over Lato for the facts, hairline rules, half-inch margins; nothing inside the sheet is a box. */ --mh-doc-paper: #fcfaf5; /* the sheet: warm ivory */ --mh-doc-face: linear-gradient(130deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 55%, rgba(120, 100, 70, 0.025) 100%); /* a vellum sheen across the face */ --mh-doc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); /* the paper's tooth: warm flecks, felt not pattern */ --mh-doc-edge: #e7e2d8; /* the sheet's cut edge */ --mh-doc-ink: #34312d; /* warm print ink: titles and values (12.7:1) */ --mh-doc-ink-soft: #6f6a63; /* captions, labels and caps heads (5:1) */ --mh-doc-rule: #ebe6dd; /* hairlines between lines and rows */ --mh-doc-rule-strong: #d5cec2; /* section rules and the letterhead's fine double rule */ --mh-doc-stamp: #a8433a; /* a stamp's red ink (5.6:1) */ --mh-doc-font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; /* titles: Newsreader, bundled, so every machine shows the same face (in print; the office's screen titles are Barlow Condensed) */ --mh-doc-font-display-print: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; /* the printed titles' face, kept on screen by what is printed as it shows (the quote's proposal) */ --mh-cell-x: 20px; /* a cell's inset from its own hairlines: the padding lives in the cells, not round the set */ --mh-cell-y: 12px; --mh-doc-margin: 40px; /* the page's head and foot margin */ --mh-doc-gutter: 28px; /* the inset of every line of text from the sheet's edge: rules and ruled cells run to the edge */ --mh-doc-cell-y: 14px; /* a cell's padding above and below its label and value */ --mh-doc-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 1px rgba(70, 55, 30, 0.04), 0 2px 5px rgba(70, 55, 30, 0.05), 0 16px 32px -18px rgba(70, 55, 30, 0.2); /* a sheet on the desk: a lit inner edge, a contact shade and a soft warm lift */ /* Material: bevels, sheens and textures (the old hatched and linen images, redrawn quietly) */ --mh-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* top light on raised light surfaces */ --mh-bevel-fill: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.16); /* filled wafers: a lit top edge and a sharp darker ledge at the bottom */ --mh-bevel-fill-lg: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.17); /* large primary buttons: a deeper ledge */ --mh-bevel-edge: inset 0 -1px 0 rgba(0, 0, 0, 0.07); /* light wafers: a fine darker bottom edge */ --mh-bevel-lit: inset 0 1px 0 rgba(255, 255, 255, 0.1); /* a coloured stone's lit top edge: barely there, as a light one's white lip is on its white face (a brighter line reads as glass); its ledge is drawn under the face (--mh-ledge) */ --mh-ledge: 2px; /* a wafer's thickness: a band in --mh-wafer-edge under a filled button's face */ --mh-ledge-lg: 3px; /* large filled buttons */ --mh-ledge-light: 2px; /* light wafers: the same slab as the filled ones */ --mh-wafer-edge: var(--mh-ink-faint); /* the ledge's colour; each filled button sets its own -deep colour */ --mh-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 70%); --mh-sheen-stone: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 60%); /* a coloured stone's face: matte, the light buttons' faint top light in colour */ --mh-sheen-light: linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%); /* light wafers, segments: white, as a light button is */ --mh-toolbar: linear-gradient(180deg, rgba(252, 251, 248, 0.97) 0%, rgba(237, 234, 228, 0.96) 100%); /* the top nav and drawer toolbars: an El Capitan title bar, lit at the top, a shade darker at its foot */ --mh-sidebar-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(0, 0, 0, 0.12) 100%); --mh-sidebar-edge: inset -1px 0 0 rgba(255, 255, 255, 0.04), 1px 0 0 rgba(0, 0, 0, 0.18); /* the sidebar's right edge */ --mh-texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* the canvas: a paper grain */ --mh-texture-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --mh-texture-grain-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* the sidebar's dark: a grain you can see, as on a dark app's ground */ /* the sidebar: the same grain in light */ --mh-texture-graph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M13.5 0V14M0 13.5H14' fill='none' stroke='%232e2822' stroke-opacity='.075'/%3E%3C/svg%3E"); /* graph paper: the Reports covers' ground */ /* Covers (2026-11-01): the Reports covers' drawings as tokens, for parts drawn in their manner (a slot's days, the storage editor): a handful of warm stones, white cards with a soft fall, and one ink. */ --mh-cover-ground: var(--mh-texture-grain), var(--mh-texture-graph), radial-gradient(120% 110% at 88% 0%, var(--mh-paper) 0%, transparent 62%), var(--mh-tint); /* graph paper on warm stone, lit from the top right */ --mh-cover-ring: inset 0 0 0 1px var(--mh-ring), var(--mh-shadow-tray); --mh-cover-ink: #2e2822; /* the drawings' ink: ticks, marks and figures */ --mh-cover-stone: #ece6dc; /* a stone mark: a bar at rest, a place not in use */ --mh-cover-stone-edge: #e2dbcf; /* a stone's edge */ --mh-cover-chalk: #f6f2ec; /* the palest stone */ --mh-cover-card: #ffffff; /* a white card laid on the ground */ --mh-cover-drop: 0 0 0 1px rgba(46, 40, 34, 0.1), 0 1px 0 rgba(46, 40, 34, 0.05), 0 4px 9px -3px rgba(28, 20, 10, 0.2); /* the card's edge and its soft fall onto the ground */ --mh-cover-drop-raise: 0 0 0 1px rgba(46, 40, 34, 0.14), 0 2px 0 rgba(46, 40, 34, 0.05), 0 7px 14px -4px rgba(28, 20, 10, 0.24); /* Monogram (2026-11-01): a person without a photo wears their initials on a cover stone, never a grey silhouette. */ --mh-monogram-ground: var(--mh-cover-stone); --mh-monogram-ring: var(--mh-cover-stone-edge); --mh-monogram-ink: var(--mh-cover-ink); --mh-texture-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* button faces: a finer, slightly firmer grain (stone, not paper) */ --mh-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f6a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* the select's chevron, in --mh-ink-muted */ --mh-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* a checked box's mark */ --mh-texture-stone-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); /* coloured stone: the light buttons' grain, dark flecks and light ones, so it reads on colour as theirs does on white */ --mh-texture-hatch: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.026) 0 1px, rgba(0, 0, 0, 0) 1px 7px); /* empty drop zones */ /* Motion */ --mh-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --mh-fast: 120ms; --mh-base: 200ms; --mh-rise: 240ms; --mh-ease-rise: cubic-bezier(0.25, 0.8, 0.3, 1); /* hover raises settle in, never bounce */ /* Chrome geometry */ --mh-topnav-height: 64px; --mh-logo-height: 36px; --mh-avatar: 36px; --mh-control: 36px; /* fields and buttons */ --mh-control-sm: 30px; /* office forms: every field and button in a form is this tall */ --mh-control-xs: 24px; /* the smallest buttons and the switch's knob row */ --mh-field: 240px; /* a field standing alone (filters, dialogs, inline pickers) */ --mh-field-narrow: 140px; /* numbers, money, dates */ --mh-field-wide: 420px; /* long text and textareas standing alone */ --mh-check: 16px; /* checkboxes and radios */ --mh-switch-width: 34px; /* the switch's track */ --mh-switch-height: 20px; --mh-switch-on: var(--mh-night); /* a switch that is on: the night card's dark stone (owner, 2026-11-01; was blue) */ --mh-switch-on-edge: var(--mh-night-deep); --mh-sidebar-width: 208px; --mh-sidebar-narrow: 72px; --mh-sidebar-compact: 72px; --mh-sidebar-closed: 72px; --mh-content-max: 1240px; --mh-content-gutter: 32px; /* canvas around the content panel */ --mh-panel-padding: 36px; /* inside the content panel */ --mh-sitemap-width: 420px; --mh-account-width: 220px; } /* On screen the office (the shell's pages, desktop and phone) reads in Barlow with its titles in Barlow Condensed (2026-10-28). Pages that only borrow these tokens (the customers' payment page, the website, the movers' site, the crew's link) keep Lato and Newsreader, and print keeps them everywhere, so what prints is what printed before. */ @media screen { :is(.mh-shell, .record-mobile) { --mh-font: "Barlow", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; --mh-doc-font-display: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif; } } /* On a phone the content sheet nearly fills the screen: a hairline of canvas around it and modest padding inside, so the paper is the page rather than a card floating in it. */ @media (max-width: 767px) { :root { --mh-content-gutter: 8px; --mh-panel-padding: 16px; --mh-cell-x: 14px; --mh-cell-y: 10px; --mh-doc-margin: 22px; --mh-doc-gutter: 16px; --mh-doc-cell-y: 11px; } }