/* mode identity art + modes frame head, from 10b_spotlight_modes.html */
/* =========================================================================== mode identity: art surface + emblem */
.mart { position: relative; overflow: hidden; isolation: isolate; }
.mart__pat { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mart .spot { left: 50%; top: -14px; bottom: 6px; width: 70%; margin-left: -35%; z-index: 1; }
.mart .fg { position: absolute; bottom: 7%; height: 76%; aspect-ratio: 164 / 188; translate: -50% 0; z-index: 2; }
.mart .fg.fig { width: auto; }
.mart .prop { position: absolute; z-index: 2; }
.mart .prop svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mart::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7%; z-index: 1; background: rgba(8, 6, 16, 0.45); border-top: 2px solid rgba(0, 0, 0, 0.35); }
.mart--flat::after { display: none; }
.emb { position: absolute; z-index: 3; display: grid; place-items: center; }
.emb svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(1px 3px 0 rgba(20, 16, 34, 0.6)); }
.emb--plate { border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(40, 34, 70, 0.92), rgba(13, 11, 22, 0.95)); border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--acc), 2px 5px 0 3px var(--ink); padding: 8px; }
.emb--plate svg { filter: none; }

/* =========================================================================== modes screen frame */
.mo .lay { grid-template-rows: 46px minmax(0, 1fr); row-gap: 12px; bottom: calc(var(--sb) + 10px); }
.mhead { display: flex; align-items: center; gap: 12px; min-width: 0; position: relative; z-index: 5; }
.mhead .back { width: auto; height: 46px; min-height: 46px; padding: 0 16px 0 10px; gap: 6px; border-radius: 14px; font-size: 19px; }  /* the labelled BACK pill on every page (decided 18 Oct) */
.mhead .back svg { width: 24px; height: 24px; }
.mhead .dtitle { font-size: 27px; }
.mhead .end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.netchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 7px; font: 400 14px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; background: linear-gradient(180deg, var(--panel-3), var(--panel)); border: 2.5px solid var(--ink); border-radius: 99px; box-shadow: 2px 3px 0 var(--ink); white-space: nowrap; }
.netchip svg { width: 18px; height: 18px; display: block; }
.netchip--off { display: none; background: linear-gradient(180deg, #4A2236, #34172A); }
.st-offline .netchip--on { display: none; }
.st-offline .netchip--off { display: inline-flex; }
.mbody { grid-row: 2; position: relative; z-index: 3; min-height: 0; }
.lockb { display: none; position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 6; align-items: center; gap: 6px; padding: 6px 11px 5px 8px; font: 400 15px/1 var(--f-display); letter-spacing: 0.05em; color: #fff; background: var(--ink); border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 9px; transform: rotate(-4deg); white-space: nowrap; }
.lockb svg { width: 20px; height: 20px; display: block; }
.st-offline [data-g="on"] .lockb { display: inline-flex; }
.st-offline [data-g="on"] .mart > :not(.lockb) { filter: grayscale(1) brightness(0.55); }
.st-offline [data-g="on"] { cursor: not-allowed; }
.st-offline [data-g="on"] .txl { opacity: 0.7; }
.tickp { display: none; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 4px; font: 400 13px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink); background: linear-gradient(180deg, #A8F5BF, #45D06F); border: 2.5px solid var(--ink); border-radius: 99px; white-space: nowrap; }
.tickp svg { width: 16px; height: 16px; display: block; }
.is-sel .tickp { display: inline-flex; }

/* ---------- M1 revised: tabs + hero + distinct tiles */