/* MODE-SELECTOR-2026 — the view selector as a case of engraved seals. Three layouts (Shortlist, Index, Contents) share one chrome: a plate with a double rule, medallion emblems, serif names and a plain one-line description. MODE-SELECTOR-TONES-2026: every mode and family carries one of nine named tones, re-tuned for each era × theme (see the :root blocks below); the selected view is filled solid in its tone and tagged "Current view", and the plate's glow, header rule and the header pill take the active view's tone. Type inherits the active era and theme; shapes change per era. */ /* ---------- Developer Mode picker (Engineering → Navigation design) ---------- */ .ms-design-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; max-width: 840px; margin: 18px 0; } .ms-design-choice { display: grid; gap: 10px; text-align: left; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 14px 16px 16px; border-radius: 8px; cursor: pointer; font: 13px/1.5 var(--font-body, system-ui, sans-serif); transition: border-color .18s, box-shadow .18s, transform .18s; } .ms-design-choice:hover { border-color: var(--gold); transform: translateY(-1px); } .ms-design-choice[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); box-shadow: 0 0 0 1px var(--gold) inset; } .ms-design-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .ms-design-thumb { display: block; width: 100%; height: auto; border-radius: 4px; background: color-mix(in srgb, var(--text) 4%, transparent); } .ms-design-thumb rect, .ms-design-thumb circle, .ms-design-thumb path { vector-effect: non-scaling-stroke; } .ms-design-choice strong { font-family: var(--font-serif, Georgia, serif); font-size: 17px; font-weight: 600; } .ms-design-choice strong small { display: inline-block; margin-left: 8px; font: 600 9.5px/1 var(--font-display, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); vertical-align: middle; } .ms-design-choice span, .ms-design-status { color: var(--text-muted); } .ms-design-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ---------- Tones (MODE-SELECTOR-TONES-2026) ---------- Nine named colours, one per mode or family (`tone` in mode-selector.js), re-tuned for each of the eight era × theme looks so the selector reads as part of whichever palette is on. Light themes carry deep tones that take a pale ink; dark themes carry lifted tones that take a dark ink. They live on :root so the header pill (#modeButton) can read the active view's tone. */ :root { --ms-on-tone: #fffdf7; --ms-t-moss: #5f7a3a; --ms-t-sea: #2f6f7e; --ms-t-ink: #3c4a7a; --ms-t-plum: #6b4a7a; --ms-t-wine: #8a3a46; --ms-t-rust: #b0552a; --ms-t-brass: #9c7527; --ms-t-rose: #a9546e; --ms-t-slate: #5e6468; } :root[data-theme="dark"] { --ms-on-tone: #15130f; --ms-t-moss: #a9bd6f; --ms-t-sea: #74bcc8; --ms-t-ink: #a6b6e4; --ms-t-plum: #c9a2de; --ms-t-wine: #de8d9b; --ms-t-rust: #e59a66; --ms-t-brass: #e2b95f; --ms-t-rose: #e8a6b8; --ms-t-slate: #aab0b6; } /* Belle Époque: olive, peacock, slate blue, aubergine, burgundy, terracotta, amber, dusty rose. */ :root[data-era="belleepoque"][data-theme="light"] { --ms-t-moss: #5f7a3a; --ms-t-sea: #2f6f7e; --ms-t-ink: #3c4a7a; --ms-t-plum: #6b4a7a; --ms-t-wine: #8a3a46; --ms-t-rust: #b0552a; --ms-t-brass: #9c7527; --ms-t-rose: #a9546e; --ms-t-slate: #5e6468; } :root[data-era="belleepoque"][data-theme="dark"] { --ms-t-moss: #a9bd6f; --ms-t-sea: #74bcc8; --ms-t-ink: #a6b6e4; --ms-t-plum: #c9a2de; --ms-t-wine: #de8d9b; --ms-t-rust: #e59a66; --ms-t-brass: #e2b95f; --ms-t-rose: #e8a6b8; --ms-t-slate: #aab0b6; } /* Art Deco: emerald, sapphire, onyx blue, amethyst, ruby, carnelian, brass, tourmaline. */ :root[data-era="artdeco"][data-theme="light"] { --ms-t-moss: #2f6b4f; --ms-t-sea: #1f5f8a; --ms-t-ink: #2d3550; --ms-t-plum: #5a3a7e; --ms-t-wine: #8c2634; --ms-t-rust: #b1551a; --ms-t-brass: #9a7622; --ms-t-rose: #a94466; --ms-t-slate: #4d5560; } :root[data-era="artdeco"][data-theme="dark"] { --ms-t-moss: #52b991; --ms-t-sea: #66aee4; --ms-t-ink: #adb9e8; --ms-t-plum: #b991ea; --ms-t-wine: #e5808c; --ms-t-rust: #ea9c5c; --ms-t-brass: #dcc07c; --ms-t-rose: #ef97b6; --ms-t-slate: #a9b0bc; } /* Mid-century: avocado, turquoise, denim, orchid, cherry, burnt orange, mustard, coral. */ :root[data-era="midcentury"][data-theme="light"] { --ms-t-moss: #6f8126; --ms-t-sea: #19857c; --ms-t-ink: #2f5d8a; --ms-t-plum: #7a4b8a; --ms-t-wine: #a53838; --ms-t-rust: #c9631c; --ms-t-brass: #b58615; --ms-t-rose: #c75a70; --ms-t-slate: #5c686b; } :root[data-era="midcentury"][data-theme="dark"] { --ms-t-moss: #bccb5e; --ms-t-sea: #52d2c3; --ms-t-ink: #92b8ec; --ms-t-plum: #cc9fe3; --ms-t-wine: #f08f8f; --ms-t-rust: #f3a660; --ms-t-brass: #f1c94c; --ms-t-rose: #f4a4b4; --ms-t-slate: #adb8c6; } /* Editorial: Swiss primaries at full strength, with the page's navy ink. */ :root[data-era="editorial"][data-theme="light"] { --ms-t-moss: #2d7a4c; --ms-t-sea: #1a6ea6; --ms-t-ink: #14213d; --ms-t-plum: #5b3f8c; --ms-t-wine: #b4232c; --ms-t-rust: #d5531b; --ms-t-brass: #b8891a; --ms-t-rose: #c43a6b; --ms-t-slate: #4a4f57; } :root[data-era="editorial"][data-theme="dark"] { --ms-t-moss: #5ccb8d; --ms-t-sea: #5eb5f2; --ms-t-ink: #bcc7ff; --ms-t-plum: #bb9ff6; --ms-t-wine: #ff6f6f; --ms-t-rust: #ff975a; --ms-t-brass: #f6c744; --ms-t-rose: #ff8db2; --ms-t-slate: #b3b7be; } /* Any node carrying data-ms-tone sets --ms-tone and its washes for itself and its children. */ /* The washes are declared beside the tone (not on the plate) so each resolves with its own node's colour rather than the plate's default gold. */ #modeMenu.ms-enhanced [data-ms-tone="moss"] { --ms-tone: var(--ms-t-moss); --ms-tone-wash: color-mix(in srgb, var(--ms-t-moss) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-t-moss) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-t-moss) 42%, transparent); } #modeMenu.ms-enhanced [data-ms-tone="sea"] { --ms-tone: var(--ms-t-sea); --ms-tone-wash: color-mix(in srgb, var(--ms-t-sea) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-t-sea) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-t-sea) 42%, transparent); } #modeMenu.ms-enhanced [data-ms-tone="ink"] { --ms-tone: var(--ms-t-ink); --ms-tone-wash: color-mix(in srgb, var(--ms-t-ink) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-t-ink) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-t-ink) 42%, transparent); } #modeMenu.ms-enhanced [data-ms-tone="plum"] { --ms-tone: var(--ms-t-plum); --ms-tone-wash: color-mix(in srgb, var(--ms-t-plum) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-t-plum) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-t-plum) 42%, transparent); } #modeMenu.ms-enhanced [data-ms-tone="wine"] { --ms-tone: var(--ms-t-wine); --ms-tone-wash: color-mix(in srgb, var(--ms-t-wine) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-t-wine) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-t-wine) 42%, transparent); } #modeMenu.ms-enhanced [data-ms-tone="rust"] { --ms-tone: var(--ms-t-rust); --ms-tone-wash: color-mix(in srgb, var(--ms-t-rust) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-t-rust) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-t-rust) 42%, transparent); } #modeMenu.ms-enhanced [data-ms-tone="brass"] { --ms-tone: var(--ms-t-brass); --ms-tone-wash: color-mix(in srgb, var(--ms-t-brass) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-t-brass) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-t-brass) 42%, transparent); } #modeMenu.ms-enhanced [data-ms-tone="rose"] { --ms-tone: var(--ms-t-rose); --ms-tone-wash: color-mix(in srgb, var(--ms-t-rose) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-t-rose) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-t-rose) 42%, transparent); } #modeMenu.ms-enhanced [data-ms-tone="slate"] { --ms-tone: var(--ms-t-slate); --ms-tone-wash: color-mix(in srgb, var(--ms-t-slate) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-t-slate) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-t-slate) 42%, transparent); } /* ---------- The plate ---------- */ #modeMenu.ms-enhanced { --ms-tone: var(--gold); /* a node without a tone keeps the house gold */ --ms-current: var(--gold); /* set by the script to the active view's tone */ --ms-tone-wash: color-mix(in srgb, var(--ms-tone) 9%, var(--surface)); --ms-tone-wash-strong: color-mix(in srgb, var(--ms-tone) 16%, var(--surface)); --ms-tone-rule: color-mix(in srgb, var(--ms-tone) 42%, transparent); --ms-gold: var(--gold); --ms-gold-soft: color-mix(in srgb, var(--gold) 55%, transparent); --ms-rule: color-mix(in srgb, var(--text) 12%, transparent); --ms-rule-gold: color-mix(in srgb, var(--gold) 38%, transparent); --ms-wash: color-mix(in srgb, var(--gold) 7%, var(--surface)); --ms-wash-strong: color-mix(in srgb, var(--gold) 14%, var(--surface)); --ms-selected: color-mix(in srgb, var(--gold) 12%, var(--surface)); --ms-ink-on-gold: var(--surface); --ms-radius: 12px; --ms-emblem-radius: 50%; --ms-emblem-clip: none; --ms-font-title: var(--font-serif, 'Cormorant Garamond', Georgia, serif); --ms-font-name: var(--font-serif, 'Cormorant Garamond', Georgia, serif); --ms-font-kicker: var(--font-display, system-ui, sans-serif); position: absolute; display: flex; flex-direction: column; gap: 0; width: 508px; min-width: 0; max-width: calc(100vw - 40px); max-height: calc(100dvh - var(--header-h, 80px) - 24px); padding: 0; overflow: hidden; z-index: 120; background: radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--ms-current) 22%, transparent), transparent 60%), var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--border-strong)); border-radius: var(--ms-radius); box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent); font: 13px/1.45 var(--font-body, system-ui, sans-serif); text-align: left; animation: ms-open .22s cubic-bezier(.2, .8, .2, 1) both; } #modeMenu.ms-enhanced[hidden], #modeMenu.ms-enhanced [hidden] { display: none !important; } #modeMenu.ms-enhanced::before { display: none; } /* Inner hairline: the second rule of an engraved plate. */ #modeMenu.ms-enhanced .ms-frame { position: absolute; inset: 5px; border: 1px solid var(--ms-rule-gold); border-radius: calc(var(--ms-radius) - 5px); pointer-events: none; z-index: 3; } #modeMenu.ms-enhanced .ms-frame::before { content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--ms-current), transparent); opacity: .95; } @keyframes ms-open { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes ms-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } #modeMenu.ms-enhanced svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; } #modeMenu.ms-enhanced button, #modeMenu.ms-enhanced input { font: inherit; color: inherit; } #modeMenu.ms-enhanced button { appearance: none; border: 0; background: none; cursor: pointer; text-align: left; margin: 0; } #modeMenu.ms-enhanced button:focus-visible, #modeMenu.ms-enhanced [role="option"]:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } #modeMenu.ms-enhanced ul { margin: 0; padding: 0; list-style: none; } /* ---------- Medallion emblem ---------- */ #modeMenu.ms-enhanced .ms-emblem { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--ms-emblem-radius); clip-path: var(--ms-emblem-clip); color: var(--ms-tone); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ms-tone) 22%, transparent), transparent 72%), var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-tone) 70%, transparent), inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--ms-tone) 28%, transparent); transition: background .18s, box-shadow .18s, color .18s, transform .18s; } #modeMenu.ms-enhanced .ms-emblem svg { width: 17px; height: 17px; } #modeMenu.ms-enhanced[data-era-clip] .ms-emblem { box-shadow: inset 0 0 0 1px var(--ms-gold-soft); } /* ---------- Header ---------- */ #modeMenu.ms-enhanced .ms-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 16px 22px 12px; flex: none; } #modeMenu.ms-enhanced .ms-header::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--ms-current), color-mix(in srgb, var(--ms-current) 40%, transparent) 45%, transparent); } #modeMenu.ms-enhanced .ms-heading { min-width: 0; margin-right: auto; } #modeMenu.ms-enhanced .ms-kicker { margin: 0 0 2px; font: 700 9.5px/1.2 var(--ms-font-kicker); letter-spacing: .2em; text-transform: uppercase; color: var(--ms-current); } #modeMenu.ms-enhanced .ms-title { font: 500 30px/1.05 var(--ms-font-title); letter-spacing: -.01em; color: var(--text); margin: 0; padding: 0; text-transform: none; } /* Atlas / Workspace tabs (signed-in only) */ #modeMenu.ms-enhanced .ms-scope-switch { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--ms-rule); } #modeMenu.ms-enhanced .ms-scope-tab { min-height: 30px; padding: 7px 13px 6px; border-radius: 999px; font: 700 10.5px/1 var(--ms-font-kicker); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); transition: background .16s, color .16s, box-shadow .16s; } #modeMenu.ms-enhanced .ms-scope-tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); } #modeMenu.ms-enhanced .ms-scope-tab[aria-pressed="true"] { background: var(--text); color: var(--surface); box-shadow: 0 3px 10px -5px color-mix(in srgb, var(--text) 70%, transparent); cursor: default; } #modeMenu.ms-enhanced .ms-header-tools { display: flex; gap: 6px; align-items: center; } #modeMenu.ms-enhanced .ms-icon-button { display: grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border-radius: 50%; color: var(--text-muted); transition: background .18s, color .18s, box-shadow .18s; } #modeMenu.ms-enhanced .ms-search-button { box-shadow: inset 0 0 0 1px var(--ms-rule-gold); color: var(--gold); } #modeMenu.ms-enhanced .ms-icon-button:hover { background: var(--ms-wash-strong); color: var(--text); } #modeMenu.ms-enhanced .ms-search { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--ms-gold-soft); border-radius: 999px; padding: 0 4px 0 14px; background: var(--surface); } #modeMenu.ms-enhanced .ms-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); } #modeMenu.ms-enhanced .ms-search-glyph { color: var(--gold); } #modeMenu.ms-enhanced .ms-search input { min-width: 0; width: 100%; border: 0; background: none; padding: 9px 0; outline: none; font-size: 15px; box-shadow: none; color: var(--text); font-family: var(--ms-font-name); } #modeMenu.ms-enhanced .ms-search input::-webkit-search-cancel-button { display: none; } #modeMenu.ms-enhanced .ms-search input::placeholder { color: var(--text-muted); font-style: italic; } #modeMenu.ms-enhanced .ms-search .ms-icon-button { width: 36px; height: 36px; } /* ---------- Body ---------- */ #modeMenu.ms-enhanced .ms-body { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ms-gold-soft) transparent; } /* ---------- The mode button ---------- */ #modeMenu.ms-enhanced li.ms-option { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 9px 10px 9px 8px; margin: 0; border: 0; border-radius: 8px; background: none; color: var(--text); font-family: var(--font-body, system-ui, sans-serif); font-weight: 400; letter-spacing: normal; text-transform: none; cursor: pointer; white-space: normal; transition: background .16s, box-shadow .16s; animation: ms-rise .26s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); } #modeMenu.ms-enhanced li.ms-option::before, #modeMenu.ms-enhanced li.ms-option::after { display: none; } #modeMenu.ms-enhanced li.ms-option:hover { background: var(--ms-tone-wash); } #modeMenu.ms-enhanced li.ms-option:hover .ms-emblem { background: var(--ms-tone-wash-strong); box-shadow: inset 0 0 0 1px var(--ms-tone), inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--ms-tone) 45%, transparent); transform: scale(1.04); } /* The selected row: tone wash, a 4px tone bar, a reversed medallion and a "Current view" tag. */ #modeMenu.ms-enhanced li.ms-option[aria-selected="true"] { background: var(--ms-tone-wash-strong); box-shadow: inset 4px 0 0 var(--ms-tone), inset 0 0 0 1px color-mix(in srgb, var(--ms-tone) 38%, transparent); } #modeMenu.ms-enhanced li.ms-option[aria-selected="true"] .ms-emblem { background: var(--ms-tone); color: var(--ms-on-tone); box-shadow: inset 0 0 0 1px var(--ms-tone), 0 0 0 3px color-mix(in srgb, var(--ms-tone) 28%, transparent); } #modeMenu.ms-enhanced li.ms-option[aria-selected="true"] .ms-option-name { color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-option-copy { display: block; min-width: 0; flex: 1; } #modeMenu.ms-enhanced .ms-option-name { display: flex; align-items: baseline; gap: 7px; font: 600 16px/1.25 var(--ms-font-name); color: var(--text); } #modeMenu.ms-enhanced .ms-option-num { font: 500 10px/1 var(--ms-font-kicker); letter-spacing: .12em; color: var(--ms-tone); padding: 2px 5px 1px; border: 1px solid var(--ms-tone-rule); border-radius: 3px; transform: translateY(-1px); } #modeMenu.ms-enhanced .ms-option-detail { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.4; margin-top: 2px; } #modeMenu.ms-enhanced .ms-option-inside { flex: none; max-width: 30%; font: 600 9.5px/1.2 var(--ms-font-kicker); letter-spacing: .12em; text-transform: uppercase; color: var(--ms-tone); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #modeMenu.ms-enhanced .ms-option-inside:empty { display: none; } #modeMenu.ms-enhanced .ms-option-now { display: none; flex: none; align-items: center; gap: 5px; padding: 5px 9px 4px 7px; border-radius: 999px; background: var(--ms-tone); color: var(--ms-on-tone); font: 700 9px/1 var(--ms-font-kicker); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } #modeMenu.ms-enhanced .ms-option-now svg { width: 11px; height: 11px; stroke-width: 2.4; } #modeMenu.ms-enhanced li.ms-option[aria-selected="true"] .ms-option-now { display: inline-flex; } #modeMenu.ms-enhanced li.ms-option[aria-selected="true"] .ms-option-inside, #modeMenu.ms-enhanced li.ms-option[aria-selected="true"] .ms-option-go { display: none; } #modeMenu.ms-enhanced .ms-option-go { position: relative; flex: none; width: 18px; height: 18px; color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-option-go > span { position: absolute; inset: 0; opacity: 0; transition: opacity .16s, transform .16s; } #modeMenu.ms-enhanced .ms-option-go svg { width: 16px; height: 16px; } #modeMenu.ms-enhanced .ms-go-arrow { transform: translateX(-4px); } #modeMenu.ms-enhanced li.ms-option:hover .ms-go-arrow, #modeMenu.ms-enhanced li.ms-option:focus-visible .ms-go-arrow { opacity: 1; transform: none; } #modeMenu.ms-enhanced .ms-subhead { margin: 8px 0 2px 8px; font: 700 9.5px/1.2 var(--ms-font-kicker); letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 10px; } #modeMenu.ms-enhanced .ms-subhead::after { content: ""; flex: 1; height: 1px; background: var(--ms-rule); } /* ---------- Shortlist: the three plates ---------- */ #modeMenu.ms-enhanced .ms-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 22px 10px; } #modeMenu.ms-enhanced .ms-quick .ms-option { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 7px; min-height: 164px; padding: 16px 10px 13px; border-radius: 10px; text-align: center; background: linear-gradient(180deg, var(--ms-tone-wash), var(--surface) 68%); box-shadow: inset 0 0 0 1px var(--ms-tone-rule); transition: background .18s, box-shadow .18s, transform .18s; } #modeMenu.ms-enhanced .ms-quick .ms-option:hover { background: var(--ms-tone-wash-strong); transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--ms-tone), 0 12px 24px -14px color-mix(in srgb, var(--ms-tone) 80%, transparent); } /* The selected plate is filled solid with its tone: the one coloured block in the row. */ #modeMenu.ms-enhanced .ms-quick .ms-option[aria-selected="true"] { background: var(--ms-tone); color: var(--ms-on-tone); box-shadow: inset 0 0 0 4px var(--ms-tone), inset 0 0 0 5px color-mix(in srgb, var(--ms-on-tone) 55%, transparent), 0 14px 28px -16px var(--ms-tone); } #modeMenu.ms-enhanced .ms-quick .ms-option[aria-selected="true"] .ms-emblem { background: var(--ms-on-tone); color: var(--ms-tone); box-shadow: inset 0 0 0 1px var(--ms-on-tone), 0 0 0 3px color-mix(in srgb, var(--ms-on-tone) 35%, transparent); } #modeMenu.ms-enhanced .ms-quick .ms-option[aria-selected="true"] .ms-option-name { color: var(--ms-on-tone); } #modeMenu.ms-enhanced .ms-quick .ms-option[aria-selected="true"] .ms-option-detail { color: var(--ms-on-tone); opacity: .88; } #modeMenu.ms-enhanced .ms-quick .ms-option[aria-selected="true"] .ms-option-now { display: inline-flex; background: var(--ms-on-tone); color: var(--ms-tone); margin-top: auto; } #modeMenu.ms-enhanced .ms-quick .ms-emblem { width: 46px; height: 46px; } #modeMenu.ms-enhanced .ms-quick .ms-emblem svg { width: 21px; height: 21px; } #modeMenu.ms-enhanced .ms-quick .ms-option-copy { flex: none; } #modeMenu.ms-enhanced .ms-quick .ms-option-name { justify-content: center; font-size: 20px; font-weight: 600; letter-spacing: -.005em; } #modeMenu.ms-enhanced .ms-quick .ms-option-detail { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.4; margin-top: 0; } #modeMenu.ms-enhanced .ms-quick .ms-option-inside { max-width: none; margin-top: auto; font-size: 8.5px; letter-spacing: .14em; color: var(--ms-tone); text-align: center; } #modeMenu.ms-enhanced .ms-quick .ms-option-go { display: none; } /* ---------- Shortlist: families ---------- */ #modeMenu.ms-enhanced .ms-families { padding: 2px 22px 12px; } #modeMenu.ms-enhanced[data-scope="workspace"] .ms-families { padding-top: 10px; } #modeMenu.ms-enhanced .ms-family { border-bottom: 1px solid var(--ms-rule); } #modeMenu.ms-enhanced .ms-family:last-child { border-bottom: 0; } #modeMenu.ms-enhanced .ms-family-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 6px 10px 4px; border-radius: 8px; transition: color .16s, background .16s; } #modeMenu.ms-enhanced .ms-family-toggle:hover { background: var(--ms-tone-wash); } #modeMenu.ms-enhanced .ms-family-emblem { width: 36px; height: 36px; } #modeMenu.ms-enhanced .ms-family-emblem svg { width: 17px; height: 17px; } #modeMenu.ms-enhanced .ms-family-copy { flex: 1; min-width: 0; } #modeMenu.ms-enhanced .ms-family-title { display: flex; align-items: baseline; gap: 8px; font: 600 17.5px/1.25 var(--ms-font-name); color: var(--text); } #modeMenu.ms-enhanced .ms-family-title small { font: 700 9.5px/1 var(--ms-font-kicker); letter-spacing: .1em; color: var(--ms-tone); padding: 3px 7px 2px; border-radius: 999px; background: var(--ms-tone-wash-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-tone) 30%, transparent); } #modeMenu.ms-enhanced .ms-family-preview { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #modeMenu.ms-enhanced .ms-family.is-open .ms-family-preview { white-space: normal; } #modeMenu.ms-enhanced .ms-family-chevron { color: var(--text-muted); transition: transform .22s cubic-bezier(.2, .8, .2, 1), color .16s; } #modeMenu.ms-enhanced .ms-family-chevron svg { width: 14px; height: 14px; } #modeMenu.ms-enhanced .ms-family-toggle:hover .ms-family-chevron { color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-family-toggle:hover .ms-family-emblem { background: var(--ms-tone-wash-strong); box-shadow: inset 0 0 0 1px var(--ms-tone), inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--ms-tone) 45%, transparent); } #modeMenu.ms-enhanced .ms-family-toggle[aria-expanded="true"] .ms-family-chevron { transform: rotate(180deg); color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-family.is-open .ms-family-toggle { background: var(--ms-tone-wash); } #modeMenu.ms-enhanced .ms-family.is-open .ms-family-title { color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-family.is-open .ms-family-title small { background: var(--ms-tone); color: var(--ms-on-tone); box-shadow: none; } #modeMenu.ms-enhanced .ms-family.is-open .ms-family-emblem { background: var(--ms-tone); color: var(--ms-on-tone); box-shadow: inset 0 0 0 1px var(--ms-tone), 0 0 0 3px color-mix(in srgb, var(--ms-tone) 28%, transparent); } /* The open family's views hang from a guide line in the family's tone. */ #modeMenu.ms-enhanced .ms-family-options { margin: 2px 0 0 21px; padding: 2px 0 10px 12px; border-left: 2px solid var(--ms-tone-rule); } #modeMenu.ms-enhanced .ms-family-options li.ms-option { min-height: 58px; } /* ---------- Recently ---------- */ #modeMenu.ms-enhanced .ms-recent { display: flex; align-items: center; gap: 10px; padding: 4px 22px 8px; flex-wrap: wrap; } #modeMenu.ms-enhanced .ms-recent-label { display: inline-flex; align-items: center; gap: 5px; font: 700 9px/1 var(--ms-font-kicker); letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); } #modeMenu.ms-enhanced .ms-recent-label svg { width: 12px; height: 12px; } #modeMenu.ms-enhanced .ms-recent-chips { display: flex; gap: 6px; flex-wrap: wrap; } #modeMenu.ms-enhanced .ms-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 999px; background: var(--ms-tone-wash); box-shadow: inset 0 0 0 1px var(--ms-tone-rule); font: 600 12px/1 var(--ms-font-name); color: var(--text); transition: background .16s, box-shadow .16s; } #modeMenu.ms-enhanced .ms-chip svg { width: 13px; height: 13px; color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-chip:hover { background: var(--ms-tone-wash-strong); box-shadow: inset 0 0 0 1px var(--ms-tone); } #modeMenu.ms-enhanced .ms-index-pane .ms-recent, #modeMenu.ms-enhanced .ms-contents ~ .ms-recent { padding-left: 0; padding-right: 0; } /* ---------- Footer ---------- */ #modeMenu.ms-enhanced .ms-footer { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 22px 11px; min-height: 42px; flex: none; } #modeMenu.ms-enhanced .ms-footer::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ms-current) 40%, transparent) 55%, var(--ms-current)); } #modeMenu.ms-enhanced .ms-tally { font: 600 9.5px/1.3 var(--ms-font-kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); } #modeMenu.ms-enhanced li.ms-access, #modeMenu.ms-enhanced button.ms-access { display: flex; align-items: center; gap: 7px; min-height: 30px; width: auto; padding: 3px 0; margin: 0; background: none; border: 0; border-radius: 0; color: var(--text-muted); font: 600 9.5px/1.3 var(--ms-font-kicker); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .16s; } #modeMenu.ms-enhanced .ms-access svg { width: 12px; height: 12px; color: var(--gold); } #modeMenu.ms-enhanced .ms-access:hover { color: var(--text); } /* ---------- Search results ---------- */ #modeMenu.ms-enhanced .ms-search-results { padding: 10px 16px 14px; } #modeMenu.ms-enhanced .ms-results-group + .ms-results-group { margin-top: 6px; } #modeMenu.ms-enhanced .ms-results-title { margin: 8px 0 2px 8px; font: 700 9.5px/1.2 var(--ms-font-kicker); letter-spacing: .18em; text-transform: uppercase; color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-empty { font-size: 12.5px; color: var(--text-muted); padding: 14px 22px 22px; margin: 0; font-style: italic; } /* ---------- Group heads (Index pane, Contents columns) ---------- */ #modeMenu.ms-enhanced .ms-group-heading { margin: 0 0 10px; } #modeMenu.ms-enhanced .ms-group-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ms-tone-rule); } #modeMenu.ms-enhanced .ms-group-num { font: 500 13px/1 var(--ms-font-name); font-style: italic; letter-spacing: .08em; color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-group-title { font: 500 23px/1.15 var(--ms-font-title); text-transform: none; color: var(--text); letter-spacing: -.01em; margin: 0; } #modeMenu.ms-enhanced .ms-intro { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 12px; } #modeMenu.ms-enhanced .ms-chapter { margin: 0 0 4px; font: 700 9.5px/1.2 var(--ms-font-kicker); letter-spacing: .2em; text-transform: uppercase; color: var(--ms-tone); } /* ---------- The Index ---------- */ #modeMenu.ms-enhanced[data-design="index"] { width: 720px; } #modeMenu.ms-enhanced[data-design="index"] .ms-body { overflow: hidden; } #modeMenu.ms-enhanced .ms-index { display: grid; grid-template-columns: 236px minmax(0, 1fr); max-height: 100%; min-height: 360px; overflow: hidden; } #modeMenu.ms-enhanced .ms-rail { min-height: 0; max-height: 440px; overflow: auto; padding: 14px 10px 14px 22px; background: linear-gradient(180deg, var(--ms-wash), transparent); border-right: 1px solid var(--ms-rule-gold); display: flex; flex-direction: column; gap: 2px; } #modeMenu.ms-enhanced .ms-category { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 7px 10px 7px 8px; border-radius: 8px; color: var(--text-muted); transition: background .16s, color .16s, box-shadow .16s; } #modeMenu.ms-enhanced .ms-category-emblem { display: grid; place-items: center; flex: none; width: 26px; height: 26px; color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-category-emblem svg { width: 16px; height: 16px; } #modeMenu.ms-enhanced .ms-category-title { flex: 1; font: 600 14.5px/1.2 var(--ms-font-name); } #modeMenu.ms-enhanced .ms-category small { font: 600 9px/1 var(--ms-font-kicker); letter-spacing: .1em; color: var(--text-muted); } #modeMenu.ms-enhanced .ms-category:hover { background: var(--ms-tone-wash); color: var(--text); } #modeMenu.ms-enhanced .ms-category[aria-pressed="true"] { background: var(--ms-tone-wash-strong); color: var(--text); box-shadow: inset 3px 0 0 var(--ms-tone), inset 0 0 0 1px var(--ms-tone-rule); } #modeMenu.ms-enhanced .ms-category[aria-pressed="true"] .ms-category-title, #modeMenu.ms-enhanced .ms-category[aria-pressed="true"] small { color: var(--ms-tone); } #modeMenu.ms-enhanced .ms-index-pane { padding: 18px 22px 16px 20px; min-width: 0; max-height: 440px; overflow: auto; overflow-x: hidden; } #modeMenu.ms-enhanced .ms-index-pane .ms-group-title { font-size: 26px; margin-bottom: 4px; } #modeMenu.ms-enhanced .ms-index-pane .ms-options { margin: 0 -8px; } /* ---------- Open Contents ---------- */ #modeMenu.ms-enhanced[data-design="contents"] { width: 960px; } #modeMenu.ms-enhanced .ms-contents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 18px 10px 14px; gap: 0; } #modeMenu.ms-enhanced .ms-column { padding: 0 12px; border-right: 1px solid var(--ms-rule); min-width: 0; } #modeMenu.ms-enhanced .ms-column:last-child { border: 0; } #modeMenu.ms-enhanced .ms-column .ms-group-title { font-size: 20px; } #modeMenu.ms-enhanced .ms-contents-group + .ms-contents-group { margin-top: 22px; } #modeMenu.ms-enhanced .ms-contents .ms-options { margin: 0 -6px; } #modeMenu.ms-enhanced .ms-contents .ms-option { padding: 7px 6px; min-height: 52px; gap: 10px; } #modeMenu.ms-enhanced .ms-contents .ms-emblem { width: 30px; height: 30px; } #modeMenu.ms-enhanced .ms-contents .ms-emblem svg { width: 15px; height: 15px; } #modeMenu.ms-enhanced .ms-contents .ms-option-name { font-size: 14px; } #modeMenu.ms-enhanced .ms-contents .ms-option-detail { font-size: 11px; } #modeMenu.ms-enhanced .ms-contents .ms-option-inside { display: none; } #modeMenu.ms-enhanced .ms-contents .ms-option-go { display: none; } #modeMenu.ms-enhanced .ms-contents ~ .ms-recent, #modeMenu.ms-enhanced .ms-recent + .ms-contents { padding-top: 6px; } /* ---------- Era shapes ---------- */ :root[data-era="artdeco"] #modeMenu.ms-enhanced { --ms-radius: 3px; --ms-emblem-radius: 2px; --ms-emblem-clip: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%); } :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-emblem { position: relative; box-shadow: none; background: color-mix(in srgb, var(--ms-tone) 70%, transparent); } :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-emblem::before { content: ""; position: absolute; inset: 1px; clip-path: var(--ms-emblem-clip); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ms-tone) 18%, transparent), transparent 72%), var(--surface); transition: background .18s; } :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-emblem svg { position: relative; } :root[data-era="artdeco"] #modeMenu.ms-enhanced li.ms-option:hover .ms-emblem, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-family-toggle:hover .ms-family-emblem { background: var(--ms-tone); box-shadow: none; } :root[data-era="artdeco"] #modeMenu.ms-enhanced li.ms-option:hover .ms-emblem::before { background: var(--ms-tone-wash-strong); } :root[data-era="artdeco"] #modeMenu.ms-enhanced li.ms-option[aria-selected="true"] .ms-emblem, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-family.is-open .ms-family-emblem { background: var(--ms-tone); box-shadow: none; } :root[data-era="artdeco"] #modeMenu.ms-enhanced li.ms-option[aria-selected="true"] .ms-emblem::before, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-family.is-open .ms-family-emblem::before { background: var(--ms-tone); } :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-quick .ms-option[aria-selected="true"] .ms-emblem { background: var(--ms-on-tone); } :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-quick .ms-option[aria-selected="true"] .ms-emblem::before { background: var(--ms-on-tone); } :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-quick .ms-option, :root[data-era="artdeco"] #modeMenu.ms-enhanced li.ms-option, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-category, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-chip, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-search, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-scope-switch, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-scope-tab, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-option-now, :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-family-title small { border-radius: 2px; } :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-kicker { letter-spacing: .3em; } :root[data-era="artdeco"] #modeMenu.ms-enhanced .ms-frame::before { left: 0; right: 0; } :root[data-era="midcentury"] #modeMenu.ms-enhanced { --ms-radius: 16px; --ms-emblem-radius: 11px; --ms-font-name: var(--font-display, system-ui, sans-serif); } :root[data-era="midcentury"] #modeMenu.ms-enhanced .ms-option-name, :root[data-era="midcentury"] #modeMenu.ms-enhanced .ms-category-title { font-weight: 600; font-size: 14.5px; letter-spacing: -.005em; } :root[data-era="midcentury"] #modeMenu.ms-enhanced .ms-family-title { font-weight: 600; font-size: 15.5px; letter-spacing: -.005em; } :root[data-era="midcentury"] #modeMenu.ms-enhanced .ms-quick .ms-option-name { font-size: 17.5px; font-weight: 700; } :root[data-era="midcentury"] #modeMenu.ms-enhanced .ms-quick .ms-option, :root[data-era="midcentury"] #modeMenu.ms-enhanced li.ms-option, :root[data-era="midcentury"] #modeMenu.ms-enhanced .ms-category { border-radius: 12px; } :root[data-era="editorial"] #modeMenu.ms-enhanced { --ms-radius: 0px; --ms-emblem-radius: 0; --ms-rule-gold: color-mix(in srgb, var(--text) 22%, transparent); --ms-gold-soft: color-mix(in srgb, var(--text) 45%, transparent); --ms-wash: color-mix(in srgb, var(--text) 4%, var(--surface)); --ms-wash-strong: color-mix(in srgb, var(--text) 8%, var(--surface)); --ms-font-title: var(--font-wordmark, var(--font-serif, Georgia, serif)); background: var(--surface); } :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-frame::before { display: none; } :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-header::after { background: var(--ms-current); } :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-footer::before { background: var(--text); } :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-kicker, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-chapter, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-results-title { letter-spacing: .26em; } /* Editorial medallions are a plain ruled square at rest; selected rows, open families and the solid plate keep their reversed fill. */ :root[data-era="editorial"] #modeMenu.ms-enhanced li.ms-option:not([aria-selected="true"]) .ms-emblem, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-family:not(.is-open) .ms-family-emblem { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ms-tone); } :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-quick .ms-option, :root[data-era="editorial"] #modeMenu.ms-enhanced li.ms-option, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-category, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-chip, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-search, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-icon-button, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-scope-switch, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-scope-tab, :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-option-now { border-radius: 0; } :root[data-era="editorial"] #modeMenu.ms-enhanced .ms-family-title small { border-radius: 0; } /* ---------- Developer Mode portal and small screens ---------- */ html.dev-open #modeMenu.ms-enhanced { z-index: 1550; } @media (min-width: 700px) { html.dev-open #modeMenu.ms-enhanced.mode-menu--dev-portal { position: fixed; top: 16px; right: 20px; left: auto; bottom: auto; max-height: calc(100dvh - 32px); } } @media (max-width: 1000px) { #modeMenu.ms-enhanced[data-design="contents"] { width: calc(100vw - 40px); } #modeMenu.ms-enhanced .ms-contents, #modeMenu.ms-enhanced[data-scope="workspace"] .ms-contents { grid-template-columns: repeat(2, minmax(0, 1fr)); } #modeMenu.ms-enhanced .ms-column:nth-child(2n) { border-right: 0; } } @media (max-width: 699.98px) { #modeMenu.ms-enhanced { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); top: auto; bottom: var(--ios-chrome-above-tab, 78px); width: auto; max-width: none; max-height: min(74dvh, calc(100dvh - var(--ios-chrome-above-tab, 78px) - 12px)); --ms-radius: 16px; padding: 0; animation-name: ms-open-sheet; } #modeMenu.ms-enhanced .ms-header { min-height: 64px; padding: 12px 18px 10px; } #modeMenu.ms-enhanced .ms-header::after, #modeMenu.ms-enhanced .ms-footer::before { left: 18px; right: 18px; } #modeMenu.ms-enhanced .ms-title { font-size: 27px; } #modeMenu.ms-enhanced .ms-icon-button { width: 42px; height: 42px; } #modeMenu.ms-enhanced .ms-search input { font-size: 16px; } #modeMenu.ms-enhanced .ms-quick { padding: 12px 18px 8px; gap: 7px; } #modeMenu.ms-enhanced .ms-quick .ms-option { min-height: 148px; padding: 12px 6px 10px; gap: 5px; } #modeMenu.ms-enhanced .ms-quick .ms-option-name { font-size: 17px; } #modeMenu.ms-enhanced .ms-quick .ms-option-detail { -webkit-line-clamp: 4; font-size: 10.5px; } #modeMenu.ms-enhanced .ms-quick .ms-option-now span { display: none; } #modeMenu.ms-enhanced .ms-quick .ms-option-now { padding: 5px; } #modeMenu.ms-enhanced .ms-quick .ms-emblem { width: 38px; height: 38px; } /* On a phone the Atlas / Workspace switch drops under the title as a full-width row. */ #modeMenu.ms-enhanced .ms-header { flex-wrap: wrap; row-gap: 8px; } #modeMenu.ms-enhanced .ms-heading { flex: 1; } #modeMenu.ms-enhanced .ms-scope-switch { order: 3; width: 100%; } #modeMenu.ms-enhanced .ms-scope-tab { flex: 1; text-align: center; padding: 8px 10px 7px; letter-spacing: .1em; } #modeMenu.ms-enhanced .ms-families { padding: 0 18px 8px; } #modeMenu.ms-enhanced .ms-family-toggle { min-height: 56px; } #modeMenu.ms-enhanced .ms-recent { padding: 2px 18px 6px; } #modeMenu.ms-enhanced .ms-footer { min-height: 44px; padding: 7px 18px 9px; } #modeMenu.ms-enhanced li.ms-access, #modeMenu.ms-enhanced button.ms-access { min-height: 34px; } #modeMenu.ms-enhanced .ms-family-options .ms-option { min-height: 54px; } #modeMenu.ms-enhanced .ms-option-inside { display: none; } #modeMenu.ms-enhanced .ms-option-go { display: none; } #modeMenu.ms-enhanced[data-design="index"], #modeMenu.ms-enhanced[data-design="contents"] { width: auto; } #modeMenu.ms-enhanced[data-design="index"] .ms-body { overflow: auto; } #modeMenu.ms-enhanced .ms-index { display: flex; flex-direction: column; min-height: 0; max-height: none; overflow: visible; } #modeMenu.ms-enhanced .ms-rail { flex-direction: row; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 10px 18px; border-right: 0; border-bottom: 1px solid var(--ms-rule-gold); scrollbar-width: none; background: var(--ms-wash); } #modeMenu.ms-enhanced .ms-rail::-webkit-scrollbar { display: none; } #modeMenu.ms-enhanced .ms-category { width: auto; flex: none; min-height: 40px; padding: 6px 12px 6px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ms-rule); white-space: nowrap; } #modeMenu.ms-enhanced .ms-category[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--gold); background: var(--surface); } #modeMenu.ms-enhanced .ms-category-title { font-size: 12.5px; } #modeMenu.ms-enhanced .ms-index-pane { padding: 14px 18px 12px; max-height: none; overflow: visible; } #modeMenu.ms-enhanced .ms-contents, #modeMenu.ms-enhanced[data-scope="workspace"] .ms-contents { grid-template-columns: minmax(0, 1fr); padding: 12px 18px; gap: 18px; } #modeMenu.ms-enhanced .ms-column { border: 0; padding: 0; } #modeMenu.ms-enhanced .ms-contents .ms-option-name { font-size: 14px; } #modeMenu.ms-enhanced .ms-contents .ms-option-go { display: block; } } @keyframes ms-open-sheet { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (max-width: 359.98px) { #modeMenu.ms-enhanced .ms-quick .ms-option { min-height: 96px; } #modeMenu.ms-enhanced .ms-quick .ms-option-inside, #modeMenu.ms-enhanced .ms-quick .ms-option-detail { display: none; } #modeMenu.ms-enhanced .ms-family-preview { display: none; } } @media (max-height: 500px) and (min-width: 700px) { #modeMenu.ms-enhanced { position: fixed; right: 20px; top: calc(var(--header-h, 70px) + 6px); max-height: calc(100dvh - var(--header-h, 70px) - 16px); } #modeMenu.ms-enhanced .ms-header { min-height: 56px; padding-top: 8px; padding-bottom: 6px; } #modeMenu.ms-enhanced .ms-index { min-height: 0; } #modeMenu.ms-enhanced .ms-rail, #modeMenu.ms-enhanced .ms-index-pane { max-height: calc(100dvh - var(--header-h, 70px) - 140px); } } @media (prefers-reduced-motion: reduce) { #modeMenu.ms-enhanced, #modeMenu.ms-enhanced li.ms-option { animation: none; } #modeMenu.ms-enhanced * { transition-duration: 0s !important; } }