/* monday.com app frame: top bar, board header, view tabs, toolbar, the full-app board table and the item card ("updates") panel.
   Study copy for the AltLeads team, not for shipping. Values are Vibe tokens (monday-tokens.css) or MEASURED from monday's own
   help-centre screen recording "The Item Card" (support.monday.com, archived 19 Feb 2025), recorded at 133% (1920 x 1080 = 1440 x 810).
   The recording's colours are slightly shifted (white shows as #f8f8f9); measured colours below are corrected back by that amount. */

.ma { position: relative; width: 1440px; height: 810px; overflow: hidden; background: var(--primary-background-color); color: var(--primary-text-color);
  font: 400 14px/20px var(--font-family); -webkit-font-smoothing: antialiased; will-change: transform; }
.ma * { box-sizing: border-box; }
.ma button { font: inherit; color: inherit; }

/* top bar (measured: 45px, the "surface" colour) */
.ma-top { position: absolute; left: 0; top: 0; right: 0; height: 45px; background: var(--primary-surface-color); }
.ma-logo { position: absolute; left: 4.5px; top: 12.25px; height: 25px; }
.ma-logo.on-dark { display: none; }
.dark-app-theme .ma-logo, .black-app-theme .ma-logo { display: none; }
.dark-app-theme .ma-logo.on-dark, .black-app-theme .ma-logo.on-dark { display: block; }  /* ours: white wordmark for dark (monday's dark logo file was not available) */
.ma-ti { position: absolute; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--border-radius-small); background: transparent;
  color: var(--primary-text-color); cursor: pointer; transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.ma-ti:hover { background: var(--primary-background-hover-color); }
.ma-ti svg { width: 20px; height: 20px; }
.ma-tdiv { position: absolute; left: 1279px; top: 12px; width: 1px; height: 21px; background: var(--layout-border-color); }
.ma-mark { position: absolute; left: 1372px; top: 6px; width: 36px; height: 33px; border-radius: var(--border-radius-small); background: var(--primary-background-hover-color); }
.ma-mark span { position: absolute; left: 8px; top: 9px; width: 21px; height: 13px; overflow: hidden; }  /* just the three-stroke mark from the logo */
.ma-mark img { height: 22px; width: auto; display: block; margin-top: -4.4px; }
.ma-me { position: absolute; left: 1408px; top: 4px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.ma-me img { width: 100%; height: 100%; display: block; }

/* board header */
.ma-title { position: absolute; left: 33px; top: 64.5px; margin: 0; font: 500 32px/40px var(--title-font-family); letter-spacing: -0.5px; white-space: nowrap; }
.ma-hicon { position: absolute; top: 71.75px; width: 24px; height: 24px; display: grid; place-items: center; color: var(--primary-text-color); border-radius: var(--border-radius-small); }
.ma-hicon svg { width: 20px; height: 20px; }
.ma-act { position: absolute; top: 70px; height: 28px; display: flex; align-items: center; gap: 8px; font: 400 14px/20px var(--font-family); }
.ma-act img { width: 24px; height: 24px; border-radius: 50%; }
.ma-invite { position: absolute; top: 68px; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background: transparent; }
.ma-invite svg { width: 18px; height: 18px; }

/* view tabs (Vibe Tab, measured: 14px, 2px blue underline, thin separators) */
.ma-tabs { position: absolute; left: 0; right: 0; top: 112px; height: 38px; border-bottom: 1px solid var(--layout-border-color); }
.ma-tab { position: absolute; top: 0; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 0; background: transparent; cursor: pointer; white-space: nowrap; }
.ma-tab:hover::before { content: ""; position: absolute; inset: 4px 0 6px; border-radius: var(--border-radius-small); background: var(--primary-background-hover-color); z-index: -1; }
.ma-tab svg { width: 16px; height: 16px; }
.ma-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary-color); }
.ma-sep { position: absolute; top: 121px; width: 1px; height: 20px; background: var(--layout-border-color); }

/* toolbar (Vibe Button small primary + split, then tertiary buttons) */
.ma-new { position: absolute; left: 30px; top: 167px; height: 32px; display: flex; border-radius: var(--border-radius-small); overflow: hidden; background: var(--primary-color); color: var(--text-color-on-primary); }
.ma-new button { height: 32px; border: 0; background: transparent; color: inherit; cursor: pointer; transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.ma-new button:hover { background: var(--primary-hover-color); }
.ma-new .m { padding: 0 9px; font: 400 14px/20px var(--font-family); }
.ma-new .s { width: 27px; display: grid; place-items: center; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25); }
.ma-new .s svg { width: 16px; height: 16px; }
.ma-tb { position: absolute; top: 167px; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 6px; border: 0; border-radius: var(--border-radius-small); background: transparent; cursor: pointer; white-space: nowrap; }
.ma-tb:hover { background: var(--primary-background-hover-color); }
.ma-tb svg { width: 20px; height: 20px; }
.ma-sort { position: relative; width: 20px; height: 20px; flex: none; }
.ma-sort svg { position: absolute; left: 0; width: 20px !important; height: 20px !important; }
.ma-sort svg:first-child { top: -5px; } .ma-sort svg:last-child { top: 5px; }

/* full-app board table (measured: 36px rows, 33px checkbox column, Item 362px with a 65px updates area) */
.ma-group { position: absolute; left: 0; right: 0; --g: var(--color-bright-blue); }
.ma-gtitle { position: absolute; left: 69.5px; top: 0; height: 24px; font: 500 18px/24px var(--title-font-family); color: var(--g); white-space: nowrap; }
.ma-gchev { position: absolute; left: 42px; top: 2px; width: 20px; height: 20px; color: var(--g); display: grid; place-items: center; }
.ma-gchev svg { width: 20px; height: 20px; }
.ma-tbl { position: absolute; left: 31.5px; top: 32.75px; }
.ma-row { position: relative; display: flex; height: 36px; }
.ma-row > div { flex: none; height: 36px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--layout-border-color);
  border-bottom: 1px solid var(--layout-border-color); background: var(--primary-background-color); white-space: nowrap; overflow: hidden; position: relative; }
.ma-row .strip { width: 6px; border: 0; background: var(--g); }
.ma-head { border-top: 1px solid var(--layout-border-color); }
.ma-head .strip { border-top-left-radius: 6px; }
.ma-row .cb { width: 33px; }
.ma-row .cb i { width: 16px; height: 16px; border: 1px solid var(--ui-border-color); border-radius: 2px; display: block; }
.ma-row .it { width: 296.25px; justify-content: flex-start; border-right: 0; }
.ma-row .up { width: 65.25px; }
.ma-head .itc { width: 361.5px; }
.ma-row .w98 { width: 97.5px; } .ma-row .w140 { width: 140.25px; } .ma-row .w141 { width: 141px; } .ma-row .w159 { width: 159px; } .ma-row .w160 { width: 159.75px; }
.ma-row .it .ex { width: 20px; margin-left: 9px; display: grid; place-items: center; color: var(--primary-text-color); }
.ma-row .it .ex svg { width: 16px; height: 16px; }
.ma-row .it .nm { margin-left: 6px; position: relative; top: 1.5px; }  /* measured: names sit 1.5px low in their row */
.ma-row .it .nm.no { margin-left: 35px; }
.ma { --ma-count: #dde6f3; }  /* measured: subitem count badge */
.dark-app-theme .ma, .black-app-theme .ma { --ma-count: var(--ui-background-color); }
.ma-row .it .cnt { margin-left: 6px; min-width: 16px; height: 18px; padding: 0 4px; border-radius: var(--border-radius-small); background: var(--ma-count); font: 400 12px/18px var(--font-family); text-align: center; }  /* measured */
.ma-row .up button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--ui-border-color); cursor: pointer; border-radius: 50%; position: relative; }
.ma-row .up button:hover { color: var(--icon-color); }
.ma-row .up button.has { color: var(--primary-color); }
.ma-row .up button svg { width: 22px; height: 22px; }
.ma-row .up button b { position: absolute; right: -1px; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--primary-color); color: #fff; font: 600 9px/13px var(--font-family); }
.ma-row .av { width: 27px; height: 27px; border-radius: 50%; display: block; }
.ma-row .st { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-color-on-primary); background: var(--s); transition: opacity var(--motion-productive-short) linear; }
.ma-row .loc { justify-content: flex-start; padding-left: 12px; gap: 4px; }
.ma-row .loc svg { width: 16px; height: 16px; color: var(--primary-color); }
.ma-item:hover > div:not(.strip) { background: var(--mb-row-hover); }
.ma-item:hover .st, .ma-item.sel .st { opacity: .7; }
.ma-item.sel > div:not(.strip) { background: var(--primary-selected-color); }
.ma-item.sel > .it { box-shadow: inset 1px 1px 0 var(--primary-color), inset 0 -1px 0 var(--primary-color); }
.ma-item.sel > .up { box-shadow: inset -1px 1px 0 var(--primary-color), inset 0 -1px 0 var(--primary-color); }
.ma-add { height: 36px; }
.ma-add .strip { opacity: .5; border-bottom-left-radius: 6px; }
.ma-add > div { border-right: 0 !important; }
.ma-add .ph { justify-content: flex-start !important; padding-left: 0; color: var(--secondary-text-color); }
.ma-foot { position: relative; margin-left: 400.5px; display: flex; height: 36px; border-left: 1px solid var(--layout-border-color); border-bottom: 1px solid var(--layout-border-color);
  border-bottom-left-radius: 6px; box-shadow: var(--box-shadow-xs); background: var(--primary-background-color); }
.ma-foot > div { flex: none; border-right: 1px solid var(--layout-border-color); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.ma-foot b { font: 400 14px/16px var(--font-family); } .ma-foot small { font: 400 12px/12px var(--font-family); color: var(--primary-color); }

/* item card panel (measured: opens from the right over the board, 610px wide, below the top bar) */
.ma-panel { position: absolute; left: 829.5px; top: 45px; right: -16.5px; bottom: 0;  /* measured: the card is wider than the window and runs off the right edge */ background: var(--primary-background-color);
  box-shadow: var(--box-shadow-large); transform: translateX(0); transition: transform var(--motion-productive-long) var(--motion-timing-enter); }
.ma-panel[hidden] { display: block !important; transform: translateX(105%); visibility: hidden; transition: transform var(--motion-productive-long) var(--motion-timing-exit), visibility 0s linear var(--motion-productive-long); }
.ma-close { position: absolute; left: 13px; top: 17px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--border-radius-small); background: transparent; color: var(--icon-color); cursor: pointer; }
.ma-close:hover { background: var(--primary-background-hover-color); }
.ma-close svg { width: 20px; height: 20px; }
.ma-ptitle { position: absolute; left: 23.25px; top: 48px; margin: 0; font: 500 16px/24px var(--title-font-family); white-space: nowrap; }  /* measured: Poppins 16 */
.ma-pav { position: absolute; left: 526.5px; top: 47px; display: flex; align-items: center; }
.ma-pav::after { content: ""; width: 1px; height: 20px; margin-left: 18px; background: var(--layout-border-color); }
.ma-pav i { width: 16px; height: 16px; border-radius: 50%; background: var(--primary-color); color: #fff; display: grid; place-items: center; margin-right: -4px; z-index: 1; box-shadow: 0 0 0 2px var(--primary-background-color); }
.ma-pav i svg { width: 12px; height: 12px; }
.ma-pav img { width: 22px; height: 22px; border-radius: 50%; }
.ma-pdots { position: absolute; right: 11px; top: 44px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--border-radius-small); cursor: pointer; }
.ma-pdots svg { width: 20px; height: 20px; }
.ma-ptabs { position: absolute; left: 0; right: 0; top: 90px; height: 40px; border-bottom: 1px solid var(--layout-border-color); }
.ma-ptabs .ma-tab { height: 40px; }
.ma-ptabs .ma-sep { top: 10px; }
.ma-write { position: absolute; left: 20px; right: 19.5px; top: 151.5px; height: 40px; display: flex; align-items: center; padding: 0 20px; border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-medium); font: 400 16px/22px var(--font-family); color: var(--primary-text-color); background: var(--primary-background-color); cursor: text; }
.ma-write:hover { box-shadow: 0 0 0 1px var(--primary-color); }
.ma-mail { position: absolute; right: 21px; top: 199px; display: flex; align-items: center; gap: 6px; font: 400 14px/20px var(--font-family); color: var(--primary-text-color); }
.ma-mail svg { width: 18px; height: 18px; }
.ma-empty { position: absolute; left: 0; right: 0; top: 302px; text-align: center; }
.ma-empty img { width: 300px; height: auto; display: block; margin: 0 auto; position: relative; top: -4.5px; left: -3px; }
.ma-empty h3 { position: relative; left: 7.5px; margin: 27.75px 0 18px; font: 500 24px/30px var(--title-font-family); }
.ma-empty p { position: relative; left: 0; margin: 0 auto; max-width: 434px; font: 400 14px/20px var(--font-family); }
.ma-scroll { position: absolute; left: 818px; top: 45px; width: 8px; height: 400px; border-radius: 4px; background: #c5c7d0; }  /* measured: the board's scroll bar shows beside the open card */
@media (prefers-reduced-motion: reduce) { .ma-panel, .ma-panel[hidden] { transition: none; } }

/* ======================================================================================================
   "Marketing Plan" board (logged-in app, board view without the side menu). MEASURED from monday's own help-centre pictures
   "display themes: light, dark and night mode" (support.monday.com, archived 17 Jun 2024), drawn at 2x; 1305 x 719 here.
   Those pictures are dark and night only; light uses the same layout with monday's light tokens (ours, said so on the page).
   Real finding: in the logged-in app, dark and night LIGHTEN the label colours (e.g. "Working on it" #FDAB3D -> #FDBC64).
   Vibe's npm package lists these lighter values only in its "hacker" theme block, so they are set here from the measurement.
   ====================================================================================================== */
.mp { position: relative; width: 1305px; height: 719px; overflow: hidden; background: var(--primary-background-color); color: var(--primary-text-color);
  font: 400 14px/20px Roboto, "Noto Sans Hebrew", sans-serif; -webkit-font-smoothing: antialiased; will-change: transform;
  --mp-cell: var(--primary-background-color); --mp-gap: var(--layout-border-color); --mp-chip: var(--allgrey-background-color); --mp-sum: var(--allgrey-background-color);
  --l-working: var(--color-working_orange); --l-stuck: var(--color-stuck-red); --l-planning: var(--color-bright-blue); --l-research: var(--color-dark_purple);
  --l-urgent: var(--color-sofia_pink); --l-high: var(--color-bright-blue); --l-medium: var(--color-purple); --l-low: var(--color-egg_yolk);
  --l-google: var(--color-done-green); --l-youtube: var(--color-dark_purple); --l-multi: var(--color-river); --l-facebook: var(--color-working_orange);
  --g1: var(--color-grass_green); --g2: #a25ddc; --mp-text2: var(--secondary-text-color); }
.dark-app-theme .mp { --mp-cell: #33354b; --mp-gap: #181b34; --mp-chip: #181b34; --mp-sum: #33354b; --mp-text2: #c5c7d0; }                /* measured */
.black-app-theme .mp { --mp-cell: #272729; --mp-gap: #111111; --mp-chip: #1a1a1a; --mp-sum: #272729; --mp-text2: #c5c7d0; }               /* measured */
.dark-app-theme .mp, .black-app-theme .mp {                                                                                                   /* measured, = Vibe "hacker" values */
  --l-working: #fdbc64; --l-stuck: #e8697d; --l-planning: #79affd; --l-research: #936fda; --l-urgent: #ff44a1; --l-high: #79affd; --l-medium: #b57de3; --l-low: #ffd533;
  --l-google: #33d391; --l-youtube: #936fda; --l-multi: #86b4ca; --l-facebook: #fdbc64; }
.mp * { box-sizing: border-box; }
.mp-abs { position: absolute; white-space: nowrap; }
.mp-title { position: absolute; left: 21.5px; top: 15px; margin: 0; font: 500 24px/32px Roboto, sans-serif; letter-spacing: 0; }
.mp-desc { position: absolute; left: 21px; top: 53px; width: 790px; margin: 0; font: 400 14px/21px Roboto, sans-serif; color: var(--secondary-text-color); }
.mp-hdr { position: absolute; top: 13px; height: 32px; display: flex; align-items: center; gap: 8px; font: 400 14px/20px Roboto, sans-serif; }
.mp-hdr svg { width: 18px; height: 18px; }
.mp-hdr img { width: 26px; height: 26px; border-radius: 50%; }
.mp-addb { position: absolute; left: 1070px; top: 15px; width: 160px; height: 32px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background: transparent; color: inherit; font: inherit; }
.mp-tabs { position: absolute; left: 17px; right: 0; top: 106px; height: 40px; border-bottom: 1px solid var(--layout-border-color); }
.mp-tab { position: absolute; top: 0; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 0; background: transparent; color: inherit;
  font: 400 14px/20px Roboto, sans-serif; cursor: pointer; white-space: nowrap; }
.mp-tab svg { width: 18px; height: 18px; }
.mp-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary-color); }
.mp-tsep { position: absolute; top: 117px; width: 1px; height: 20px; background: var(--layout-border-color); }
.mp-new { position: absolute; left: 20px; top: 165px; height: 32px; display: flex; border-radius: var(--border-radius-small); overflow: hidden; background: var(--primary-color); color: #fff; }
.mp-new span { display: flex; align-items: center; height: 32px; padding: 0 8px; font: 400 14px/20px Roboto, sans-serif; }
.mp-new span + span { padding: 0 6px; box-shadow: inset 1px 0 0 rgba(255,255,255,.3); }
.mp-new svg { width: 18px; height: 18px; }
.mp-tb { position: absolute; top: 165px; height: 32px; display: flex; align-items: center; gap: 6px; font: 400 14px/20px Roboto, sans-serif; }
.mp-tb svg { width: 20px; height: 20px; }
.mp-g { position: absolute; left: 0; right: 0; }
.mp-gt { position: absolute; left: 8px; top: 0; height: 40px; display: flex; align-items: center; gap: 10px; color: var(--g); font: 400 18px/24px Roboto, sans-serif; }
.mp-gt i { width: 16px; height: 16px; border-radius: 50%; background: var(--g); display: grid; place-items: center; color: var(--mp-gap); }
.mp-gt i svg { width: 14px; height: 14px; }
.mp-gt b { font-weight: 400; margin-left: 2px; }
.mp-hd { position: absolute; top: 12px; font: 400 14px/20px Roboto, sans-serif; text-align: center; }
.mp-hdhl { position: absolute; top: 0; height: 40px; background: var(--mp-cell); border-radius: 8px 8px 0 0; }
.mp-row { position: absolute; left: 33px; height: 34px; }
.mp-row > * { position: absolute; top: 0; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--mp-cell); font: 400 13px/20px Roboto, sans-serif; overflow: hidden; white-space: nowrap; }
.mp-row .nt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mp-row .up { width: 18px; margin: 0 19px 0 8px; display: grid; place-items: center; color: var(--mp-text2); }
.mp-row .up svg { width: 22px; height: 22px; }
.mp-row .sb { display: flex; align-items: center; color: var(--mp-text2); }
.mp-row .sb { transform: translate(1px, -1px); }
.mp-row .sb .tri { width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; margin-right: 11px; }
.mp-row .sb svg { width: 17px; height: 17px; }
.mp-row .sb b { font-weight: 400; margin-left: 5px; }
.mp-row .lb { position: absolute; inset: 0; display: block; padding: 0 6px; text-align: center; line-height: 34px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mp-row .strip { left: 0; width: 8px; background: var(--g); }
.mp-row .nm { justify-content: flex-start; padding-left: 14px; }
.mp-row .lb { color: #fff; }
.mp-row .t2 { color: var(--mp-text2); }
.mp-pill { height: 21.5px; width: 106.5px; justify-content: center; border-radius: 11px; font-size: 13px; display: flex; align-items: center; color: #fff; background: var(--g); }
.mp-dep { position: absolute; left: 8px; right: 8px; top: 4px; bottom: 4px; background: var(--mp-chip); border-left: 4.5px solid #214b84; display: block; padding: 0 8px 0 9px; line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-add { opacity: 1; }
.mp-add .strip { opacity: .5; }
.mp-add .nm { background: transparent; padding-left: 21px; color: var(--mp-text2); font-size: 14px; box-shadow: inset 1px 1px 0 var(--layout-border-color), inset 0 -1px 0 var(--layout-border-color); width: 1271px !important; left: 8px; }
.mp-sumcell { position: absolute; background: var(--mp-sum); border-radius: 0 0 8px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mp-sumcell > span:not(.mp-pill) { margin-top: 4px; }
.mp-sumcell small { font: 400 12px/14px Roboto, sans-serif; color: var(--secondary-text-color); }
.mp-hline { position: absolute; left: 33px; right: 0; height: 1px; background: var(--layout-border-color); }
.mp svg { flex: none; }

/* ======================================================================================================
   Home page + account menu + "Change theme" menu. MEASURED from monday's own help-centre picture (display themes article,
   archived 17 Jun 2024), drawn at 133%: 1416 x 710 here. Figtree text. The purple box around "Change theme" is the help
   centre's own marking (shown with "Screenshot marks", hidden with M).
   ====================================================================================================== */
.mh { position: relative; width: 1416px; height: 710px; overflow: hidden; background: var(--allgrey-background-color); color: var(--primary-text-color);
  font: 400 14px/20px var(--font-family); -webkit-font-smoothing: antialiased; }
.mh * { box-sizing: border-box; }
.mh button { font: inherit; color: inherit; }
.mh-abs { position: absolute; white-space: nowrap; }
.mh-top { position: absolute; left: 0; top: 0; right: 0; height: 45.75px; background: var(--primary-surface-color, #edeff7); }
.mh-logo { position: absolute; left: 13.5px; top: 8.5px; width: 147.75px; height: auto; }
.mh-logo.on-dark, .dark-app-theme .mh-logo:not(.on-dark), .black-app-theme .mh-logo:not(.on-dark) { display: none; }
.dark-app-theme .mh-logo.on-dark, .black-app-theme .mh-logo.on-dark { display: block; }
.mh-ti { position: absolute; top: 4.5px; width: 32px; height: 32px; border: 0; padding: 0; border-radius: var(--border-radius-small); background: transparent; display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.mh-ti:hover { background: var(--primary-background-hover-color); }
.mh-ti svg { width: 20px; height: 20px; }
.mh-badge { position: absolute; left: 1111.5px; top: 0; height: 15px; min-width: 22px; padding: 0 4px; border-radius: 8px; background: var(--primary-background-color); color: var(--primary-text-color); font: 400 12px/15px var(--font-family); text-align: center; }
.mh-tdiv { position: absolute; left: 1235px; top: 11.5px; width: 1px; height: 22.5px; background: var(--layout-border-color); }
.mh-me { position: absolute; left: 1330.5px; top: 3px; width: 73.5px; height: 33px; border: 0; padding: 0; border-radius: var(--border-radius-small); background: var(--primary-selected-color); cursor: pointer; }
.mh-mark { position: absolute; left: 10px; top: 9.5px; width: 21px; height: 13px; overflow: hidden; }
.mh-mark img { height: 22px; width: auto; display: block; margin-top: -4.4px; }
.mh-mark.big { left: 32px; top: 20px; width: 27px; height: 16.5px; }
.mh-mark.big img { height: 28px; margin-top: -5.6px; }
.mh-av { position: absolute; left: 39.5px; top: -0.5px; width: 34px; height: 34px; border-radius: 50%; }
.mh-greet { position: absolute; left: 0; right: 0; top: 45.75px; height: 79.5px; background: var(--primary-background-color); }
.mh-greet p { position: absolute; left: 18px; margin: 0; white-space: nowrap; }
.mh-greet .g1 { top: 17.5px; font: 400 14px/20px var(--font-family); }
.mh-greet .g2 { top: 37.5px; font: 500 17px/26px var(--font-family); }
.mh-conf { position: absolute; left: 468px; top: 0; }
.mh-main { position: absolute; left: 18px; top: 141.75px; width: 1037px; height: 600px; background: var(--primary-background-color); border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; }
.mh-fold { position: absolute; left: 27.5px; top: 28.25px; width: 20px; height: 20px; border: 0; padding: 0; background: transparent; display: grid; place-items: center; cursor: pointer; transition: transform var(--motion-productive-long) var(--motion-timing-transition); }
.mh-fold svg { width: 20px; height: 20px; }
.mh-main.closed .mh-fold { transform: rotate(-90deg); }
.mh-main.closed .mh-cards { display: none; }
.mh-h { position: absolute; left: 55.5px; top: 25px; margin: 0; font: 700 18px/26px var(--font-family); white-space: nowrap; }
.mh-card { position: absolute; width: 302.25px; height: 238.5px; border: 1px solid var(--layout-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); }
.mh-thumb { position: absolute; left: 8px; top: 8px; width: 284.25px; height: 148.5px; border-radius: 2px; }
.mh-ci { position: absolute; left: 10.25px; top: 174px; width: 20px; height: 20px; display: grid; place-items: center; color: var(--icon-color); }
.mh-ci svg { width: 20px; height: 20px; }
.mh-ct { position: absolute; left: 38.75px; top: 172.25px; font: 700 16px/22px var(--font-family); white-space: nowrap; }
.mh-star { position: absolute; left: 260.5px; top: 173px; width: 22px; height: 22px; border: 0; padding: 0; background: transparent; display: grid; place-items: center; color: var(--icon-color); cursor: pointer; }
.mh-star svg { width: 20px; height: 20px; }
.mh-star[aria-pressed="true"] { color: #ffcb00; }
.mh-cc { position: absolute; left: 11.75px; top: 205.75px; font: 400 14px/22px var(--font-family); color: var(--secondary-text-color); white-space: nowrap; }
.mh-side { position: absolute; left: 1055px; top: 141.75px; right: 0; bottom: 0; }
.mh-help { position: absolute; left: 25px; top: 466.5px; width: 318px; height: 84px; border-radius: var(--border-radius-medium); background: var(--primary-background-color); }
.mh-hi { position: absolute; left: 17.25px; top: 17.25px; width: 51px; height: 51px; border-radius: 6px; background: #5559d7; color: #fff; display: grid; place-items: center; }
.mh-hi svg { width: 28px; height: 28px; }
.mh-help b { position: absolute; left: 84px; top: 20px; font: 700 14px/20px var(--font-family); white-space: nowrap; }
.mh-help span:last-child { position: absolute; left: 84px; top: 44px; font: 400 14px/20px var(--font-family); white-space: nowrap; }
.mh-menu { position: absolute; left: 938.25px; top: 45.75px; width: 467.25px; height: 544.5px; background: var(--secondary-background-color); border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-large); z-index: 10; animation: mh-in var(--motion-productive-long) var(--motion-timing-enter); }
.dark-app-theme .mh-menu, .black-app-theme .mh-menu { box-shadow: 0 0 0 1px var(--layout-border-color), var(--box-shadow-large); }
.mh-menu[hidden] { display: none; }
@keyframes mh-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mh-mhead { position: absolute; left: 0; right: 0; top: 0; height: 57.75px; border-bottom: 1px solid var(--layout-border-color); }
.mh-mhead > span:last-child { position: absolute; left: 74.25px; top: 17.25px; font: 400 15px/22px var(--font-family); white-space: nowrap; }
.mh-sec { position: absolute; font: 400 15px/20px var(--font-family); color: var(--secondary-text-color); white-space: nowrap; }
.mh-mi { position: absolute; height: 34px; width: 196px; display: flex; align-items: center; gap: 9px; padding: 0 0 0 12.5px; border: 0; border-radius: var(--border-radius-small); background: transparent;
  font: 400 15px/20px var(--font-family); text-align: left; cursor: pointer; white-space: nowrap; }
.mh-mi:hover { background: var(--primary-background-hover-color); }
.mh-mi svg { width: 18px; height: 18px; flex: none; color: var(--icon-color); }
.mh-theme { width: 216px; }
.mh-theme[aria-expanded="true"] { background: var(--ui-background-color); }
.mh-theme > svg:last-child { margin-left: auto; margin-right: 8px; }
.mh-mark-annot { position: absolute; left: 241px; top: 323.5px; width: 223px; height: 41px; border: 3.5px solid #5559d7; border-radius: 10px; pointer-events: none; }
.rk-nomarks .mh-mark-annot { display: none; }
.mh-div { position: absolute; height: 1px; background: var(--layout-border-color); }
.mh-ws { position: absolute; left: 24px; top: 510.5px; right: 39px; height: 20px; display: flex; align-items: center; font: 400 15px/20px var(--font-family); white-space: nowrap; }
.mh-ws > svg { width: 18px; height: 18px; color: var(--icon-color); margin-right: 15px; }
.mh-ws label { display: inline-flex; align-items: center; gap: 8px; margin-left: 26px; }
.mh-ws label:first-of-type { margin-left: 24px; }
.mh-ws input { width: 13.5px; height: 13.5px; margin: 0; accent-color: var(--primary-color); }
.mh-ws .more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.mh-ws .more svg { width: 16px; height: 16px; }
.mh-sub { position: absolute; left: 8.25px; top: 324.75px; width: 233.5px; height: 153px; padding: 9px 8.5px; background: var(--secondary-background-color); border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-medium); z-index: 2; display: flex; flex-direction: column; animation: mh-in var(--motion-productive-long) var(--motion-timing-enter); }
.dark-app-theme .mh-sub, .black-app-theme .mh-sub { box-shadow: 0 0 0 1px var(--layout-border-color), var(--box-shadow-medium); }
.mh-sub[hidden] { display: none; }
.mh-sub button { height: 33.75px; flex: none; display: flex; align-items: center; gap: 9px; padding: 0 0 0 16px; border: 0; border-radius: var(--border-radius-small); background: transparent; font: 400 15px/20px var(--font-family); cursor: pointer; text-align: left; }
.mh-sub button svg { width: 18px; height: 18px; color: var(--icon-color); }
.mh-sub button:hover, .mh-sub button.hov { background: var(--ui-background-color); }
.mh-sub button.sel { background: var(--primary-selected-color); }