/* TOUCH_SHELL_2026Q4 - phones, tablets and touch iPads open on the model, with an Instagram-style tab bar. Active when has .tye-ts (set before first paint by the inline check in voice_ui.html and kept in step by touch_shell.js). The screen is . The CAD panel stays laid out full screen in every view and is only made invisible behind the chat, so the 3D canvas never has to recover from 0x0. */ html.tye-ts { --ts-bar-h: 58px; --ts-gap: 10px; --ts-safe: env(safe-area-inset-bottom, 0px); --ts-space: calc(var(--ts-bar-h) + var(--ts-gap) * 2 + var(--ts-safe)); --ts-surface: rgba(255, 255, 255, .94); --ts-line: rgba(17, 20, 28, .10); --ts-line2: rgba(17, 20, 28, .24); --ts-ink: #101114; --ts-ink2: #3b3f46; --ts-ink3: #636a76; --ts-press: rgba(17, 20, 28, .07); --ts-shadow: 0 10px 30px rgba(17, 20, 28, .12), 0 2px 8px rgba(17, 20, 28, .06); --ts-dot: #e5322a; --ts-sheet: #ffffff; --ts-scrim: rgba(10, 12, 16, .32); } html.tye-ts[data-theme="dark"] { --ts-surface: rgba(30, 31, 35, .92); --ts-line: rgba(255, 255, 255, .10); --ts-line2: rgba(255, 255, 255, .26); --ts-ink: #f2f3f5; --ts-ink2: #c9cdd4; --ts-ink3: #9aa1ad; --ts-press: rgba(255, 255, 255, .10); --ts-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35); --ts-dot: #ff4d42; --ts-sheet: #1c1d21; --ts-scrim: rgba(0, 0, 0, .55); } /* ---------- screens ---------- */ html.tye-ts body #app { flex-direction: column !important; height: 100dvh !important; } html.tye-ts body #left-pane { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100dvh !important; } html.tye-ts body #split-handle, html.tye-ts body #sb-resize-handle { display: none !important; } /* the CAD panel: always full screen, visible only on Model and Drawing */ html.tye-ts body #cad-panel { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; transform: none !important; transition: none !important; z-index: 9998 !important; box-shadow: none !important; border: 0 !important; } /* for the single synchronous togglePanel('cad') call touch_shell.js makes, the panel has to read as closed */ html.tye-ts.ts-probe body #cad-panel { display: none !important; } html.tye-ts[data-ts-view="chat"] body #cad-panel, html.tye-ts[data-ts-view="projects"] body #cad-panel { visibility: hidden !important; pointer-events: none !important; } html.tye-ts[data-ts-view="model"] body #cad-panel, html.tye-ts[data-ts-view="drawing"] body #cad-panel { visibility: visible !important; pointer-events: auto !important; } html.tye-ts[data-ts-view="model"] body #left-pane, html.tye-ts[data-ts-view="drawing"] body #left-pane { visibility: hidden !important; } /* Projects is a full page over the chat: the covered header, messages and composer leave the screen-reader and Tab order (the sidebar lives inside #left-pane and shows itself again); on the compact layout the chat's off-screen drawer does the same */ html.tye-ts[data-ts-view="projects"] body #left-pane { visibility: hidden !important; } html.tye-ts:not([data-ts-view="chat"]) body #send-btn { visibility: hidden !important; } html.tye-ts[data-ts-view="projects"] body #sidebar { visibility: visible !important; } @media (max-width: 1024px) { html.tye-ts[data-ts-view="chat"] body #sidebar { visibility: hidden !important; } } /* retired mobile chrome: the bar replaces the More menu, the drawer toggle, the CAD close X and the view tabs - the whole view-tab strip (VPTABS_OFF_2026Q4: with its tabs hidden it still took ~17 px on phones, and ~41 px on tablets for Fit, the zoom %, Help and the document pill: the rail has Fit, Profile has Help, Mode has the documents) */ html.tye-ts body #moss-mobile-more-btn, html.tye-ts body #moss-mobile-popup, html.tye-ts body #moss-spacer, html.tye-ts body #panel-picker, html.tye-ts body .moss-cad-close-btn, html.tye-ts body #cad-panel .vp-tabs, html.tye-ts body #fs-toggle, html.tye-ts body #fit-screen-btn, html.tye-ts body #fs-chat-btn, html.tye-ts body .fs-chat-dragbar, html.tye-ts body .fs-chat-resize { display: none !important; } html.tye-ts body.cad-open::before, html.tye-ts body.sidebar-open::before { display: none !important; } /* chat and projects leave room for the floating bar */ html.tye-ts body #bottom { padding-bottom: calc(var(--ts-space) + 4px) !important; } html.tye-ts.ts-kb body #bottom { padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important; } /* the model runs under the floating bar, as a feed does */ html.tye-ts body #cad-panel .vp-panel { padding-bottom: 0 !important; } /* SHEET_PILL_2026Q4: the Sketch Solid (#tye-ss-tabs) and Drawing (#tye-sheet-tabs) sheet strips float above the tab bar as a pill of sheet chips, in the bar's material. Both rebuild their chips on every render (Sketch Solid every 1.2 s), so this is selectors only. The prev / next arrows, the "SKETCH SOLID" label and the dividers go - the chips are the switch - and so does the hover-only delete x: tapping the Sketch Solid sheet you're on opens its Rename / Delete panel (touch_shell.js). The strips' own CSS is injected after this file; the orchestrator adds !important scroll rules. */ html.tye-ts body #tye-ss-tabs, html.tye-ts body #tye-sheet-tabs { left: 0 !important; right: 0 !important; top: auto !important; bottom: var(--ts-space) !important; width: max-content !important; max-width: min(440px, calc(100% - 24px)) !important; height: 44px !important; margin: 0 auto !important; box-sizing: border-box !important; padding: 4px !important; gap: 2px !important; align-items: center !important; background: var(--ts-surface) !important; border: 1px solid var(--ts-line) !important; border-radius: 22px !important; box-shadow: var(--ts-shadow) !important; -webkit-backdrop-filter: saturate(170%) blur(22px) !important; backdrop-filter: saturate(170%) blur(22px) !important; font: 500 13px/1 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; scrollbar-width: none !important; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } html.tye-ts body #tye-ss-tabs::-webkit-scrollbar, html.tye-ts body #tye-sheet-tabs::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } html.tye-ts body #tye-ss-tabs > .nav, html.tye-ts body #tye-ss-tabs > .divider, html.tye-ts body #tye-ss-tabs > .lbl, html.tye-ts body #tye-ss-tabs .tab .close, html.tye-ts body #tye-sheet-tabs > .nav, html.tye-ts body #tye-sheet-tabs > .divider, html.tye-ts body #tye-sheet-tabs > .spacer, html.tye-ts body #tye-sheet-tabs .tab .close { display: none !important; } /* (the :hover selectors outrank the strips' own hover and light-theme rules, which a tap leaves stuck on a touch screen) */ html.tye-ts body #tye-ss-tabs .tab, html.tye-ts body #tye-ss-tabs .tab:hover, html.tye-ts body #tye-sheet-tabs .tab, html.tye-ts body #tye-sheet-tabs .tab:hover { flex: none; align-self: center; box-sizing: border-box; height: 34px; min-height: 34px; max-width: 176px; margin: 0; padding: 0 14px; gap: 6px; border: 0; border-radius: 17px; box-shadow: none; background: transparent; color: var(--ts-ink2); font: inherit; letter-spacing: 0; cursor: pointer; touch-action: manipulation; transition: background .16s ease, color .16s ease; } html.tye-ts body #tye-ss-tabs .tab > span, html.tye-ts body #tye-sheet-tabs .tab > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; } /* (a line box taller than the 13px text: the ellipsis clip would cut descenders and Thai vowel and tone marks) */ html.tye-ts body #tye-ss-tabs .tab:active, html.tye-ts body #tye-sheet-tabs .tab:active { background: var(--ts-press); } @media (hover: hover) { html.tye-ts body #tye-ss-tabs .tab:not(.active):hover, html.tye-ts body #tye-sheet-tabs .tab:not(.active):hover { background: var(--ts-press); color: var(--ts-ink); } } /* the sheet on screen */ html.tye-ts body #tye-ss-tabs .tab.active, html.tye-ts body #tye-ss-tabs .tab.active:hover, html.tye-ts body #tye-sheet-tabs .tab.active, html.tye-ts body #tye-sheet-tabs .tab.active:hover { background: var(--ts-ink); color: var(--ts-sheet); font-weight: 600; } /* ... and on Sketch Solid it has options */ html.tye-ts body #tye-ss-tabs .tab.active::after { content: ''; flex: none; box-sizing: border-box; width: 6px; height: 6px; margin: -3px -3px 0 0; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .8; } /* + (a new Sketch Solid sheet and its Drawing sheet) stays at the end of the pill while the chips scroll under it */ html.tye-ts body #tye-ss-tabs .add-btn, html.tye-ts body #tye-ss-tabs .add-btn:hover { position: sticky; right: 0; z-index: 1; flex: none; align-self: center; box-sizing: border-box; width: 34px; height: 34px; min-height: 34px !important; margin: 0 0 0 2px; padding: 0; border: 0; border-radius: 17px; box-shadow: none; transform: none; cursor: pointer; touch-action: manipulation; color: var(--ts-ink); font-size: 0; line-height: 0; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat, linear-gradient(var(--ts-press), var(--ts-press)), var(--ts-sheet); } html.tye-ts body #tye-ss-tabs.ts-over .add-btn { box-shadow: 0 0 0 4px var(--ts-sheet); } html.tye-ts body #tye-ss-tabs .add-btn:active { transform: scale(.9); } html.tye-ts body #tye-ss-tabs .add-btn:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } /* the keyboard is up: the pill steps aside with the tab bar */ html.tye-ts.ts-kb body #tye-ss-tabs, html.tye-ts.ts-kb body #tye-sheet-tabs { visibility: hidden !important; } /* the floating cards (tree, feature editor, Pro Tools dock) end above a pill that is showing */ html.tye-ts[data-ts-view="model"]:has(#cad-panel:not(.tye-auto) #tye-ss-tabs.on), html.tye-ts[data-ts-view="drawing"]:has(#cad-panel:not(.tye-auto) #tye-sheet-tabs) { --ts-pill: 54px; } /* toasts rise above a pill that is showing */ html.tye-ts[data-ts-view="model"] body:has(#cad-panel:not(.tye-auto) #tye-ss-tabs.on) #toast, html.tye-ts[data-ts-view="model"] body:has(#cad-panel:not(.tye-auto) #tye-ss-tabs.on) #mem-toast, html.tye-ts[data-ts-view="drawing"] body:has(#cad-panel:not(.tye-auto) #tye-sheet-tabs) #toast, html.tye-ts[data-ts-view="drawing"] body:has(#cad-panel:not(.tye-auto) #tye-sheet-tabs) #mem-toast { bottom: calc(var(--ts-space) + 56px) !important; } /* TOUCH_RAIL_2026Q4: the bars the right rail stands in for. They stay in the DOM (the rail reads and clicks them). The Sketch Solid ribbon keeps its box - the sheet strip and the view cube measure it - so it is only made invisible (on phones too, where the old view-only rule took it out of layout, and the sheet strip with it); the rest go (the 3D canvas is resized by touch_shell.js, the 2D one follows its container). */ html.tye-ts body #tye-ribbon-2d, html.tye-ts body #tye-ribbon-ac, html.tye-ts body #cad-panel #vp-cad > .hdr, html.tye-ts body #cad-panel #vp-3d > .v3d-hdr, html.tye-ts body #cad-panel #tye-mode-bar { display: none !important; } html.tye-ts body #tye-solid-ribbon { visibility: hidden !important; pointer-events: none !important; } html.tye-ts body:has(#vp-btn-solid.active) #cad-panel:not(.tye-auto) #tye-solid-ribbon { display: flex !important; } /* what sits on the right edge moves clear of the rail */ html.tye-ts { --ts-rail-top: calc(env(safe-area-inset-top, 0px) + 52px); --ts-rail-gutter: calc(env(safe-area-inset-right, 0px) + 74px); } /* the view cube goes top left, under the ORBIT / SOLID chips (LEFT_TOOLS_RAIL_2026Q4: it stood beside a tablet's left tool rail, which is a rail panel now) */ html.tye-ts body #cad-panel .v3d-viewcube { left: calc(env(safe-area-inset-left, 0px) + 8px) !important; right: auto !important; top: calc(env(safe-area-inset-top, 0px) + 34px) !important; } /* (VPTABS_OFF_2026Q4: the pane tops are the screen top now - under a home-screen app's status bar) */ html.tye-ts body #cad-panel .v3d-badge { top: calc(env(safe-area-inset-top, 0px) + 10px); } html.tye-ts body #cad-panel #vp-cad > .sbar { margin-top: env(safe-area-inset-top, 0px); } html.tye-ts body .sk-panel, html.tye-ts body .sk-ed2, html.tye-ts body #tye-pdm-panel, html.tye-ts body #tye-mates-panel, html.tye-ts body #tye-cstr-panel, html.tye-ts body #tye-explode-modal, html.tye-ts body #tye-clearance-panel, html.tye-ts body #tye-cfdpro-panel { right: var(--ts-rail-gutter) !important; max-width: calc(100vw - var(--ts-rail-gutter) - 10px) !important; } /* JS-centred tool dialogs (Multi-View and friends) stay clear of the rail too */ html.tye-ts body .tye-idlg.idlg-panel { max-width: calc(100vw - var(--ts-rail-gutter) - 26px) !important; } html.tye-ts body #tye-pro-dock { left: auto !important; right: var(--ts-rail-gutter) !important; top: var(--ts-rail-top) !important; max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - var(--ts-pill, 0px) - 8px) !important; } /* LEFT_TOOLS_RAIL_2026Q4: the left tool rails' panels open where the rail was - bottom left, above the tab bar (and a sheet pill) - clear of the rail, the Pro Tools dock and the tree on the right; they sat at desktop offsets on the right, the Mates one reaching under the tab bar. One shows at a time (touch_shell.js clearLeft). Those inside the model / drawing pane scroll as a whole when the screen is short, rather than clip their footer or fold their list: */ html.tye-ts body #tye-mates-panel, html.tye-ts body #tye-motion-panel, html.tye-ts body #tye-cstr-panel, html.tye-ts body #tye-cmp-panel, html.tye-ts body #tye-configs-panel { position: absolute !important; top: auto !important; right: auto !important; margin: 0 !important; transform: none !important; left: calc(env(safe-area-inset-left, 0px) + 8px) !important; bottom: calc(var(--ts-space) + var(--ts-pill, 0px)) !important; max-width: calc(100vw - env(safe-area-inset-left, 0px) - var(--ts-rail-gutter) - 8px) !important; max-height: calc(100% - var(--ts-rail-top) - var(--ts-space) - var(--ts-pill, 0px) - 8px) !important; overflow-y: auto !important; overscroll-behavior: contain; } html.tye-ts body #tye-mates-panel .list, html.tye-ts body #tye-motion-panel .list, html.tye-ts body #tye-cstr-panel .list, html.tye-ts body #tye-configs-panel .list { flex: 1 1 auto !important; min-height: 96px !important; } /* (a panel too short for its own fixed rows scrolls as a whole: its title bar, with the close, stays put) */ html.tye-ts body :is(#tye-mates-panel, #tye-motion-panel, #tye-cstr-panel, #tye-cmp-panel, #tye-configs-panel) > :first-child { position: sticky !important; top: 0 !important; z-index: 1 !important; background: var(--tp-surface) !important; } /* ...and the body-level Section / Explode (phase_section_panel.js), FEA's result card (cad_sketch3d.js) and CFD Pro's Viz Pro card (phase_cfd_viz_pro.js), over the model's cards (tree 9000, feature editor 9001), under toasts, the Profile sheet and pages */ html.tye-ts body #tye-section-dialog, html.tye-ts body #tye-explode-dialog, html.tye-ts body .fea-dlg-result, html.tye-ts body #tye-cfd-ctrl { top: auto !important; right: auto !important; transform: none !important; z-index: 9005 !important; left: calc(env(safe-area-inset-left, 0px) + 8px) !important; bottom: calc(var(--ts-space) + var(--ts-pill, 0px)) !important; max-width: calc(100vw - env(safe-area-inset-left, 0px) - var(--ts-rail-gutter) - 8px) !important; max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - var(--ts-pill, 0px) - 8px) !important; overflow-y: auto !important; } /* (the Viz Pro card keeps its header and footer, its body scrolls) */ html.tye-ts body #tye-cfd-ctrl { display: flex !important; flex-direction: column !important; overflow-y: hidden !important; } html.tye-ts body #tye-cfd-ctrl > .hdr, html.tye-ts body #tye-cfd-ctrl > .foot { flex: none !important; } html.tye-ts body #tye-cfd-ctrl > .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } html.tye-ts body #tye-cfd-ctrl .hdr-btn { min-width: 36px !important; min-height: 36px !important; } /* FEA's result card and the Viz Pro card stay while another tool's card is up in their corner, and come back when it closes (the tools close each other; these two are results to go back to) */ html.tye-ts[data-ts-view="model"] body:has(#tye-section-dialog:not([style*="display: none"]), #tye-explode-dialog:not([style*="display: none"]), #tye-mates-panel[style*="flex"], #tye-motion-panel[style*="flex"], #tye-cfdpro-panel.open) :is(.fea-dlg-result, .fea-dlg-progress, #tye-cfd-ctrl), html.tye-ts[data-ts-view="drawing"] body:has(#tye-cstr-panel, #tye-configs-panel, #tye-cmp-panel, #tye-pdm-panel) :is(.fea-dlg-result, .fea-dlg-progress, #tye-cfd-ctrl) { visibility: hidden !important; pointer-events: none !important; } /* the other way round: Mates or Motion opened from Tools > Assembly or from chat never runs clearLeft, so the dialog in that corner steps aside instead (its cut or spread stays on, as Done leaves it) */ html.tye-ts[data-ts-view="model"] body:has(#tye-mates-panel[style*="flex"], #tye-motion-panel[style*="flex"]) :is(#tye-section-dialog, #tye-explode-dialog) { visibility: hidden !important; pointer-events: none !important; } html.tye-ts body .fea-dlg-progress { bottom: calc(var(--ts-space) + var(--ts-pill, 0px)) !important; z-index: 9005 !important; max-width: calc(100vw - 24px) !important; } /* FEA's material picker: centred in the space left of the rail, between the top and the tab bar */ html.tye-ts body .fea-dlg-mat { z-index: 9005 !important; transform: translate(-50%, -50%) !important; left: calc((env(safe-area-inset-left, 0px) + 8px + 100vw - var(--ts-rail-gutter)) / 2) !important; top: calc(var(--ts-rail-top) + (100dvh - var(--ts-rail-top) - var(--ts-space)) / 2) !important; width: min(460px, calc(100vw - env(safe-area-inset-left, 0px) - var(--ts-rail-gutter) - 8px)) !important; max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - 8px) !important; } /* the Pro Tools dock (z 99999) steps aside while FEA or Section / Explode is up on Model (those stay open, out of sight, on the other screens): it would cover Run FEA, a dialog's X */ html.tye-ts[data-ts-view="model"] body:has(.fea-dlg-mat, .fea-dlg-progress, #tye-section-dialog:not([style*="display: none"]), #tye-explode-dialog:not([style*="display: none"])) #tye-pro-dock, /* ...and to Versions / CFD Pro, which now open at its own corner (their close would tap the dock's) */ html.tye-ts body:has(#tye-pdm-panel, #tye-cfdpro-panel.open) #tye-pro-dock, /* PRODOCK_YIELDS_TO_TREE_2026Q4: ...and to the Solid tree and its feature editor, which share the dock's column. MEASURED on a tablet (834x1112): the dock is [440,52,320,920] and .sk-panel is [448,96,312,892] - a 312x876 overlap - so at z 99999 over 9000 it covered the WHOLE tree. Not just Cut / Union / Intersect: a finger hit-tests, so the row long press and the A/B double tap landed on the dock too. A phone never had this (:516 takes the dock away below 640px), so it was the 641-1024px band that was left. .sk-panel is closed with style.display='none' (phase_solid_kernel.js:9598) and .sk-ed2 is created on demand (:5906) with no hidden state, so each is tested the way it is actually hidden. The tree wins while it is OPEN; closing it brings the dock straight back. */ html.tye-ts body:has(.sk-panel:not([style*="display: none"]), .sk-ed2) #tye-pro-dock, /* PROPERTIES_PANEL_V4_2026Q4: ...and to the Properties / Drawing card, which shares that column too - measured on a tablet while photographing the redesign, the dock covered it whole. */ html.tye-ts body:has(#v3d-rp.rpd-open, #rp.rpd-open) #tye-pro-dock{ visibility: hidden !important; pointer-events: none !important; } /* Section / Explode in the shell's colours; a finger can't drag them, so no grip; controls sized for a finger (by id: phase_section_panel.js scopes every rule to the dialog ids) */ html.tye-ts body #tye-section-dialog, html.tye-ts body #tye-explode-dialog { --secp-bg: var(--ts-sheet); --secp-line: var(--ts-line); --secp-ink: var(--ts-ink); --secp-ink2: var(--ts-ink2); --secp-ink3: var(--ts-ink3); --secp-card: var(--ts-press); border-radius: 18px !important; box-shadow: var(--ts-shadow) !important; } html.tye-ts body :is(#tye-section-dialog, #tye-explode-dialog) .fea-mgrip { display: none !important; } html.tye-ts body :is(#tye-section-dialog, #tye-explode-dialog) .fea-mhd { cursor: default !important; } html.tye-ts body :is(#tye-section-dialog, #tye-explode-dialog) .fea-mx { width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 20px !important; } html.tye-ts body :is(#tye-section-dialog, #tye-explode-dialog) .fea-mx i { font-size: 18px !important; } html.tye-ts body :is(#tye-section-dialog, #tye-explode-dialog) :is(.fea-btn, .fea-btn-primary) { min-height: 44px !important; border-radius: 12px !important; font-size: 14px !important; } html.tye-ts body :is(#tye-section-dialog, #tye-explode-dialog) :is(.v3d-sect-ax, .v3d-sect-ibtn, .secp-qbtn) { min-height: 40px !important; } html.tye-ts body :is(#tye-section-dialog, #tye-explode-dialog) input[type=range] { height: 44px !important; } html.tye-ts body :is(#tye-section-dialog, #tye-explode-dialog) input[type=range]::-webkit-slider-thumb { width: 24px !important; height: 24px !important; margin-top: -9.5px !important; } html.tye-ts body :is(#tye-section-dialog, #tye-explode-dialog) input[type=range]::-moz-range-thumb { width: 18px !important; height: 18px !important; } /* the body-level ones start at the rail's top and end above the tab bar (they reached under it on a short screen) */ html.tye-ts body #tye-pdm-panel { top: var(--ts-rail-top) !important; bottom: auto !important; height: min(600px, calc(100dvh - var(--ts-rail-top) - var(--ts-space) - var(--ts-pill, 0px) - 8px)) !important; } html.tye-ts body #tye-cfdpro-panel { top: var(--ts-rail-top) !important; bottom: auto !important; max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - var(--ts-pill, 0px) - 8px) !important; } /* PDM's name prompts (+ Branch, a commit's Tag: a body-level .tye-popup at z 9500) come up over the panel (z 9999) */ html.tye-ts body:has(> .tye-popup) #tye-pdm-panel { z-index: 9400 !important; } /* the feature editor takes this column on a phone, from the top: the result cards step aside for its Apply row */ @media (max-width: 640px), (max-height: 500px) { html.tye-ts body:has(.sk-ed2) :is(.fea-dlg-result, .fea-dlg-progress, #tye-cfd-ctrl, #tye-section-dialog, #tye-explode-dialog) { visibility: hidden !important; pointer-events: none !important; } } /* rows whose delete shows on hover only: there is no hover here */ html.tye-ts body #tye-mates-panel .item .del, html.tye-ts body #tye-configs-panel .item .del, html.tye-ts body #tye-cstr-panel .item .del { opacity: .7; } /* a dialog opened from the rail must not come up under the dock (z 99999) */ html.tye-ts body:has(.sk-modal-ov, .sp-panel.open, .pmi-panel.open, .moss-popup-ov, .tye-share-ov, .bs-popover.open) #tye-pro-dock { visibility: hidden !important; pointer-events: none !important; } /* PROPERTIES_FLOAT_2026Q4 - three rules removed here, all of them correct for a right-edge drawer and wrong for a floating card. The handle no longer floats at the bottom right (it is a button in the bottom toolbar, and on touch that whole bar is hidden - the rail's Mode panel is the way in), and the card takes no width from the right edge, so neither #ts-quick nor #ts-pick has anything to step aside from. The phone rule that hid the rail and the tab bar went with the sheet it was written for; the card is placed clear of the rail by the block at the end of this file instead. */ /* full-screen tool pages (2D Drawing from 3D, flat pattern): their header rows wrap on a narrow screen - otherwise Close is off the edge and a touch screen has no Escape - and they belong to the CAD screens only */ html.tye-ts body #tye-drawing-panel > div:first-child, html.tye-ts body #tye-flat-panel > div:first-child { flex-wrap: wrap !important; row-gap: 8px !important; } html.tye-ts:not([data-ts-view="model"]):not([data-ts-view="drawing"]) body #tye-drawing-panel, html.tye-ts:not([data-ts-view="model"]):not([data-ts-view="drawing"]) body #tye-flat-panel, html.tye-ts:not([data-ts-view="model"]):not([data-ts-view="drawing"]) body #tye-explode-modal { display: none !important; } /* LEFT_TOOLS_RAIL_2026Q4: the 3D tools' cards belong to Model (on Drawing they sat where the Document tools panels open), the body-level CAD panels to the CAD screens; each comes back as it was */ html.tye-ts:not([data-ts-view="model"]) body #tye-section-dialog, html.tye-ts:not([data-ts-view="model"]) body #tye-explode-dialog, html.tye-ts:not([data-ts-view="model"]) body .fea-dlg-mat, html.tye-ts:not([data-ts-view="model"]) body .fea-dlg-result, html.tye-ts:not([data-ts-view="model"]) body .fea-dlg-progress { display: none !important; } html.tye-ts:not([data-ts-view="drawing"]) body #tye-pdm-panel, html.tye-ts:not([data-ts-view="drawing"]) body #tye-pdm-drawer-bg, html.tye-ts:not([data-ts-view="model"]) body #tye-cfdpro-panel, html.tye-ts:not([data-ts-view="model"]) body #tye-cfd-ctrl { visibility: hidden !important; pointer-events: none !important; } /* the drawer's slide would play on every tab change */ html.tye-ts body aside#sidebar { transition: none !important; animation: none !important; } /* empty Model on a phone: the next step is the Chat */ html.tye-ts body #v3d-empty .ts-empty-cta { display: none; } @media (max-width: 640px), (max-height: 500px) { /* (cad_3d.css styles every .v3d-empty button and .ti with !important: a red CTA and a 48px icon tile) */ html.tye-ts body #v3d-empty .ts-empty-cta { display: inline-flex !important; align-items: center; gap: 8px; margin: 18px auto 0 !important; min-height: 44px; padding: 0 18px !important; border-radius: 22px !important; border: 0 !important; background: var(--ts-ink) !important; color: var(--ts-sheet) !important; font: 600 14px/1 Inter, system-ui, sans-serif !important; box-shadow: none !important; transition: none !important; transform: none !important; cursor: pointer; pointer-events: auto !important; } html.tye-ts body #v3d-empty .ts-empty-cta .ti { font-size: 18px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; } } html.tye-ts body #toast { bottom: calc(var(--ts-space) + 12px) !important; z-index: 9010 !important; } html.tye-ts body #mem-toast { bottom: calc(var(--ts-space) + 12px) !important; z-index: 9010 !important; } html.tye-ts body #mem-toast:not(.show) { transform: translateX(-50%) translateY(calc(var(--ts-space) + 100px)); } /* header in the chat, on the compact (<=1024px) header only: the drawer toggle goes (Projects replaces it) and a compose button takes the right edge. Wider touch screens keep the desktop header, its sidebar and toggle. */ html.tye-ts body header > #ts-compose { display: none !important; } @media (max-width: 1024px) { html.tye-ts body #sb-toggle { display: none !important; } html.tye-ts body header > #ts-compose { display: inline-flex !important; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; border-radius: 20px; background: transparent; color: var(--ts-ink); font-size: 22px; cursor: pointer; z-index: 6; } html.tye-ts body header > #ts-compose:active { background: var(--ts-press); } } /* Projects: the chats list as a full page */ html.tye-ts[data-ts-view="projects"] body #sidebar { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100dvh !important; transform: none !important; z-index: 9996 !important; box-shadow: none !important; border: 0 !important; padding: 0 0 var(--ts-space) !important; background: var(--bg, #fff) !important; overflow: hidden !important; } html.tye-ts[data-ts-view="projects"] body #sidebar #sidebar-footer, html.tye-ts[data-ts-view="projects"] body #sidebar #sb-sessions-rail { display: none !important; } html.tye-ts[data-ts-view="projects"] body #sidebar #session-list { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } html.tye-ts body #ts-proj-head { display: none; } html.tye-ts[data-ts-view="projects"] body #ts-proj-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 6px; } html.tye-ts body #ts-proj-head h2 { margin: 0; font: 600 22px/1.2 Inter, system-ui, sans-serif; color: var(--ts-ink); letter-spacing: -.01em; } html.tye-ts body #ts-proj-head button { width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; color: var(--ts-ink); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } html.tye-ts body #ts-proj-head button:active { background: var(--ts-press); } /* ---------- the right rail (TOUCH_RAIL_2026Q4) ---------- */ /* Tools / Drawing menu / Feature tree / Fit / 3D / 3D view / Mode, on the Model and Drawing screens at every size. Above the tab bar (8500), below the auth modal (9000), toasts and the Profile sheet. */ html.tye-ts body #ts-quick { display: none; } html.tye-ts[data-ts-view="model"] body #ts-quick, html.tye-ts[data-ts-view="drawing"] body #ts-quick, html.tye-ts[data-ts-view="projects"] body #ts-quick { display: flex; flex-direction: column; align-items: center; gap: 2px; position: fixed; z-index: 8600; box-sizing: border-box; right: calc(env(safe-area-inset-right, 0px) + 10px); top: var(--ts-rail-top); max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - 6px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 5px; border-radius: 27px; background: var(--ts-surface); border: 1px solid var(--ts-line); box-shadow: var(--ts-shadow); -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } html.tye-ts body #ts-quick::-webkit-scrollbar { display: none; } html.tye-ts body #ts-quick.ts-more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); } html.tye-ts body #ts-quick button { flex: none; width: 44px; height: 44px; min-height: 44px !important; margin: 0; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--ts-ink2); font-size: 22px; line-height: 1; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; transition: background .16s ease, color .16s ease, transform .12s ease; } html.tye-ts body #ts-quick button[hidden] { display: none !important; } html.tye-ts body #ts-quick button i { pointer-events: none; } html.tye-ts body #ts-quick button:active { transform: scale(.9); } html.tye-ts body #ts-quick button[aria-expanded="true"], html.tye-ts body #ts-quick button[aria-pressed="true"] { background: var(--ts-press); color: var(--ts-ink); } html.tye-ts body #ts-quick button[data-tsq="tree"][aria-pressed="true"] { color: var(--ts-dot); } html.tye-ts body #ts-quick button:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body #ts-quick .ts-rail-3d { font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; pointer-events: none; } html.tye-ts body #ts-quick button[aria-pressed="true"] .ts-rail-3d { color: var(--ts-dot); } /* the panels a rail button opens: columns placed by touch_shell.js, cascading right to left */ #ts-casc[hidden], #ts-casc-bg[hidden] { display: none !important; } html.tye-ts body #ts-casc-bg { position: fixed; inset: 0; z-index: 8450; background: transparent; } /* (its left padding is the left safe-area inset, read by touch_shell.js to keep columns off a landscape notch) */ html.tye-ts body #ts-casc { position: fixed; inset: 0; z-index: 8610; pointer-events: none; padding-left: env(safe-area-inset-left, 0px); } html.tye-ts body #ts-casc .ts-cp { position: fixed; pointer-events: auto; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - 6px); background: var(--ts-sheet); color: var(--ts-ink); border: 1px solid var(--ts-line); border-radius: 18px; box-shadow: var(--ts-shadow); font-family: Inter, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; } html.tye-ts body #ts-casc .ts-cp.is-new { animation: tsCpIn .2s cubic-bezier(.32, .72, 0, 1); } @keyframes tsCpIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } /* narrow screens: the columns before the open one fold into spines - a way back to them */ html.tye-ts body #ts-casc .ts-cp-spine { display: none; } html.tye-ts body #ts-casc .ts-cp.is-covered { border-radius: 20px; } html.tye-ts body #ts-casc .ts-cp.is-covered > .ts-cp-top, html.tye-ts body #ts-casc .ts-cp.is-covered > .ts-cp-list { display: none; } html.tye-ts body #ts-casc .ts-cp.is-covered > .ts-cp-spine { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 auto; width: 100%; min-height: 0; margin: 0; padding: 12px 0; border: 0; background: transparent; color: var(--ts-ink2); cursor: pointer; overflow: hidden; font: 600 13px/1 Inter, system-ui, sans-serif; } html.tye-ts body #ts-casc .ts-cp.is-covered > .ts-cp-spine:active { background: var(--ts-press); } html.tye-ts body #ts-casc .ts-cp-spine i { font-size: 16px; flex: none; } html.tye-ts body #ts-casc .ts-cp-spine span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; } html.tye-ts body #ts-casc .ts-cp-top { display: flex; align-items: center; gap: 2px; flex: none; min-height: 46px; padding: 0 12px 0 4px; border-bottom: 1px solid var(--ts-line); } html.tye-ts body #ts-casc .ts-cp-back { flex: none; width: 40px; height: 40px; min-height: 40px !important; margin: 0; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--ts-ink2); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } html.tye-ts body #ts-casc .ts-cp-back:active { background: var(--ts-press); } html.tye-ts body #ts-casc .ts-cp-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; letter-spacing: -.005em; } html.tye-ts body #ts-casc .ts-cp-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px; } html.tye-ts body #ts-casc .ts-cp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px !important; margin: 0; padding: 6px 10px; box-sizing: border-box; border: 0; border-radius: 12px; background: transparent; color: var(--ts-ink); text-align: left; cursor: pointer; touch-action: manipulation; font: 500 14px/1.25 Inter, system-ui, sans-serif; } html.tye-ts body #ts-casc .ts-cp-row:active { background: var(--ts-press); } html.tye-ts body #ts-casc .ts-cp-row:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body #ts-casc .ts-cp-row.is-sel { background: var(--ts-press); font-weight: 600; } html.tye-ts body #ts-casc .ts-cp-row[aria-disabled="true"], html.tye-ts body #ts-casc .ts-cp-row.is-locked { opacity: .42; } html.tye-ts body #ts-casc .ts-cp-chev { flex: none; width: 14px; font-size: 14px; color: var(--ts-ink3); margin-right: -4px; } html.tye-ts body #ts-casc .ts-cp-ic { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--ts-ink2); font-size: 20px; line-height: 1; } html.tye-ts body #ts-casc .ts-cp-ic > svg { width: 20px !important; height: 20px !important; } html.tye-ts body #ts-casc .ts-cp-ic > i[class*="ti-"] { font-size: 20px !important; width: auto !important; height: auto !important; margin: 0 !important; line-height: 1; } /* a bare painted as a swatch (3D view > Material) keeps a size */ html.tye-ts body #ts-casc .ts-cp-ic > i:not([class*="ti-"]) { width: 18px !important; height: 18px !important; margin: 0 !important; } html.tye-ts body #ts-casc .ts-cp-l { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } html.tye-ts body #ts-casc .ts-cp-s { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--ts-ink3); } /* the tool in use, the ribbon tab that is showing */ html.tye-ts body #ts-casc .ts-cp-row.is-act .ts-cp-ic { color: var(--ts-dot); } html.tye-ts body #ts-casc .ts-cp-row.is-danger, html.tye-ts body #ts-casc .ts-cp-row.is-danger .ts-cp-ic { color: var(--ts-dot); } html.tye-ts body #ts-casc .ts-cp-row.is-act::after, html.tye-ts body #ts-casc .ts-cp-row.is-cur:not(.is-sel)::after { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ts-dot); } /* on / off */ html.tye-ts body #ts-casc .ts-cp-sw { flex: none; position: relative; width: 36px; height: 22px; border-radius: 11px; background: rgba(17, 20, 28, .22); transition: background .16s ease; } html.tye-ts[data-theme="dark"] body #ts-casc .ts-cp-sw { background: rgba(255, 255, 255, .24); } /* (the knob takes the panel colour, so it still shows on an "on" track in either theme) */ html.tye-ts body #ts-casc .ts-cp-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ts-sheet); box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: transform .16s ease; } html.tye-ts body #ts-casc [aria-checked="true"] .ts-cp-sw { background: var(--ts-ink); } html.tye-ts body #ts-casc [aria-checked="true"] .ts-cp-sw::after { transform: translateX(14px); } @media (prefers-reduced-motion: reduce) { html.tye-ts body #ts-casc .ts-cp-sw, html.tye-ts body #ts-casc .ts-cp-sw::after { transition: none; } } html.tye-ts body #ts-casc .ts-cp-h { padding: 12px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ts-ink3); } html.tye-ts body #ts-casc .ts-cp-h:first-child { padding-top: 4px; } html.tye-ts body #ts-casc .ts-cp-sep { height: 1px; margin: 6px 10px; background: var(--ts-line); } html.tye-ts body #ts-casc .ts-cp-note { margin: 0; padding: 8px 10px; font-size: 12px; line-height: 1.35; color: var(--ts-ink3); } html.tye-ts body #ts-casc .ts-cp-in { display: flex; align-items: center; gap: 10px; padding: 4px 10px; font-size: 13px; color: var(--ts-ink2); } html.tye-ts body #ts-casc .ts-cp-in input { flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ts-line); background: transparent; color: var(--ts-ink); font: 500 16px/1 Inter, system-ui, sans-serif; } html.tye-ts body #ts-casc .ts-cp-in input:focus { outline: 2px solid var(--ts-ink); outline-offset: -1px; } html.tye-ts body #ts-casc .ts-cp-in input:disabled { opacity: .45; } @media (prefers-reduced-motion: reduce) { html.tye-ts body #ts-casc .ts-cp.is-new { animation: none; } } /* cards that float above the rail's layer step aside while a panel is open */ html.tye-ts.ts-casc-open body .sk-panel, html.tye-ts.ts-casc-open body .sk-ed2, html.tye-ts.ts-casc-open body .sk-editor, html.tye-ts.ts-casc-open body #tye-pro-dock, html.tye-ts.ts-casc-open body #tye-pdm-panel, html.tye-ts.ts-casc-open body #tye-clearance-panel, html.tye-ts.ts-casc-open body #tye-cfdpro-panel, html.tye-ts.ts-casc-open body .tye-idlg.idlg-panel, html.tye-ts.ts-casc-open body #tye-section-dialog, html.tye-ts.ts-casc-open body #tye-explode-dialog, html.tye-ts.ts-casc-open body .fea-dlg-mat, html.tye-ts.ts-casc-open body .fea-dlg-result, html.tye-ts.ts-casc-open body .fea-dlg-progress, html.tye-ts.ts-casc-open body #tye-cfd-ctrl, html.tye-ts.ts-casc-open body .bs-popover { visibility: hidden !important; pointer-events: none !important; } /* LEFT_TOOLS_RAIL_2026Q4: the left tool rails and their collapse handles are the rail's Analysis and simulation / Document tools panels on every touch size (a tablet showed them beside the model in their desktop look) */ html.tye-ts body #tye-cad-rail, html.tye-ts body #tye-drw-rail, html.tye-ts body #tye-cad-rail-open, html.tye-ts body #tye-drw-rail-open { display: none !important; } @media (max-width: 640px), (max-height: 500px) { /* the tree, the feature editor and the Pro Tools dock take the width left of the rail, above the tab bar (fixed there: the tree's header drag would otherwise push it over the bar) */ html.tye-ts body .sk-panel, html.tye-ts body .sk-ed2, html.tye-ts body #tye-pro-dock { left: calc(env(safe-area-inset-left, 0px) + 10px) !important; right: var(--ts-rail-gutter) !important; width: auto !important; max-width: none !important; top: var(--ts-rail-top) !important; max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - var(--ts-pill, 0px) - 8px) !important; } /* the dock was never shown on a phone, so nobody closed it: it stays shut until opened from the rail's Mode panel */ html.tye-ts:not(.ts-pro-open) body #tye-pro-dock { display: none !important; } /* tool panels the rail can open keep their header (title + close): the view-only rule hid every .hdr in the CAD */ html.tye-ts body #cad-panel [id^="tye-"][id$="-panel"] > .hdr { display: flex !important; } /* (LEFT_TOOLS_RAIL_2026Q4: the Mates panel's phone rule joined the left tool rails' panels, after this block) */ /* phones draw now: the sheet strips come back (the old view-only rule hid them) */ html.tye-ts body #cad-panel:not(.tye-auto) #tye-ss-tabs.on { display: flex !important; } html.tye-ts[data-ts-view="drawing"] body #cad-panel:not(.tye-auto) #tye-sheet-tabs { display: flex !important; } } /* LEFT_TOOLS_RAIL_2026Q4: an upright phone gives the left tool rails' panels the width left of the rail (the Mates panel spanned the screen, under the rail that covered its close button); on its side they keep their own width */ @media (max-width: 640px) { html.tye-ts body #tye-mates-panel, html.tye-ts body #tye-motion-panel, html.tye-ts body #tye-cstr-panel, html.tye-ts body #tye-cmp-panel, html.tye-ts body #tye-configs-panel, html.tye-ts body #tye-section-dialog, html.tye-ts body #tye-explode-dialog, html.tye-ts body .fea-dlg-result, html.tye-ts body #tye-cfd-ctrl { right: var(--ts-rail-gutter) !important; width: auto !important; } html.tye-ts body .fea-dlg-progress { left: calc(env(safe-area-inset-left, 0px) + 8px) !important; right: var(--ts-rail-gutter) !important; width: auto !important; max-width: none !important; transform: none !important; } /* (Motion's add row: the body picker gets a line of its own, or it is left three letters wide) */ html.tye-ts body #tye-motion-panel .addrow { flex-wrap: wrap !important; } html.tye-ts body #tye-motion-panel .addrow .bsel { flex: 1 1 100% !important; } } /* a phone on its side: a slimmer rail, so every button fits between the top and the tab bar */ @media (max-height: 500px) { html.tye-ts { --ts-rail-top: calc(env(safe-area-inset-top, 0px) + 44px); } html.tye-ts[data-ts-view="model"] body #ts-quick, html.tye-ts[data-ts-view="drawing"] body #ts-quick, html.tye-ts[data-ts-view="projects"] body #ts-quick { padding: 3px; gap: 0; border-radius: 22px; } html.tye-ts body #ts-quick button { width: 38px; height: 38px; min-height: 38px !important; font-size: 20px; border-radius: 19px; } /* LEFT_TOOLS_RAIL_2026Q4: Versions' own rows need more height than this screen leaves, so the panel scrolls */ html.tye-ts body #tye-pdm-panel { height: auto !important; max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - var(--ts-pill, 0px) - 8px) !important; overflow-y: auto !important; overscroll-behavior: contain; } html.tye-ts body #tye-pdm-panel .timeline { flex: 1 0 auto !important; min-height: 96px; } } /* floating CAD cards and handles belong to the CAD screens only */ html.tye-ts:not([data-ts-view="model"]):not([data-ts-view="drawing"]) body .sk-panel, html.tye-ts:not([data-ts-view="model"]):not([data-ts-view="drawing"]) body .sk-ed2, html.tye-ts:not([data-ts-view="model"]):not([data-ts-view="drawing"]) body #rpd-btn, html.tye-ts:not([data-ts-view="model"]):not([data-ts-view="drawing"]) body #rp.rpd-open, html.tye-ts:not([data-ts-view="model"]):not([data-ts-view="drawing"]) body #v3d-rp.rpd-open, html.tye-ts:not([data-ts-view="model"]):not([data-ts-view="drawing"]) body #tye-pro-dock { display: none !important; } /* ---------- the chat screen (CHAT_TOUCH_2026Q4) ---------- */ /* The composer, the start choice, the attach menu and both header pickers still wore the dark-first mobile skin of cad_responsive.css (white ink patched per rule for light, so the mic icon stayed white) and the injected ATTACH_* / ATC_X_MOBILE blocks. They take the shell's tokens here. Selectors carry [data-ts-view] and ids so they outrank those !important layers without touching the desktop rules. */ /* the header's model picker, split from the mode menu: a chip at the left (touch_shell.js), its list in a panel */ html.tye-ts body header > #ts-model { display: none !important; } @media (max-width: 1024px) { html.tye-ts body header > #ts-model { display: inline-flex !important; align-items: center; gap: 6px; flex: 0 1 auto; box-sizing: border-box; position: relative; z-index: 6; max-width: min(220px, calc(50% - 80px)); height: 40px; min-height: 40px !important; margin: 0; padding: 0 10px 0 9px; border: 0; border-radius: 20px; background: transparent; color: var(--ts-ink); cursor: pointer; touch-action: manipulation; font: 600 14px/1 Inter, system-ui, sans-serif; letter-spacing: 0; -webkit-tap-highlight-color: transparent; } html.tye-ts body header > #ts-model:active, html.tye-ts body header > #ts-model[aria-expanded="true"] { background: var(--ts-press); } html.tye-ts body header > #ts-model:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body #ts-model .ts-model-ic { flex: none; width: 18px; height: 18px; background: center / 17px 17px no-repeat; } html.tye-ts body #ts-model .ts-model-ic[hidden] { display: none; } html.tye-ts[data-theme="light"] body #ts-model .ts-model-ic.prov-openai { filter: brightness(.38) contrast(1.1); } html.tye-ts body #ts-model .ts-model-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; } html.tye-ts body #ts-model > .ti { flex: none; font-size: 14px; color: var(--ts-ink3); transition: transform .16s ease; } html.tye-ts body #ts-model[aria-expanded="true"] > .ti { transform: rotate(180deg); } } /* a phone header: the name gets the chevron's room */ @media (max-width: 480px) { html.tye-ts body header > #ts-model { gap: 5px; padding: 0 10px 0 8px; font-size: 13.5px; } html.tye-ts body #ts-model > .ti { display: none; } } #ts-mm[hidden], #ts-mm-bg[hidden] { display: none !important; } html.tye-ts body #ts-mm-bg { position: fixed; inset: 0; z-index: 8615; background: transparent; } html.tye-ts body #ts-mm { position: fixed; z-index: 8620; top: var(--ts-mm-top, 62px); left: calc(env(safe-area-inset-left, 0px) + 10px); width: min(360px, calc(100vw - 20px)); max-height: calc(100dvh - var(--ts-mm-top, 62px) - var(--ts-space) - 6px); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; background: var(--ts-sheet); color: var(--ts-ink); border: 1px solid var(--ts-line); border-radius: 18px; box-shadow: var(--ts-shadow); font-family: Inter, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; animation: tsMmIn .18s cubic-bezier(.32, .72, 0, 1); } @keyframes tsMmIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.tye-ts body #ts-mm { animation: none; } } html.tye-ts body #ts-mm .ts-mm-top { display: flex; align-items: center; flex: none; min-height: 48px; padding: 0 4px 0 16px; border-bottom: 1px solid var(--ts-line); } html.tye-ts body #ts-mm .ts-mm-t { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; } html.tye-ts body #ts-mm .ts-mm-x { flex: none; width: 40px; height: 40px; min-height: 40px !important; margin: 0; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--ts-ink2); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } html.tye-ts body #ts-mm .ts-mm-x:active { background: var(--ts-press); } html.tye-ts body #ts-mm .ts-mm-x:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body #ts-mm .ts-mm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px; } /* the real #model-options list moves in while the panel is open (phase_byok_models.js keeps decorating it) */ html.tye-ts body #ts-mm #model-options { max-height: none !important; overflow: visible !important; gap: 2px; } html.tye-ts body #ts-mm #model-options .model-opt { min-height: 56px !important; padding: 8px 12px 8px 44px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; } html.tye-ts body #ts-mm #model-options .model-opt::after { left: 14px !important; } html.tye-ts body #ts-mm #model-options .model-opt:not(:disabled):active, html.tye-ts body #ts-mm #model-options .model-opt.active { background: var(--ts-press) !important; } @media (hover: hover) { html.tye-ts body #ts-mm #model-options .model-opt:not(:disabled):hover { background: var(--ts-press) !important; } } html.tye-ts body #ts-mm #model-options .model-opt:not(:disabled) .model-opt-name { color: var(--ts-ink) !important; font-size: 15px; } html.tye-ts body #ts-mm #model-options .model-opt:not(:disabled) .model-opt-desc { color: var(--ts-ink3) !important; font-size: 12.5px; line-height: 1.35; } html.tye-ts body #ts-mm #model-options .model-opt-check { color: var(--ts-ink) !important; } html.tye-ts body #ts-mm #model-options .byok-group { padding: 14px 12px 6px !important; color: var(--ts-ink3) !important; border-top: 1px solid var(--ts-line) !important; } html.tye-ts body #ts-mm #model-options .byok-group:first-child { border-top: 0 !important; padding-top: 6px !important; } html.tye-ts body #ts-mm #model-options .byok-actions { border-top: 1px solid var(--ts-line) !important; margin-top: 6px; padding-top: 6px; } html.tye-ts body #ts-mm #model-options .byok-act .model-opt-name { color: var(--ts-ink2) !important; } html.tye-ts body #ts-mm #model-options .model-opt:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } /* the mode menu (centre pill): tiers only, ending above the tab bar */ /* (its open animation carries the centring translate: the old dropIn keyframes moved only Y, and WebKit lets an animation override the !important translateX(-50%) - the menu opened off to the right, then jumped to the centre) */ @keyframes tsModeIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (max-width: 1024px) { html.tye-ts body header > .mode-picker #mode-dropdown.open { animation: tsModeIn .16s cubic-bezier(.32, .72, 0, 1) !important; } @media (prefers-reduced-motion: reduce) { html.tye-ts body header > .mode-picker #mode-dropdown.open { animation: none !important; } } /* the pill itself: ink from the tokens in every state (the dark-first skin painted the chevron white when open or hovered, and a tap leaves hover on) */ html.tye-ts body header > .mode-picker .mode-btn, html.tye-ts body header > .mode-picker .mode-btn:hover { color: var(--ts-ink) !important; background: transparent !important; } html.tye-ts body header > .mode-picker .mode-btn:active, html.tye-ts body header > .mode-picker .mode-btn.open { background: var(--ts-press) !important; } @media (hover: hover) { html.tye-ts body header > .mode-picker .mode-btn:not(.open):hover { background: var(--ts-press) !important; } } html.tye-ts body header > .mode-picker .mode-btn:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body header > .mode-picker .mode-btn #mode-btn-icon { color: var(--ts-ink2) !important; } html.tye-ts body header > .mode-picker .mode-btn.realtime-active #mode-btn-icon { color: var(--ts-dot) !important; } html.tye-ts body header > .mode-picker .mode-btn .mode-chevron, html.tye-ts body header > .mode-picker .mode-btn:hover .mode-chevron { color: var(--ts-ink3) !important; } html.tye-ts body header > .mode-picker .mode-btn.open .mode-chevron { color: var(--ts-ink2) !important; } html.tye-ts body #mode-dropdown { max-height: calc(100dvh - 64px - var(--ts-space)) !important; padding: 6px !important; box-sizing: border-box; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ts-line2) transparent; background: var(--ts-sheet) !important; border: 1px solid var(--ts-line) !important; border-radius: 18px !important; box-shadow: var(--ts-shadow) !important; } html.tye-ts body #mode-dropdown::-webkit-scrollbar-thumb { background: var(--ts-line2) !important; } html.tye-ts body #mode-dropdown .mmwm-section { display: none !important; } /* (the tier picker writes its "MODE" heading with an inline style) */ html.tye-ts body #mode-dropdown > div:first-child { color: var(--ts-ink3) !important; padding: 10px 12px 6px !important; } html.tye-ts body #mode-dropdown .mode-opt, html.tye-ts body #mode-dropdown .mode-opt:hover { min-height: 56px !important; padding: 8px 12px !important; gap: 12px; border-radius: 12px; background: transparent !important; color: var(--ts-ink) !important; } html.tye-ts body #mode-dropdown .mode-opt:active, html.tye-ts body #mode-dropdown .mode-opt.active { background: var(--ts-press) !important; } @media (hover: hover) { html.tye-ts body #mode-dropdown .mode-opt:not(.locked):hover { background: var(--ts-press) !important; } } html.tye-ts body #mode-dropdown .mode-opt:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body #mode-dropdown .mode-opt-icon { width: 36px; height: 36px; border-radius: 10px; border: 0 !important; background: var(--ts-press) !important; color: var(--ts-ink2); } html.tye-ts body #mode-dropdown .mode-opt-name { color: var(--ts-ink) !important; font-size: 15px; } html.tye-ts body #mode-dropdown .mode-opt-desc { color: var(--ts-ink3) !important; font-size: 12.5px; } html.tye-ts body #mode-dropdown .mode-opt-check { color: var(--ts-ink); } html.tye-ts body #mode-dropdown .mode-opt.locked { opacity: .5; } html.tye-ts body #mode-dropdown .tier-lock { color: #9a4a06; background: rgba(180, 83, 9, .08); border-color: rgba(180, 83, 9, .28); } html.tye-ts[data-theme="dark"] body #mode-dropdown .tier-lock { color: #f0b265; background: rgba(240, 178, 101, .12); border-color: rgba(240, 178, 101, .35); } } /* the start choice of an empty chat: two pills in the tab bar's material */ html.tye-ts[data-ts-view] body #mode-choice { max-width: 420px; margin: 0 auto 14px; padding: 0; } html.tye-ts[data-ts-view] body #mode-choice .mc-prompt { margin: 0 0 12px; font: 500 13px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--ts-ink3); } html.tye-ts[data-ts-view] body #mode-choice .mc-row { gap: 10px; justify-content: center; } html.tye-ts[data-ts-view] body #mode-choice .mc-btn, html.tye-ts[data-ts-view] body #mode-choice .mc-btn:hover { flex: 1 1 0; max-width: 176px; width: auto; height: 52px; min-height: 52px !important; padding: 0 16px; box-sizing: border-box; flex-direction: row; align-items: center; justify-content: center; gap: 9px; border-radius: 26px; border: 1px solid var(--ts-line); background: var(--ts-sheet); color: var(--ts-ink); box-shadow: var(--ts-shadow); transform: none; transition: transform .12s ease, background .16s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } html.tye-ts[data-ts-view] body #mode-choice .mc-btn:active { transform: scale(.97); } html.tye-ts[data-ts-view] body #mode-choice .mc-btn:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: 2px; } html.tye-ts[data-ts-view] body #mode-choice .mc-btn svg { width: 21px; height: 21px; flex: none; color: var(--ts-dot); } html.tye-ts[data-ts-view] body #mode-choice .mc-btn.mc-chat, html.tye-ts[data-ts-view] body #mode-choice .mc-btn.mc-chat:hover { background: var(--ts-ink); color: var(--ts-sheet); border-color: transparent; } html.tye-ts[data-ts-view] body #mode-choice .mc-btn.mc-chat svg { color: currentColor; } html.tye-ts[data-ts-view] body #mode-choice .mc-label { font: 600 15px/1 Inter, system-ui, sans-serif; letter-spacing: 0; } html.tye-ts[data-ts-view] body #mode-choice .mc-sub { display: none; } @media (prefers-reduced-motion: reduce) { html.tye-ts[data-ts-view] body #mode-choice { animation: none; } } /* the voice session's own choices (continue speaking / chat) and its exit pill, in the same family */ html.tye-ts[data-ts-view] body #voice-continue { gap: 10px; bottom: calc(var(--ts-space) + 12px) !important; width: max-content; max-width: calc(100% - 24px); } html.tye-ts[data-ts-view] body #voice-continue .vc-btn, html.tye-ts[data-ts-view] body #voice-continue .vc-btn:hover { width: auto; height: 52px; min-height: 52px !important; padding: 0 20px; flex-direction: row; gap: 9px; border-radius: 26px; border: 1px solid var(--ts-line); background: var(--ts-sheet); color: var(--ts-ink); box-shadow: var(--ts-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; transform: none; font: 600 15px/1 Inter, system-ui, sans-serif; letter-spacing: 0; } html.tye-ts[data-ts-view] body #voice-continue .vc-btn:active { transform: scale(.97); } html.tye-ts[data-ts-view] body #voice-continue .vc-primary, html.tye-ts[data-ts-view] body #voice-continue .vc-primary:hover { background: var(--ts-ink); color: var(--ts-sheet); border-color: transparent; } html.tye-ts[data-ts-view] body #voice-continue .vc-btn svg { width: 20px; height: 20px; } html.tye-ts[data-ts-view] body #voice-continue .vc-label { font-size: 15px; font-weight: 600; white-space: nowrap; } /* (voice_ui.js paints the exit pill with inline styles, dark-only) */ html.tye-ts[data-ts-view] body #voice-exit-btn { min-height: 40px !important; background: var(--ts-sheet) !important; border: 1px solid var(--ts-line) !important; color: var(--ts-ink) !important; box-shadow: var(--ts-shadow) !important; } /* the composer: one card in the sheet colour, round 44px controls */ html.tye-ts[data-ts-view] body #input-card, html.tye-ts[data-ts-view] body #input-card:hover { background: var(--ts-sheet) !important; border: 1px solid var(--ts-line) !important; border-radius: 26px !important; box-shadow: var(--ts-shadow) !important; padding-bottom: 0 !important; } html.tye-ts[data-ts-view] body #input-card:focus-within { border-color: var(--ts-line2) !important; background: var(--ts-sheet) !important; } /* (the daily-limit banner is the card's first child: its top corners follow the card's) */ html.tye-ts[data-ts-view] body #input-card > #chat-lock-banner { border-radius: 25px 25px 0 0; } html.tye-ts[data-ts-view] body #input-row { padding: 6px !important; gap: 2px !important; align-items: flex-end !important; } html.tye-ts[data-ts-view] body #input-btns { gap: 2px !important; margin: 0 !important; } html.tye-ts[data-ts-view] body #attach-btn, html.tye-ts[data-ts-view] body #attach-btn:hover, html.tye-ts[data-ts-view] body #mic-btn, html.tye-ts[data-ts-view] body #mic-btn:hover { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin: 0 !important; flex: none; border-radius: 22px !important; background: transparent !important; color: var(--ts-ink2) !important; transform: none !important; touch-action: manipulation; } html.tye-ts[data-ts-view] body #attach-btn:active, html.tye-ts[data-ts-view] body #mic-btn:active, html.tye-ts[data-ts-view] body #input-card.open #attach-btn { background: var(--ts-press) !important; color: var(--ts-ink) !important; } @media (hover: hover) { html.tye-ts[data-ts-view] body #attach-btn:hover, html.tye-ts[data-ts-view] body #mic-btn:hover { background: var(--ts-press) !important; color: var(--ts-ink) !important; } } html.tye-ts[data-ts-view] body #attach-btn svg { width: 20px !important; height: 20px !important; stroke-width: 2.2 !important; transition: transform .2s cubic-bezier(.32, .72, 0, 1); } html.tye-ts[data-ts-view] body #input-card.open #attach-btn svg { transform: rotate(45deg); } /* (the mic icon is a filled path: it takes fill, not color) */ html.tye-ts[data-ts-view] body #mic-btn svg { width: 20px !important; height: 20px !important; fill: var(--ts-ink2) !important; } html.tye-ts[data-ts-view] body #mic-btn.listening { background: rgba(229, 50, 42, .12) !important; } html.tye-ts[data-ts-view] body #mic-btn.listening svg { fill: var(--ts-dot) !important; } html.tye-ts[data-ts-view] body #attach-btn:focus-visible, html.tye-ts[data-ts-view] body #mic-btn:focus-visible, html.tye-ts[data-ts-view] body #send-btn:focus-visible { outline: 2px solid var(--ts-dot) !important; outline-offset: 1px; } html.tye-ts[data-ts-view] body #txt { color: var(--ts-ink) !important; caret-color: var(--ts-dot); font-size: 16px !important; line-height: 21px !important; min-height: 44px !important; padding: 12px 6px 11px !important; } html.tye-ts[data-ts-view] body #txt::placeholder { color: var(--ts-ink3) !important; } html.tye-ts[data-ts-view] body #send-btn, html.tye-ts[data-ts-view] body #send-btn:hover { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin: 0 !important; border: 0 !important; border-radius: 22px !important; background: var(--ts-ink) !important; color: var(--ts-sheet) !important; box-shadow: none !important; transform: none; } html.tye-ts[data-ts-view] body #send-btn svg { width: 20px !important; height: 20px !important; stroke: var(--ts-sheet) !important; stroke-width: 2.4 !important; } html.tye-ts[data-ts-view] body #send-btn:not(:disabled):active { transform: scale(.94); } html.tye-ts[data-ts-view] body #send-btn:disabled { background: var(--ts-press) !important; opacity: 1 !important; } html.tye-ts[data-ts-view] body #send-btn:disabled svg { stroke: var(--ts-ink3) !important; } /* (typing during a reply sets disabled on the Stop button; its square is currentColor) */ html.tye-ts[data-ts-view] body #send-btn.is-stop, html.tye-ts[data-ts-view] body #send-btn.is-stop:disabled { background: var(--ts-ink) !important; color: var(--ts-sheet) !important; border: 0 !important; } /* attached files: one scrolling row; the remove button is a round badge on the corner */ /* (#bottom is a grid item with min-width:auto - without this the row's full width becomes the column's) */ html.tye-ts[data-ts-view] body #bottom { min-width: 0 !important; } html.tye-ts[data-ts-view] body #attach-strip:not(.hidden) { flex-wrap: nowrap; gap: 10px; padding: 12px 12px 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 0; scrollbar-width: none; } html.tye-ts[data-ts-view] body #attach-strip::-webkit-scrollbar { display: none; } html.tye-ts[data-ts-view] body #attach-strip .atc, html.tye-ts[data-ts-view] body #attach-strip .atc:hover { flex: none; height: 48px; max-width: 200px; padding: 0 30px 0 6px; gap: 8px; border: 0; border-radius: 14px; background: var(--ts-press); } html.tye-ts[data-ts-view] body #attach-strip .atc .atc-thumb { width: 36px; height: 36px; border-radius: 10px; background: var(--ts-sheet); color: var(--ts-ink2); } html.tye-ts[data-ts-view] body #attach-strip .atc .atc-name { color: var(--ts-ink); font: 500 13px/1.3 Inter, system-ui, sans-serif; } html.tye-ts[data-ts-view] body #attach-strip .atc.atc-img, html.tye-ts[data-ts-view] body #attach-strip .atc.atc-img:hover { width: 56px; height: 56px; max-width: 56px; padding: 0; background: transparent; } html.tye-ts[data-ts-view] body #attach-strip .atc.atc-img .atc-thumb, html.tye-ts[data-ts-view] body #attach-strip .atc.atc-img .atc-thumb:hover { width: 56px; height: 56px; border-radius: 14px; background: var(--ts-press); outline: 1px solid var(--ts-line); outline-offset: -1px; transform: none; filter: none; } html.tye-ts[data-ts-view] body #attach-strip .atc-x, html.tye-ts[data-ts-view] body #attach-strip .atc-x:hover, html.tye-ts[data-ts-view] body #moss-attach-row .moss-att-chip__x, html.tye-ts[data-ts-view] body #moss-attach-row .moss-att-chip__x:hover { position: absolute !important; top: -7px !important; right: -7px !important; left: auto !important; bottom: auto !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 2px solid var(--ts-sheet) !important; border-radius: 50% !important; background: var(--ts-ink) !important; color: var(--ts-sheet) !important; font: 600 14px/1 Inter, system-ui, sans-serif !important; box-shadow: none !important; transform: none !important; cursor: pointer; z-index: 1; } /* (a 42px touch target around the 22px badge) */ html.tye-ts[data-ts-view] body #attach-strip .atc-x::before, html.tye-ts[data-ts-view] body #moss-attach-row .moss-att-chip__x::before { content: ''; position: absolute; inset: -10px -2px -8px -10px; } html.tye-ts[data-ts-view] body #moss-attach-row { flex-wrap: nowrap; gap: 10px; padding: 12px 12px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } html.tye-ts[data-ts-view] body #moss-attach-row::-webkit-scrollbar { display: none; } html.tye-ts[data-ts-view] body #moss-attach-row .moss-att-chip { flex: none; overflow: visible; border: 0; border-radius: 14px; background: var(--ts-press); color: var(--ts-ink); padding: 6px 30px 6px 6px; font-family: Inter, system-ui, sans-serif; } html.tye-ts[data-ts-view] body #moss-attach-row .moss-att-chip.img { padding: 0; background: transparent; max-width: 56px; } html.tye-ts[data-ts-view] body #moss-attach-row .moss-att-chip__thumb { display: block; width: 56px; height: 56px; border-radius: 14px; background: var(--ts-press); } html.tye-ts[data-ts-view] body #moss-attach-row .moss-att-chip__icon { border-radius: 10px; background: var(--ts-sheet); color: var(--ts-ink2); } html.tye-ts[data-ts-view] body #moss-attach-row .moss-att-chip__name { color: var(--ts-ink); } /* the attach menu: a card over the + with no dimmed backdrop (its old one was boxed in by #bottom's backdrop-filter) */ html.tye-ts[data-ts-view] body #input-card.open::before { content: none !important; display: none !important; } html.tye-ts[data-ts-view] body #attach-toolbar { position: absolute !important; left: 0 !important; right: auto !important; top: auto !important; bottom: calc(100% + 8px) !important; width: min(300px, 100%) !important; max-height: 60vh !important; overflow-y: auto; box-sizing: border-box; padding: 6px !important; gap: 2px !important; border-radius: 18px !important; background: var(--ts-sheet) !important; border: 1px solid var(--ts-line) !important; box-shadow: var(--ts-shadow) !important; } html.tye-ts[data-ts-view] body #attach-toolbar::before { display: none !important; } html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-item, html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-item:hover { min-height: 56px !important; padding: 8px 10px !important; gap: 12px; border-radius: 12px; background: transparent; color: var(--ts-ink); touch-action: manipulation; } html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-item:active { background: var(--ts-press); } @media (hover: hover) { html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-item:hover { background: var(--ts-press); } } html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-item:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; background: transparent; } html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-ico, html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-item:hover .attach-menu-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--ts-press); color: var(--ts-ink2); } html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-ico svg { width: 20px; height: 20px; } html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-title { font: 600 15px/1.25 Inter, system-ui, sans-serif; color: var(--ts-ink); } html.tye-ts[data-ts-view] body #attach-toolbar .attach-menu-sub { font: 400 12.5px/1.3 Inter, system-ui, sans-serif; color: var(--ts-ink3); white-space: normal; } /* ---------- the tab bar ---------- */ #ts-bar { display: none; } /* what build() and the empty-state hint add stays in the DOM if the shell turns off (a window widened past 1024px) */ html:not(.tye-ts) #ts-proj-head, html:not(.tye-ts) #ts-compose, html:not(.tye-ts) #ts-model, html:not(.tye-ts) #ts-mm, html:not(.tye-ts) #ts-mm-bg, html:not(.tye-ts) #ts-quick, html:not(.tye-ts) #ts-casc, html:not(.tye-ts) #ts-casc-bg, html:not(.tye-ts) .ts-empty-cta { display: none !important; } html.tye-ts body #ts-bar { display: flex; align-items: center; justify-content: space-around; position: fixed; z-index: 8500; box-sizing: border-box; left: max(12px, calc(50% - 220px)); right: max(12px, calc(50% - 220px)); bottom: calc(var(--ts-gap) + var(--ts-safe)); height: var(--ts-bar-h); padding: 0 8px; border-radius: calc(var(--ts-bar-h) / 2); background: var(--ts-surface); border: 1px solid var(--ts-line); box-shadow: var(--ts-shadow); -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px); transition: transform .22s cubic-bezier(.32, .72, 0, 1), opacity .18s ease; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } html.tye-ts.ts-kb body #ts-bar { transform: translateY(calc(100% + var(--ts-gap) + var(--ts-safe) + 8px)); opacity: 0; pointer-events: none; } html.tye-ts body #ts-bar .ts-nb { position: relative; flex: 1 1 0; min-width: 44px; max-width: 76px; height: 46px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 23px; background: transparent; color: var(--ts-ink2); font-size: 26px; line-height: 1; cursor: pointer; touch-action: manipulation; transition: background .16s ease, color .16s ease, transform .12s ease; } html.tye-ts body #ts-bar .ts-nb i { pointer-events: none; } html.tye-ts body #ts-bar .ts-nb:active { transform: scale(.9); } html.tye-ts body #ts-bar .ts-nb[aria-current="page"], html.tye-ts body #ts-bar .ts-nb[aria-expanded="true"] { background: var(--ts-press); color: var(--ts-ink); } html.tye-ts body #ts-bar .ts-nb[aria-current="page"] i { -webkit-text-stroke: .6px currentColor; } html.tye-ts body #ts-bar .ts-nb:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body #ts-bar .ts-dot { position: absolute; top: 8px; right: calc(50% - 17px); width: 8px; height: 8px; border-radius: 50%; background: var(--ts-dot); box-shadow: 0 0 0 2px var(--ts-surface); display: none; } html.tye-ts body #ts-bar .ts-nb.has-dot .ts-dot { display: block; } html.tye-ts body #ts-bar .ts-av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #e5322a; color: #fff; font: 600 12px/1 Inter, system-ui, sans-serif; box-sizing: border-box; } html.tye-ts body #ts-bar .ts-av img { width: 100%; height: 100%; object-fit: cover; display: block; } html.tye-ts body #ts-bar .ts-nb[aria-expanded="true"] .ts-av { box-shadow: 0 0 0 2px var(--ts-surface), 0 0 0 4px var(--ts-ink); } html.tye-ts body .ts-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Profile sheet ---------- */ #ts-sheet-bg, #ts-sheet { display: none; } html.tye-ts body #ts-sheet-bg.open { display: block; position: fixed; inset: 0; z-index: 9020; background: var(--ts-scrim); } html.tye-ts body #ts-sheet.open { display: flex; flex-direction: column; position: fixed; z-index: 9030; box-sizing: border-box; left: max(0px, calc(50% - 280px)); right: max(0px, calc(50% - 280px)); bottom: 0; max-height: min(86dvh, 720px); padding: 8px 0 calc(var(--ts-safe) + 12px); background: var(--ts-sheet); color: var(--ts-ink); border-radius: 22px 22px 0 0; border: 1px solid var(--ts-line); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18); font-family: Inter, system-ui, sans-serif; animation: tsSheetUp .26s cubic-bezier(.32, .72, 0, 1); } /* CAD cards above that layer (Pro Tools dock 99999) step aside while the sheet is open */ html.tye-ts.ts-sheet-open body .sk-panel, html.tye-ts.ts-sheet-open body .sk-ed2, html.tye-ts.ts-sheet-open body .sk-editor, html.tye-ts.ts-sheet-open body #rpd-btn, html.tye-ts.ts-sheet-open body #tye-pro-dock { visibility: hidden !important; pointer-events: none !important; } html.tye-ts body #ts-sheet .ts-close { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--ts-ink2); font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } html.tye-ts body #ts-sheet .ts-close:active { background: var(--ts-press); } html.tye-ts body #ts-sheet .ts-close:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body:has(#mem-overlay.open) .sk-panel, html.tye-ts body:has(#mem-overlay.open) .sk-ed2, html.tye-ts body:has(#mem-overlay.open) .sk-editor, html.tye-ts body:has(#mem-overlay.open) #tye-pro-dock, html.tye-ts body:has(#pay-overlay.open) .sk-panel, html.tye-ts body:has(#pay-overlay.open) .sk-ed2, html.tye-ts body:has(#pay-overlay.open) .sk-editor, html.tye-ts body:has(#pay-overlay.open) #tye-pro-dock, html.tye-ts body:has(#search-modal:not(.d-none)) .sk-panel, html.tye-ts body:has(#search-modal:not(.d-none)) .sk-ed2, html.tye-ts body:has(#search-modal:not(.d-none)) .sk-editor, html.tye-ts body:has(#search-modal:not(.d-none)) #tye-pro-dock, html.tye-ts body:has(#prompt-modal.show) .sk-panel, html.tye-ts body:has(#prompt-modal.show) .sk-ed2, html.tye-ts body:has(#prompt-modal.show) .sk-editor, html.tye-ts body:has(#prompt-modal.show) #tye-pro-dock, html.tye-ts body:has(#confirm-modal.show) .sk-panel, html.tye-ts body:has(#confirm-modal.show) .sk-ed2, html.tye-ts body:has(#confirm-modal.show) .sk-editor, html.tye-ts body:has(#confirm-modal.show) #tye-pro-dock, html.tye-ts body.mobile-panel-open .sk-panel, html.tye-ts body.mobile-panel-open .sk-ed2, html.tye-ts body.mobile-panel-open .sk-editor, html.tye-ts body.mobile-panel-open #tye-pro-dock, html.tye-ts body.mobile-panel-open #rpd-btn, html.tye-ts body.mobile-panel-open #ts-quick, html.tye-ts body.mobile-panel-open #ts-casc, html.tye-ts body.mobile-panel-open #ts-casc-bg { visibility: hidden !important; pointer-events: none !important; } /* Terminal / Tasks / Extensions (full-screen slide-ins at <=1024px, floating popups above) end above the tab bar */ html.tye-ts body #terminal-panel.mobile-open, html.tye-ts body #tasks-panel.mobile-open, html.tye-ts body #plugin-panel.mobile-open { padding-bottom: var(--ts-space) !important; box-sizing: border-box !important; } @media (min-width: 1025px) { html.tye-ts body #terminal-panel, html.tye-ts body #tasks-panel, html.tye-ts body #plugin-panel { max-height: calc(100dvh - 72px - var(--ts-space)) !important; } html.tye-ts body:has(#terminal-panel[style*="display: flex"]) .sk-panel, html.tye-ts body:has(#tasks-panel[style*="display: flex"]) .sk-panel, html.tye-ts body:has(#plugin-panel[style*="display: flex"]) .sk-panel, html.tye-ts body:has(#terminal-panel[style*="display: flex"]) #tye-pro-dock, html.tye-ts body:has(#tasks-panel[style*="display: flex"]) #tye-pro-dock, html.tye-ts body:has(#plugin-panel[style*="display: flex"]) #tye-pro-dock { visibility: hidden !important; pointer-events: none !important; } } @keyframes tsSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html.tye-ts body #ts-sheet.open { animation: none; } html.tye-ts body #ts-bar { transition: none; } } html.tye-ts body #ts-sheet .ts-grab { width: 38px; height: 5px; border-radius: 3px; background: var(--ts-line); margin: 2px auto 10px; flex: none; } html.tye-ts body #ts-sheet .ts-who { display: flex; align-items: center; gap: 12px; padding: 4px 60px 14px 20px; border-bottom: 1px solid var(--ts-line); flex: none; } html.tye-ts body #ts-sheet .ts-who .ts-av { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #e5322a; color: #fff; font: 600 18px/1 Inter, system-ui, sans-serif; flex: none; } html.tye-ts body #ts-sheet .ts-who .ts-av img { width: 100%; height: 100%; object-fit: cover; } html.tye-ts body #ts-sheet .ts-who h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--ts-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.tye-ts body #ts-sheet .ts-who p { margin: 2px 0 0; font-size: 13px; color: var(--ts-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.tye-ts body #ts-sheet .ts-who > div { min-width: 0; } html.tye-ts body #ts-sheet .ts-list { overflow-y: auto; padding: 6px 8px 0; -webkit-overflow-scrolling: touch; } html.tye-ts body #ts-sheet .ts-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 0 12px; margin: 0; box-sizing: border-box; border: 0; border-radius: 12px; background: transparent; color: var(--ts-ink); font: 500 15px/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; } html.tye-ts body #ts-sheet .ts-item:active { background: var(--ts-press); } html.tye-ts body #ts-sheet .ts-item:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body #ts-sheet .ts-item i { font-size: 22px; color: var(--ts-ink2); width: 24px; text-align: center; flex: none; } html.tye-ts body #ts-sheet .ts-item .ts-val { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ts-ink3); } html.tye-ts body #ts-sheet .ts-item.danger, html.tye-ts body #ts-sheet .ts-item.danger i { color: var(--ts-dot); } html.tye-ts body #ts-sheet .ts-sep { height: 1px; background: var(--ts-line); margin: 6px 12px; } html.tye-ts body #ts-sheet .ts-seg { display: flex; gap: 6px; padding: 4px 12px 8px 50px; } html.tye-ts body #ts-sheet .ts-seg button { flex: 1 1 0; min-height: 38px; border-radius: 10px; border: 1px solid var(--ts-line); background: transparent; color: var(--ts-ink2); font: 500 13px/1 Inter, system-ui, sans-serif; cursor: pointer; } html.tye-ts body #ts-sheet .ts-seg button[aria-checked="true"] { background: var(--ts-ink); border-color: var(--ts-ink); color: var(--ts-sheet); } /* a phone on its side (short screen): a slimmer tab bar (its tools are in the rail, like every touch screen) */ @media (max-height: 500px) { html.tye-ts { --ts-bar-h: 52px; --ts-gap: 6px; } } /* one finger on the model orbits it; the page must not scroll, zoom or pull-to-refresh underneath */ html.tye-ts, html.tye-ts body { overscroll-behavior: none; } html.tye-ts body #cad-panel canvas { touch-action: none !important; } /* ---------- account pages (PROFILE_PAGES_2026Q4) ---------- */ /* On the touch layout the account modal is a stack of pages (touch_shell.js): a full-height sheet with a round back button, a centred title and a round close button; "Account and settings" lists its sections and each section is a page. html.ts-mpage is on while the account view is open; html.ts-mpage-push when it was pushed from the Profile menu, html.ts-mpage-sheet while that menu still waits underneath (page 0; its scrim is the page's scrim); data-mp="list|panel" says which layer is on top. The modal's own markup and scripts are untouched: its sidebar (the <=700px tab strip) and drag handle are hidden, and #ts-mp-bar / #ts-mp-list are added inside #mem-box. */ #ts-mp-bar, #ts-mp-list { display: none; } html.tye-ts.ts-mpage body #mem-overlay { /* above the Profile sheet (9030) and below the payment sheet (9100) and every confirm dialog (9500+) */ z-index: 9040 !important; padding: 0 !important; align-items: flex-end !important; justify-content: center !important; background: var(--ts-scrim) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; } /* (the Profile sheet's own scrim is already there) */ html.tye-ts.ts-mpage.ts-mpage-sheet body #mem-overlay { background: transparent !important; } html.tye-ts.ts-mpage body #mem-overlay #mem-box.mem-box { position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 10px) !important; bottom: 0 !important; left: max(0px, calc(50% - 280px)) !important; right: max(0px, calc(50% - 280px)) !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: var(--ts-sheet) !important; color: var(--ts-ink); border: 1px solid var(--ts-line) !important; border-bottom: 0 !important; border-radius: 22px 22px 0 0 !important; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18) !important; animation: tsPageUp .34s cubic-bezier(.32, .72, 0, 1) both !important; } /* pushed from the Profile menu: in from the right; back to it: out to the right */ /* (pushed from the Profile menu and back to it: the menu's surface grows and its content slides - touch_shell.js, SHEET_CONTINUOUS_2026Q4) */ html.tye-ts.ts-mpage.ts-mpage-push body #mem-overlay #mem-box.mem-box, html.tye-ts.ts-mpage.ts-mpage-leave body #mem-overlay #mem-box.mem-box { animation: none !important; } /* closed with x: down, with its scrim (and the Profile menu under it, which closes with it) */ html.tye-ts.ts-mpage.ts-mpage-close body #mem-overlay #mem-box.mem-box { animation: tsPageDown .24s cubic-bezier(.32, .72, 0, 1) both !important; } html.tye-ts.ts-mpage.ts-mpage-close body #mem-overlay { background: transparent !important; transition: background-color .24s ease; } html.tye-ts.ts-mpage.ts-mpage-close body #ts-sheet-bg.open { opacity: 0; transition: opacity .24s ease; } html.tye-ts.ts-mpage.ts-mpage-close body #ts-sheet.open { visibility: hidden; } @keyframes tsPageUp { from { transform: translateY(100%); } to { transform: none; } } /* (the page is centred and at most 560px wide: 50vw + half its width takes it past the right edge; + its shadow) */ @keyframes tsPageIn { from { transform: translateX(calc(50vw + 50% + 40px)); } to { transform: none; } } @keyframes tsPageOut { from { transform: none; } to { transform: translateX(calc(50vw + 50% + 40px)); } } @keyframes tsPageDown { from { transform: none; } to { transform: translateY(100%); } } html.tye-ts.ts-mpage body #mem-overlay #mem-handle, html.tye-ts.ts-mpage body #mem-overlay #mem-esc-chip { display: none !important; } /* the header: round back (hidden on the first page unless the Profile menu is underneath), title, round close */ html.tye-ts.ts-mpage body #ts-mp-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; flex: none; padding: 12px 14px 10px; background: var(--ts-sheet); position: relative; z-index: 3; } html.tye-ts.ts-mpage body #ts-mp-bar .ts-mp-t { margin: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--ts-ink); } html.tye-ts.ts-mpage body #ts-mp-bar .ts-mp-btn { width: 44px; height: 44px; min-height: 44px !important; margin: 0; padding: 0; border: 0; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; background: var(--ts-sheet); color: var(--ts-ink); font-size: 22px; line-height: 1; box-shadow: 0 1px 2px rgba(17, 20, 28, .06), 0 4px 16px rgba(17, 20, 28, .12); -webkit-tap-highlight-color: transparent; transition: transform .12s ease; } html.tye-ts.ts-mpage[data-theme="dark"] body #ts-mp-bar .ts-mp-btn { background: rgba(255, 255, 255, .08); box-shadow: none; } html.tye-ts.ts-mpage body #ts-mp-bar .ts-mp-btn[hidden] { display: inline-flex; visibility: hidden; } html.tye-ts.ts-mpage body #ts-mp-bar .ts-mp-btn:active { transform: scale(.92); } html.tye-ts.ts-mpage body #ts-mp-bar .ts-mp-btn:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: 2px; } html.tye-ts.ts-mpage body #ts-mp-bar .ts-mp-btn i { pointer-events: none; } /* the two layers - the section list and the section page - share the space under the header and slide over each other */ html.tye-ts.ts-mpage body #mem-overlay #mem-view-account.active { display: block !important; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden !important; } html.tye-ts.ts-mpage body #ts-mp-list, html.tye-ts.ts-mpage body #mem-overlay #mem-view-account .mem-acc-layout { position: absolute !important; inset: 0 !important; background: var(--ts-sheet); } html.tye-ts.ts-mpage body #ts-mp-list { display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 16px calc(28px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))); box-sizing: border-box; } html.tye-ts.ts-mpage body #mem-overlay #mem-view-account .mem-acc-layout { display: flex !important; flex-direction: column !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; } html.tye-ts.ts-mpage body #mem-overlay #mem-view-account .mem-acc-layout > .mem-sidebar { display: none !important; } html.tye-ts.ts-mpage body #mem-overlay #mem-view-account #mem-panels { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 16px calc(28px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))) !important; } /* (the page title is in the header; Overview's big name line is not a title and stays) */ html.tye-ts.ts-mpage body #mem-panels > .mem-panel > .mem-panel-title { display: none !important; } html[data-mp="list"].tye-ts.ts-mpage body #mem-overlay #mem-view-account .mem-acc-layout:not(.ts-mp-keep) { display: none !important; } html[data-mp="panel"].tye-ts.ts-mpage body #ts-mp-list:not(.ts-mp-keep) { display: none; } html.tye-ts.ts-mpage body .ts-mp-in { z-index: 2; animation: tsMpIn .34s cubic-bezier(.32, .72, 0, 1) both; box-shadow: -8px 0 24px rgba(0, 0, 0, .08); } html.tye-ts.ts-mpage body .ts-mp-in-l { z-index: 1; animation: tsMpInL .34s cubic-bezier(.32, .72, 0, 1) both; } html.tye-ts.ts-mpage body .ts-mp-out-l { z-index: 1; animation: tsMpOutL .34s cubic-bezier(.32, .72, 0, 1) both; pointer-events: none; } html.tye-ts.ts-mpage body .ts-mp-out-r { z-index: 2; animation: tsMpOutR .34s cubic-bezier(.32, .72, 0, 1) both; pointer-events: none; } @keyframes tsMpIn { from { transform: translateX(100%); } to { transform: none; } } @keyframes tsMpInL { from { transform: translateX(-28%); opacity: .5; } to { transform: none; opacity: 1; } } @keyframes tsMpOutL { from { transform: none; opacity: 1; } to { transform: translateX(-28%); opacity: .5; } } @keyframes tsMpOutR { from { transform: none; } to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { html.tye-ts.ts-mpage body #mem-overlay #mem-box.mem-box, html.tye-ts.ts-mpage.ts-mpage-push body #mem-overlay #mem-box.mem-box, html.tye-ts.ts-mpage.ts-mpage-leave body #mem-overlay #mem-box.mem-box, html.tye-ts.ts-mpage.ts-mpage-close body #mem-overlay #mem-box.mem-box { animation: none !important; } html.tye-ts.ts-mpage body .ts-mp-in, html.tye-ts.ts-mpage body .ts-mp-in-l, html.tye-ts.ts-mpage body .ts-mp-out-l, html.tye-ts.ts-mpage body .ts-mp-out-r { animation: none; } } /* a page leaving for another page (a link inside a page) is a picture of it: the real panels show one at a time */ html.tye-ts.ts-mpage body #ts-mp-ghost { position: absolute; inset: 0; overflow: hidden; background: var(--ts-sheet); pointer-events: none; padding: 2px 16px 0; box-sizing: border-box; } html.tye-ts.ts-mpage body #ts-mp-ghost > .ts-mp-ghost-p { display: block; } html.tye-ts.ts-mpage body #ts-mp-ghost > .ts-mp-ghost-p > .mem-panel-title { display: none; } /* toasts ("Saved") show over the pages */ html.tye-ts.ts-mpage body #toast, html.tye-ts.ts-mpage body #mem-toast { z-index: 9060 !important; } /* the section list: grouped rows with the sidebar's icons and a chevron */ html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-group + .ts-mp-group { margin-top: 10px; } html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-h { margin: 0; padding: 16px 4px 6px; font: 600 13px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--ts-ink3); } html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px !important; margin: 0; padding: 0 6px; box-sizing: border-box; border: 0; border-radius: 12px; background: transparent; color: var(--ts-ink); text-align: left; cursor: pointer; touch-action: manipulation; font: 500 16px/1.3 Inter, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; } html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-row:active { background: var(--ts-press); } @media (hover: hover) { html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-row:hover { background: var(--ts-press); } } html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-row:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-ic { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--ts-ink); } html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-ic svg { width: 22px; height: 22px; stroke-width: 1.8; } html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-v { flex: none; font-size: 15px; font-weight: 400; color: var(--ts-ink3); } html.tye-ts.ts-mpage body #ts-mp-list .ts-mp-chev { flex: none; font-size: 18px; color: var(--ts-ink3); margin-right: -2px; } /* the Profile menu: rows that open a page carry a chevron */ html.tye-ts body #ts-sheet .ts-item i.ts-chev { width: auto; font-size: 18px; color: var(--ts-ink3); margin-left: 8px; } html.tye-ts body #ts-sheet .ts-item .ts-val + i.ts-chev { margin-left: 4px; } html.tye-ts body #ts-sheet .ts-item span + i.ts-chev { margin-left: auto; } /* ---------- Search, Terminal, Tasks, Extensions, Report as pages (PROFILE_PAGES2_2026Q4) ---------- */ /* #ts-page (touch_shell.js) is the same sheet as the account pages - round Back, centred title, round Close - with the real content moved into #ts-pg-body while it shows. html.ts-page (+ -search / -report / -terminal / -tasks / -plugin), -push when pushed from the Profile menu, -sheet while that menu still waits underneath, -leave / -close while it goes. Layer: above the Profile sheet (9030), below an account page (9040) and everything the pages open. */ #ts-page { display: none; } html.tye-ts body #ts-page:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 9035; background: var(--ts-scrim); } html.tye-ts.ts-page-sheet body #ts-page { background: transparent; } html.tye-ts.ts-page-close body #ts-page:not([hidden]) { background: transparent; transition: background-color .24s ease; } html.tye-ts.ts-page-close body #ts-sheet-bg.open { opacity: 0; transition: opacity .24s ease; } html.tye-ts.ts-page-close body #ts-sheet.open { visibility: hidden; } html.tye-ts body #ts-pg-box { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: 0; left: max(0px, calc(50% - 280px)); right: max(0px, calc(50% - 280px)); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; background: var(--ts-sheet); color: var(--ts-ink); border: 1px solid var(--ts-line); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18); font-family: Inter, system-ui, sans-serif; animation: tsPageUp .34s cubic-bezier(.32, .72, 0, 1) backwards; } /* (backwards, not both: a transform animation still in effect would make the box the containing block of the fixed dialogs inside the pages - the Tasks editor, the Terminal AI prompt) */ html.tye-ts.ts-page-push body #ts-pg-box, html.tye-ts.ts-page-leave body #ts-pg-box { animation: none; } html.tye-ts.ts-page-close body #ts-pg-box { animation: tsPageDown .24s cubic-bezier(.32, .72, 0, 1) both; } @media (prefers-reduced-motion: reduce) { html.tye-ts body #ts-pg-box, html.tye-ts.ts-page-push body #ts-pg-box, html.tye-ts.ts-page-leave body #ts-pg-box, html.tye-ts.ts-page-close body #ts-pg-box { animation: none; } } /* (the account pages' header) */ html.tye-ts body #ts-pg-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; flex: none; padding: 12px 14px 10px; background: var(--ts-sheet); position: relative; z-index: 3; } html.tye-ts body #ts-pg-bar .ts-mp-t { margin: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--ts-ink); } html.tye-ts body #ts-pg-bar .ts-mp-btn { width: 44px; height: 44px; min-height: 44px !important; margin: 0; padding: 0; border: 0; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; background: var(--ts-sheet); color: var(--ts-ink); font-size: 22px; line-height: 1; box-shadow: 0 1px 2px rgba(17, 20, 28, .06), 0 4px 16px rgba(17, 20, 28, .12); -webkit-tap-highlight-color: transparent; transition: transform .12s ease; } html.tye-ts[data-theme="dark"] body #ts-pg-bar .ts-mp-btn { background: rgba(255, 255, 255, .08); box-shadow: none; } html.tye-ts body #ts-pg-bar .ts-mp-btn[hidden] { display: inline-flex; visibility: hidden; } html.tye-ts body #ts-pg-bar .ts-mp-btn:active { transform: scale(.92); } html.tye-ts body #ts-pg-bar .ts-mp-btn:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: 2px; } html.tye-ts body #ts-pg-bar .ts-mp-btn i { pointer-events: none; } html.tye-ts body #ts-pg-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* over a page: the sign-in sheet (its forced state keeps the ceiling), toasts; CAD cards stay out of the way */ html.tye-ts.ts-page body #mem-overlay.open:not(.mem-forced) { z-index: 9050 !important; } html.tye-ts.ts-page body #toast, html.tye-ts.ts-page body #mem-toast { z-index: 9060 !important; } html.tye-ts.ts-page body .sk-panel, html.tye-ts.ts-page body .sk-ed2, html.tye-ts.ts-page body .sk-editor, html.tye-ts.ts-page body #rpd-btn, html.tye-ts.ts-page body #tye-pro-dock, html.tye-ts.ts-page body #tye-pdm-panel, html.tye-ts.ts-page body #tye-clearance-panel, html.tye-ts.ts-page body #tye-cfdpro-panel, html.tye-ts.ts-page body .tye-idlg.idlg-panel, html.tye-ts.ts-page body .bs-popover, html.tye-ts.ts-page body #moss-select-panel, html.tye-ts.ts-page body #tye-annot-lib, /* (the CAD cards that are body children at z 9999 would cover the Profile sheet and the account pages as well) */ html.tye-ts.ts-sheet-open body #tye-pdm-panel, html.tye-ts.ts-sheet-open body #tye-clearance-panel, html.tye-ts.ts-sheet-open body #tye-cfdpro-panel, html.tye-ts.ts-sheet-open body .tye-idlg.idlg-panel, html.tye-ts.ts-sheet-open body .bs-popover, html.tye-ts.ts-sheet-open body #moss-select-panel, html.tye-ts.ts-sheet-open body #tye-annot-lib, html.tye-ts.ts-mpage body #tye-pdm-panel, html.tye-ts.ts-mpage body #tye-clearance-panel, html.tye-ts.ts-mpage body #tye-cfdpro-panel, html.tye-ts.ts-mpage body .tye-idlg.idlg-panel, html.tye-ts.ts-mpage body .bs-popover, html.tye-ts.ts-mpage body #moss-select-panel, html.tye-ts.ts-mpage body #tye-annot-lib { visibility: hidden !important; pointer-events: none !important; } /* -- Search chats: a search field and the chat list -- */ html.tye-ts.ts-page-search body #search-modal { display: none !important; } html.tye-ts body #ts-pg-body > .search-panel { position: absolute; inset: 0; display: flex; flex-direction: column; width: auto !important; max-width: none !important; margin: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; overflow: hidden; } html.tye-ts body #ts-pg-body > .search-panel .search-input-wrap { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; margin: 2px 16px 8px; padding: 0 14px; border: 0 !important; border-radius: 12px; background: var(--ts-press); color: var(--ts-ink3); box-sizing: border-box; } html.tye-ts body #ts-pg-body > .search-panel .search-input-wrap svg { flex: none; width: 18px; height: 18px; color: var(--ts-ink3); } html.tye-ts body #ts-pg-body > .search-panel #search-modal-input { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0 !important; padding: 0; border: 0; background: transparent; outline: none; font: 400 16px/1.3 Inter, system-ui, sans-serif !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .search-panel #search-modal-input::placeholder { color: var(--ts-ink3); opacity: 1; } html.tye-ts body #ts-pg-body > .search-panel .search-esc-hint, html.tye-ts body #ts-pg-body > .search-panel .search-footer { display: none !important; } html.tye-ts body #ts-pg-body > .search-panel #search-results { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 8px calc(20px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))) !important; box-sizing: border-box; } html.tye-ts body #ts-pg-body > .search-panel .search-result-item { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border-radius: 12px; background: transparent; color: var(--ts-ink); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } html.tye-ts body #ts-pg-body > .search-panel .search-result-item.active, html.tye-ts body #ts-pg-body > .search-panel .search-result-item:active { background: var(--ts-press); } @media (hover: hover) { html.tye-ts body #ts-pg-body > .search-panel .search-result-item:hover { background: var(--ts-press); } } @media (hover: none) { html.tye-ts body #ts-pg-body > .search-panel .search-result-item:not(.active):hover { background: transparent; } } html.tye-ts body #ts-pg-body > .search-panel .search-result-icon { flex: none; width: 20px; height: 20px; color: var(--ts-ink3); opacity: 1; } html.tye-ts body #ts-pg-body > .search-panel .search-result-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 500; color: var(--ts-ink); } html.tye-ts body #ts-pg-body > .search-panel .search-result-time { flex: none; font-size: 13px; color: var(--ts-ink3); } html.tye-ts body #ts-pg-body > .search-panel .search-no-result { padding: 40px 16px; text-align: center; font-size: 15px; color: var(--ts-ink3); } /* -- Report an issue: a form, the send button at the bottom -- */ html.tye-ts body #ts-pg-body > .report-issue-modal { position: absolute !important; inset: 0 !important; z-index: auto !important; display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; padding: 0 !important; animation: none !important; opacity: 1 !important; background: transparent !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-overlay, html.tye-ts body #ts-pg-body > .report-issue-modal .ri-hdr, html.tye-ts body #ts-pg-body > .report-issue-modal .ri-btn-cancel { display: none !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-panel { position: relative; flex: 1 1 auto; min-height: 0; width: auto !important; max-width: none !important; max-height: none !important; display: flex; flex-direction: column; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; animation: none !important; overflow: hidden; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 16px 20px !important; gap: 18px !important; background: transparent !important; } /* (a short screen with the keyboard up: the field being typed in keeps some room, the send bar goes under the keyboard) */ html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body { min-height: 120px !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-label { gap: 8px; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-l-text { font: 600 13px/1.3 Inter, system-ui, sans-serif !important; color: var(--ts-ink3) !important; letter-spacing: 0 !important; text-transform: none !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-l-text-inline { font-size: 15px !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body input[type="text"], html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body select, html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body textarea { font: 400 16px/1.4 Inter, system-ui, sans-serif !important; min-height: 48px !important; padding: 12px 14px !important; border: 1px solid var(--ts-line2) !important; border-radius: 12px !important; background: var(--ts-sheet) !important; color: var(--ts-ink) !important; box-shadow: none !important; box-sizing: border-box; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body textarea { min-height: 112px !important; resize: none; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body input[type="text"]:focus, html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body select:focus, html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body textarea:focus { border-color: var(--ts-ink) !important; outline: none !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body ::placeholder { color: var(--ts-ink3) !important; opacity: 1; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-body input[type="checkbox"] { width: 22px; height: 22px; min-height: 0 !important; accent-color: var(--ts-ink); flex: none; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-diag-preview { color: var(--ts-ink3) !important; font-size: 14px; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-diag-preview summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; color: var(--ts-ink2) !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-footer { flex: none; flex-direction: column-reverse !important; align-items: stretch !important; gap: 10px !important; padding: 12px 16px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))) !important; border-top: 1px solid var(--ts-line) !important; background: var(--ts-sheet) !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-footer-l { justify-content: center; text-align: center; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-hint { font-size: 12.5px !important; color: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-footer-r { display: flex !important; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-btn-submit { flex: 1 1 auto; min-height: 50px !important; padding: 0 20px !important; border: 0 !important; border-radius: 25px !important; background: var(--ts-ink) !important; color: var(--ts-sheet) !important; box-shadow: none !important; font: 600 16px/1 Inter, system-ui, sans-serif !important; touch-action: manipulation; } html.tye-ts body #ts-pg-body > .report-issue-modal .ri-btn-submit:disabled { opacity: .55 !important; } /* -- Terminal, Tasks, Extensions: the panel fills the page; its header is a toolbar under the page header -- */ html.tye-ts body #ts-pg-body > .side-panel.ts-pg-panel { display: flex !important; flex-direction: column !important; visibility: visible !important; pointer-events: auto !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 0 max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px)) !important; box-sizing: border-box !important; z-index: auto !important; transform: none !important; transition: none !important; animation: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; overflow: hidden !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .mobile-panel-close-btn { visibility: hidden !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .sp-close-x, html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-title, html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-title, html.tye-ts body #ts-pg-body > .ts-pg-panel .term-title > svg, html.tye-ts body #ts-pg-body > .ts-pg-panel .term-title > span:not(.term-lang) { display: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel > .term-header, html.tye-ts body #ts-pg-body > .ts-pg-panel > .tasks-header, html.tye-ts body #ts-pg-body > .ts-pg-panel > .ext-header { flex: none; display: flex !important; align-items: center; justify-content: flex-end; gap: 8px; min-height: 44px; padding: 0 14px 6px !important; cursor: default !important; user-select: auto; background: transparent !important; border-bottom: 0 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel > .term-header { justify-content: space-between; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-actions, html.tye-ts body #ts-pg-body > .ts-pg-panel .term-actions { display: flex; align-items: center; gap: 8px; } html.tye-ts body #ts-pg-body > .ts-pg-panel > :is(.term-header, .tasks-header, .ext-header) .tasks-btn-icon { width: 40px; height: 40px; min-height: 40px !important; padding: 0 !important; border-radius: 20px !important; display: inline-flex; align-items: center; justify-content: center; color: var(--ts-ink2) !important; background: var(--ts-press) !important; border: 0 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-btn-new { min-height: 40px !important; padding: 0 16px !important; border-radius: 20px !important; border: 0 !important; background: var(--ts-ink) !important; color: var(--ts-sheet) !important; font: 600 14px/1 Inter, system-ui, sans-serif !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-lang { font-size: 12px; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-editor-wrap:not(.collapsed) { min-height: 100px !important; } /* (sized for a finger: the <=480 "button { min-height: 40px }" had stretched the check circle and the switch) */ html.tye-ts body #ts-pg-body > .ts-pg-panel .task-check { width: 24px !important; height: 24px !important; min-height: 0 !important; padding: 0 !important; flex: none; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-item:not(.done) .task-check { background: transparent !important; border: 2px solid var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-check svg { width: 12px !important; height: 12px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle { width: 46px !important; height: 28px !important; min-height: 0 !important; border-radius: 14px !important; flex: none; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle::after { width: 24px !important; height: 24px !important; top: 2px !important; left: 2px !important; border-radius: 50% !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle.on::after { transform: translateX(18px) !important; } /* (the tasks search: the same field as Search chats) */ html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-search { height: 44px; min-height: 44px !important; padding: 0 14px !important; border: 0 !important; border-radius: 12px !important; background: var(--ts-press) !important; color: var(--ts-ink) !important; font: 400 16px/1.3 Inter, system-ui, sans-serif !important; box-sizing: border-box; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-search::placeholder { color: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-search:focus, html.tye-ts body #ts-pg-body > .search-panel .search-input-wrap:focus-within { box-shadow: inset 0 0 0 1.5px var(--ts-ink3) !important; outline: none !important; } /* ---------- the Projects screen: right rail and chat list (PROJECTS_RAIL_2026Q4) ---------- */ /* The rail (#ts-quick, touch_shell.js) shows here with New chat / Search chats / Projects / Manage chats, so the sidebar's own header row goes and the list keeps the rail's gutter on the right. Rows get the shell's type and a leading tile; the hover-only ⋯ shows (it opens the chat's menu on the rail). Selectors carry the view and ids to outrank cad_responsive.css's "html body aside#sidebar ..." !important rules, and also hold at 1025-1400px (coarse pointer), where those rules are absent. */ /* (the Properties drawer's class survives leaving the Model screen: it must not push this rail aside) */ html.tye-ts[data-ts-view="projects"] body:has(#rp.rpd-open, #v3d-rp.rpd-open) #ts-quick { right: calc(env(safe-area-inset-right, 0px) + 10px) !important; } html.tye-ts[data-ts-view="projects"] body #sidebar .sb-hdr { display: none !important; } html.tye-ts[data-ts-view="projects"] body #ts-proj-head { padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--ts-rail-gutter) 2px calc(env(safe-area-inset-left, 0px) + 18px); min-height: 44px; box-sizing: content-box; } html.tye-ts[data-ts-view="projects"] body #ts-proj-head h2 { font: 700 28px/1.15 Inter, system-ui, sans-serif; letter-spacing: -.02em; } html.tye-ts[data-ts-view="projects"] body #sidebar .side-group-label { padding: 12px var(--ts-rail-gutter) 6px calc(env(safe-area-inset-left, 0px) + 18px) !important; font: 600 13px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ts-ink3) !important; } html.tye-ts[data-ts-view="projects"] body #sidebar #session-list { padding: 0 var(--ts-rail-gutter) 20px calc(env(safe-area-inset-left, 0px) + 8px) !important; box-sizing: border-box !important; overscroll-behavior: contain; scrollbar-width: none; } html.tye-ts[data-ts-view="projects"] body #sidebar #session-list::-webkit-scrollbar { display: none; } /* a chat: tile, title and time, ⋯ */ html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item { position: relative; display: flex !important; align-items: center !important; gap: 12px; min-height: 62px !important; margin: 0 0 2px !important; padding: 8px 0 8px 8px !important; box-sizing: border-box; border: 0 !important; border-radius: 16px !important; background: transparent !important; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item::before { content: ''; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--ts-press); } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item::after { content: ''; position: absolute; left: 19px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; background-color: var(--ts-ink2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center / 20px 20px no-repeat; } /* (a design chat: the layers mark in the accent) */ html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item:has(.sess-cad-badge)::before { background: rgba(229, 50, 42, .10); } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item:has(.sess-cad-badge)::after { background-color: var(--ts-dot); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E"); } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item.active, html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item.ts-row-on, html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item:active { background: var(--ts-press) !important; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item.active::before, html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item.ts-row-on::before { background: var(--ts-sheet); box-shadow: 0 0 0 1px var(--ts-line); } @media (hover: hover) { html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item:not(.active):not(.ts-row-on):hover { background: var(--ts-press) !important; } } @media (hover: none) { html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item:not(.active):not(.ts-row-on):not(:active):hover { background: transparent !important; } } /* (chats a teammate shared: no side stripe - the Team pill says it) */ html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item.sess-shared-other { border-left: 0 !important; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item .sess-info { flex: 1 1 auto; min-width: 0; padding: 0 !important; } /* (24px lines: Thai marks above and below stay inside the ellipsis clip) */ html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item .sess-title { font: 500 16px/24px Inter, system-ui, sans-serif !important; color: var(--ts-ink) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item.active .sess-title { font-weight: 600 !important; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item .sess-meta { display: flex; align-items: center; gap: 6px; height: 18px; margin-top: 1px; min-width: 0; overflow: hidden; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item .sess-time { font: 400 13px/1.2 Inter, system-ui, sans-serif !important; color: var(--ts-ink3) !important; white-space: nowrap; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item .sess-cad-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; border: 0; background: rgba(229, 50, 42, .10); color: var(--ts-dot); font: 600 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item .sess-team-pill { flex: 0 1 auto; min-width: 0; max-width: 60%; height: 18px; padding: 0 7px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; letter-spacing: .02em; text-transform: none; display: inline-block !important; line-height: 16px; vertical-align: middle; /* PROJECTS_RAIL2_2026Q4 */ } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item .sess-team-pill svg { vertical-align: -1px; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-item .sess-cad-badge { flex: none; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-menu-wrap { flex: none; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-menu-btn, html.tye-ts[data-ts-view="projects"] body #sidebar .proj-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; min-height: 40px !important; margin: 0; padding: 0; border: 0; border-radius: 20px; background: transparent !important; color: var(--ts-ink3) !important; cursor: pointer; touch-action: manipulation; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-menu-btn svg, html.tye-ts[data-ts-view="projects"] body #sidebar .proj-menu-btn svg { width: 18px; height: 18px; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-menu-btn:active, html.tye-ts[data-ts-view="projects"] body #sidebar .proj-menu-btn:active { background: var(--ts-line) !important; color: var(--ts-ink) !important; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-menu-btn:focus-visible, html.tye-ts[data-ts-view="projects"] body #sidebar .proj-menu-btn:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } /* a project: its colour tile, name, count, chevron, ⋯; its chats indented under it */ html.tye-ts[data-ts-view="projects"] body #sidebar .proj-group { margin: 6px 0 2px; } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-hdr { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 0 8px 8px; box-sizing: border-box; border-radius: 16px; background: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-hdr:active, html.tye-ts[data-ts-view="projects"] body #sidebar .proj-hdr.ts-row-on { background: var(--ts-press); } @media (hover: none) { html.tye-ts[data-ts-view="projects"] body #sidebar .proj-hdr:not(.ts-row-on):not(:active):hover { background: transparent; } } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-icon { width: 42px; height: 42px; border-radius: 13px; opacity: 1; } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-icon svg { width: 20px; height: 20px; } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-name { font: 600 16px/24px Inter, system-ui, sans-serif; color: var(--ts-ink); } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-count { min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--ts-press); color: var(--ts-ink2); font: 600 12px/1 Inter, system-ui, sans-serif; } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-chevron { width: 14px; height: 14px; color: var(--ts-ink3); opacity: 1; } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-body { padding-left: 16px; } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-body > .sess-item { min-height: 59px !important; } html.tye-ts[data-ts-view="projects"] body #sidebar .proj-empty-hint { padding: 4px 8px 10px 62px; font: 400 13px/1.3 Inter, system-ui, sans-serif; color: var(--ts-ink3); } /* no chats yet */ html.tye-ts[data-ts-view="projects"] body #sidebar .sess-empty-hint { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 56px 12px 24px !important; gap: 14px !important; font: 500 15px/1.3 Inter, system-ui, sans-serif !important; color: var(--ts-ink3) !important; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-empty-hint::before { content: '' !important; flex: none; width: 56px !important; height: 56px !important; border-radius: 18px !important; border: 0 !important; background: var(--ts-press) !important; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-empty-hint::after { content: ''; position: absolute; width: 24px; height: 24px; margin-top: 16px; background-color: var(--ts-ink3); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center / 24px 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center / 24px 24px no-repeat; } html.tye-ts[data-ts-view="projects"] body #sidebar #session-list { position: relative; } html.tye-ts[data-ts-view="projects"] body #sidebar .sess-org-hint { margin: 0 0 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--ts-line); cursor: default; font: 400 12.5px/1.35 Inter, system-ui, sans-serif; color: var(--ts-ink3); } /* the rail's panels: a project's folder colour, a chat's current project */ html.tye-ts body #ts-casc .ts-cp-ic > svg[stroke] { width: 20px !important; height: 20px !important; } /* the list's toasts (Archived, Moved to project) rise above the tab bar */ html.tye-ts body #gx-toast { bottom: calc(var(--ts-space) + 12px) !important; z-index: 9060 !important; } /* -- New project / Edit project as a page -- */ html.tye-ts.ts-page-project body #proj-modal { display: none !important; } html.tye-ts body #ts-pg-body > #proj-modal-box { position: absolute; inset: 0; display: flex; flex-direction: column; width: auto !important; max-width: none !important; margin: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; overflow: hidden; } html.tye-ts body #ts-pg-body > #proj-modal-box .pmb-hdr { flex: none; display: flex; align-items: center; gap: 10px; height: 50px; margin: 4px 16px 4px; padding: 0 14px; border: 0 !important; border-radius: 14px; background: var(--ts-press); box-sizing: border-box; } html.tye-ts body #ts-pg-body > #proj-modal-box .pmb-hdr svg { flex: none; width: 20px; height: 20px; color: var(--ts-ink3); } html.tye-ts body #ts-pg-body > #proj-modal-box .pmb-hdr .search-esc-hint { display: none !important; } html.tye-ts body #ts-pg-body > #proj-modal-box #proj-modal-input { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0 !important; padding: 0; border: 0; background: transparent; outline: none; font: 500 17px/1.3 Inter, system-ui, sans-serif !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > #proj-modal-box #proj-modal-input::placeholder { color: var(--ts-ink3); font-weight: 400; } html.tye-ts body #ts-pg-body > #proj-modal-box .pmb-hdr:focus-within { box-shadow: inset 0 0 0 1.5px var(--ts-ink3); } html.tye-ts body #ts-pg-body > #proj-modal-box .pmb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 20px !important; background: transparent !important; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-colors-hdr { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-colors-lbl { font: 600 13px/1.3 Inter, system-ui, sans-serif !important; color: var(--ts-ink3) !important; text-transform: none !important; letter-spacing: 0 !important; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-color-dot { width: 18px; height: 18px; border-radius: 50%; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-colors { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-color-sw { border-radius: 50%; opacity: 1; min-height: 0; cursor: pointer; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-color-sw.sel { box-shadow: 0 0 0 2px var(--ts-sheet), 0 0 0 4px var(--ts-ink); transform: none; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-auto-row { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 18px; padding: 8px 12px; box-sizing: border-box; border-radius: 14px; background: var(--ts-press); cursor: pointer; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-auto-label { flex: 1 1 auto; font: 500 15px/1.3 Inter, system-ui, sans-serif !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-auto-count { min-width: 24px; height: 24px; padding: 0 7px; box-sizing: border-box; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ts-sheet); color: var(--ts-ink2); font: 600 12px/1 Inter, system-ui, sans-serif; } html.tye-ts body #ts-pg-body > #proj-modal-box .proj-modal-foot { flex: none; display: flex; padding: 12px 16px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))) !important; border-top: 1px solid var(--ts-line) !important; background: var(--ts-sheet) !important; } html.tye-ts body #ts-pg-body > #proj-modal-box .pmf-cancel { display: none !important; } html.tye-ts body #ts-pg-body > #proj-modal-box .pmf-ok { flex: 1 1 auto; min-height: 50px !important; padding: 0 20px !important; border: 0 !important; border-radius: 25px !important; background: var(--ts-ink) !important; color: var(--ts-sheet) !important; font: 600 16px/1 Inter, system-ui, sans-serif !important; touch-action: manipulation; } /* -- Manage chats as a page: the row checkboxes and tools show (they were hover-only) -- */ html.tye-ts.ts-page-sessmgr body #sess-mgr-modal { display: none !important; } html.tye-ts body #ts-pg-body > .smgr-panel { position: absolute; inset: 0; display: flex; flex-direction: column; width: auto !important; max-width: none !important; max-height: none !important; margin: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; transform: none !important; overflow: hidden; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-hdr { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; margin: 2px 16px 8px; padding: 0 14px; border: 0 !important; border-radius: 12px; background: var(--ts-press); color: var(--ts-ink3); box-sizing: border-box; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-hdr > svg { flex: none; width: 18px; height: 18px; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-hdr:focus-within { box-shadow: inset 0 0 0 1.5px var(--ts-ink3); } html.tye-ts body #ts-pg-body > .smgr-panel #smgr-search-inp { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0 !important; padding: 0; border: 0; background: transparent; outline: none; font: 400 16px/1.3 Inter, system-ui, sans-serif !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .smgr-panel #smgr-search-inp::placeholder { color: var(--ts-ink3); } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-cnt-badge, html.tye-ts body #ts-pg-body > .smgr-panel .smgr-hdr .search-esc-hint, html.tye-ts body #ts-pg-body > .smgr-panel .smgr-footer-r { display: none !important; } /* (Active / Archived: the house segmented control) */ html.tye-ts body #ts-pg-body > .smgr-panel .smgr-tabs { flex: none; display: flex; gap: 4px; margin: 0 16px 6px; padding: 3px; border: 0; border-radius: 12px; background: var(--ts-press); } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-tabs button { flex: 1 1 0; justify-content: center; min-height: 38px !important; padding: 0 10px; border-radius: 9px; border: 0; background: transparent; color: var(--ts-ink2); font: 600 14px/1 Inter, system-ui, sans-serif; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-tabs button.smgr-tab-on { background: var(--ts-sheet); color: var(--ts-ink); box-shadow: 0 1px 2px rgba(17, 20, 28, .08), 0 1px 6px rgba(17, 20, 28, .06); } html.tye-ts[data-theme="dark"] body #ts-pg-body > .smgr-panel .smgr-tabs button.smgr-tab-on { background: rgba(255, 255, 255, .12); box-shadow: none; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-tabs .smgr-tab-cnt { background: var(--ts-line) !important; color: var(--ts-ink2) !important; border-radius: 9px; padding: 2px 7px; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-tabs button.smgr-tab-on .smgr-tab-cnt { background: var(--ts-ink) !important; color: var(--ts-sheet) !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-bulk { flex: none; gap: 8px; min-height: 48px; padding: 0 16px 0 22px; border-bottom: 1px solid var(--ts-line); box-sizing: border-box; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-chkall-label { gap: 12px; font: 500 15px/1.2 Inter, system-ui, sans-serif; color: var(--ts-ink); min-width: 0; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-bulk-acts { gap: 6px; flex: none; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-bulk-acts button { min-height: 34px !important; padding: 0 12px; border-radius: 17px; border: 0; background: var(--ts-press); color: var(--ts-ink); font: 600 13px/1 Inter, system-ui, sans-serif; white-space: nowrap; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-bulk-acts button.smgr-danger { background: rgba(229, 50, 42, .10); color: var(--ts-dot); } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-bulk-acts button:disabled { opacity: .4; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 8px 12px !important; gap: 2px !important; scrollbar-width: none; } /* rows: the checkbox takes the icon's place and stays, the tools stay at the right */ html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row { min-height: 60px; padding: 8px 4px 8px 12px !important; gap: 12px !important; border-radius: 14px !important; background: transparent !important; -webkit-tap-highlight-color: transparent; cursor: default !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row.smgr-cur { background: var(--ts-press) !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row.smgr-cur::before, html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row .smgr-row-ico { display: none !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row .smgr-chk { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 36px !important; height: 44px !important; flex: none; opacity: 1 !important; pointer-events: auto !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-chk-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--ts-line2); box-sizing: border-box; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-chk input:checked ~ .smgr-chk-box, html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row .smgr-chk input:checked ~ .smgr-chk-box { background: var(--ts-ink) !important; border-color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-chk-box::after { border-color: var(--ts-sheet); width: 10px; height: 5px; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-chk input:indeterminate ~ .smgr-chk-box { background: transparent; border-color: var(--ts-ink); } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-chk-box::before { background: var(--ts-ink); width: 10px; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row-title { font: 500 16px/24px Inter, system-ui, sans-serif !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row.smgr-cur .smgr-row-title { color: var(--ts-ink) !important; font-weight: 600 !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row-meta { margin-top: 3px !important; gap: 6px !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row-time, html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row-msgs { font-size: 13px !important; color: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row-dot { background: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row-live { background: rgba(229, 50, 42, .10) !important; color: var(--ts-dot) !important; font: 600 10.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: .02em !important; text-transform: none !important; padding: 3px 7px !important; border-radius: 9px !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row .smgr-row-acts { position: static !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; flex: none; gap: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row .smgr-row-acts button { width: 38px; height: 40px; min-height: 40px !important; padding: 0 !important; border-radius: 19px !important; color: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row .smgr-row-acts button svg { width: 18px !important; height: 18px !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row .smgr-row-acts button:active { background: var(--ts-press) !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row .smgr-row-acts button.smgr-danger { color: var(--ts-dot) !important; } @media (hover: none) { html.tye-ts body #ts-pg-body > .smgr-panel .smgr-row:not(.smgr-cur):hover { background: transparent !important; } } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-empty { color: var(--ts-ink3); font-size: 15px; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-footer { flex: none; display: flex; justify-content: center; padding: 10px 16px calc(10px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))) !important; border-top: 1px solid var(--ts-line) !important; background: var(--ts-sheet) !important; } html.tye-ts body #ts-pg-body > .smgr-panel .smgr-footer-l button { min-height: 44px !important; padding: 0 18px; border: 0; border-radius: 22px; background: transparent; color: var(--ts-dot); font: 600 15px/1 Inter, system-ui, sans-serif; } /* ---------- one sheet: the Profile menu and its pages (SHEET_CONTINUOUS_2026Q4) ---------- */ /* While a page slides in or out of the Profile menu its box is see-through - the menu's surface is the sheet - and only its bar and content paint. With the menu under it the page adds no shadow of its own (the two would stack). */ html.tye-ts.ts-sc-mp body #mem-overlay #mem-box.mem-box { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } html.tye-ts.ts-sc-mp body #mem-overlay #mem-view-account.active { background: var(--ts-sheet); } html.tye-ts.ts-mpage.ts-mpage-sheet body #mem-overlay #mem-box.mem-box { box-shadow: none !important; } html.tye-ts.ts-sc-pg body #ts-pg-box { background: transparent; border-color: transparent; box-shadow: none; } html.tye-ts.ts-sc-pg body #ts-pg-body { background: var(--ts-sheet); } html.tye-ts.ts-page-sheet body #ts-pg-box { box-shadow: none; } /* (the rows slide inside the card, not over the scrim beside it on a tablet) */ html.tye-ts.ts-sc-mp body #ts-sheet.open, html.tye-ts.ts-sc-pg body #ts-sheet.open { overflow: hidden; } /* under the page once it is in: the menu is the page's size by position, not by a px height */ html.tye-ts.ts-sc-grown body #ts-sheet.open { top: calc(env(safe-area-inset-top, 0px) + 10px); max-height: none; } /* ---------- TERMS_SHEET_2026Q4: the Accept-the-Terms step as a page, like Account and settings ---------- */ html.tye-ts body #mem-terms-overlay,html.tye-ts body #mem-ob-overlay,html.tye-ts body #mem-overlay.is-auth,html.tye-ts body #mem-fpw-overlay,html.tye-ts body #mem-verify-overlay,html.tye-ts body .tye-vp-overlay,html.tye-ts body .tye-2fa-overlay,html.tye-ts body #tye-sess-expired{--tm-raise:var(--ts-sheet);--tm-card:var(--ts-sheet);--tm-ink:var(--ts-ink);--tm-ink2:var(--ts-ink2);--tm-ink3:var(--ts-ink3);--tm-line:var(--ts-line);--tm-press:var(--ts-press);--tm-accent:var(--ts-dot);--tm-btn:var(--ts-ink);--tm-btn-ink:var(--ts-sheet);--tm-scrim:var(--ts-scrim); padding:0;align-items:flex-end;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden} html.tye-ts body #mem-terms-overlay .mem-terms-modal{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 10px);bottom:0;left:max(0px, calc(50% - 280px));right:max(0px, calc(50% - 280px));width:auto;max-width:none;margin:0; border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.18);font-family:Inter, system-ui, sans-serif;animation:tsPageUp .34s cubic-bezier(.32, .72, 0, 1) both} html.tye-ts body #mem-terms-overlay.is-closing{opacity:1;transition:background-color .24s ease;background:transparent;pointer-events:none} html.tye-ts body #mem-terms-overlay.is-closing .mem-terms-modal{animation:tsPageDown .24s cubic-bezier(.32, .72, 0, 1) both} html.tye-ts body #mem-terms-overlay .mem-terms-bar{display:flex;align-items:center;justify-content:center;flex:none;min-height:66px;padding:12px 14px 10px} html.tye-ts body #mem-terms-overlay .mem-terms-bar-t{font:700 17px/1.25 Inter, system-ui, sans-serif;letter-spacing:-.01em;color:var(--ts-ink)} html.tye-ts body #mem-terms-overlay .mem-terms-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 20px 20px} html.tye-ts body #mem-terms-overlay .mem-terms-icon{width:64px;height:64px;border-radius:20px;background:var(--ts-press);border:0;margin:8px 0 18px} html.tye-ts body #mem-terms-overlay .mem-terms-icon svg{width:30px;height:30px} html.tye-ts body #mem-terms-overlay .mem-terms-h{font-size:24px;font-weight:700;margin-bottom:10px} html.tye-ts body #mem-terms-overlay .mem-terms-p{font-size:15px;margin-bottom:22px} html.tye-ts body #mem-terms-overlay .mem-terms-links{border-radius:16px} html.tye-ts body #mem-terms-overlay .mem-terms-link{min-height:54px;padding:0 16px;font-size:16px} html.tye-ts body #mem-terms-overlay .mem-terms-link svg{width:22px;height:22px} html.tye-ts body #mem-terms-overlay .mem-terms-link:hover{background:transparent} html.tye-ts body #mem-terms-overlay .mem-terms-link:active{background:var(--ts-press)} html.tye-ts body #mem-terms-overlay .mem-terms-foot{flex:none;gap:8px;padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--ts-line);background:var(--ts-sheet)} html.tye-ts body #mem-terms-overlay .mem-terms-check{padding:12px 14px;border-radius:14px;background:var(--ts-press);border:0;font-size:14.5px;color:var(--ts-ink2)} html.tye-ts body #mem-terms-overlay .mem-terms-check input{width:22px;height:22px} html.tye-ts body #mem-terms-overlay .mem-terms-go{height:52px;min-height:52px !important;border-radius:26px;font-size:16px;margin-top:4px} html.tye-ts body #mem-terms-overlay .mem-terms-out{height:44px;min-height:44px !important;border-radius:22px;font-size:15px} html.tye-ts body #mem-terms-overlay .mem-terms-out:hover{background:transparent;color:var(--ts-ink3)} html.tye-ts body #mem-terms-overlay .mem-terms-out:active{background:var(--ts-press)} /* (short screens - a phone on its side: the header goes, the whole sheet scrolls and a compact footer stays at its foot) */ @media (max-height: 500px){ html.tye-ts body #mem-terms-overlay .mem-terms-modal{display:block;overflow-y:auto;overscroll-behavior:contain} html.tye-ts body #mem-terms-overlay .mem-terms-bar{display:none} html.tye-ts body #mem-terms-overlay .mem-terms-body{overflow:visible;padding:18px 20px 12px} html.tye-ts body #mem-terms-overlay .mem-terms-icon{width:44px;height:44px;border-radius:14px;margin:0 0 10px} html.tye-ts body #mem-terms-overlay .mem-terms-icon svg{width:22px;height:22px} html.tye-ts body #mem-terms-overlay .mem-terms-h{font-size:20px;margin-bottom:6px} html.tye-ts body #mem-terms-overlay .mem-terms-p{font-size:14px;margin-bottom:12px} html.tye-ts body #mem-terms-overlay .mem-terms-link{min-height:46px} html.tye-ts body #mem-terms-overlay .mem-terms-foot{position:sticky;bottom:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 20px calc(10px + env(safe-area-inset-bottom, 0px))} html.tye-ts body #mem-terms-overlay .mem-terms-check,html.tye-ts body #mem-terms-overlay .mem-err{flex:1 1 100%;padding:8px 12px} html.tye-ts body #mem-terms-overlay .mem-terms-go{flex:1 1 auto;width:auto;height:44px;min-height:44px !important;border-radius:22px;margin-top:0} html.tye-ts body #mem-terms-overlay .mem-terms-out{flex:none;width:auto;height:44px;min-height:44px !important;padding:0 16px} } @media (prefers-reduced-motion: reduce){html.tye-ts body #mem-terms-overlay .mem-terms-modal,html.tye-ts body #mem-terms-overlay.is-closing .mem-terms-modal{animation:none}} /* ---------- ONBOARD_SHEET_2026Q4: onboarding as a page, like the Terms step and Account and settings ---------- */ html.tye-ts body #mem-ob-overlay .mem-ob-modal{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 10px);bottom:0;left:max(0px, calc(50% - 280px));right:max(0px, calc(50% - 280px));width:auto;max-width:none;margin:0; border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.18);font-family:Inter, system-ui, sans-serif;animation:tsPageUp .34s cubic-bezier(.32, .72, 0, 1) both} html.tye-ts body #mem-ob-overlay.is-closing{opacity:1;transition:background-color .24s ease;background:transparent;pointer-events:none} html.tye-ts body #mem-ob-overlay.is-closing .mem-ob-modal{animation:tsPageDown .24s cubic-bezier(.32, .72, 0, 1) both} html.tye-ts body #mem-ob-overlay .mem-ob-bar{position:relative;top:auto;right:auto;display:grid;grid-template-columns:72px minmax(0, 1fr) 72px;align-items:center;flex:none;min-height:66px;padding:12px 14px 10px} html.tye-ts body #mem-ob-overlay .mem-ob-bar-t{display:block;grid-column:2;text-align:center;font:700 17px/1.25 Inter, system-ui, sans-serif;letter-spacing:-.01em;color:var(--ts-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tye-ts body #mem-ob-overlay .mem-ob-skip{grid-column:3;justify-self:end;height:40px;min-height:40px !important;padding:0 14px;border-radius:20px;font-size:15px;color:var(--ts-ink2)} html.tye-ts body #mem-ob-overlay .mem-ob-skip:hover{background:transparent;color:var(--ts-ink2)} html.tye-ts body #mem-ob-overlay .mem-ob-skip:active{background:var(--ts-press)} html.tye-ts body #mem-ob-overlay .mem-ob-body{flex:1 1 auto;min-height:0 !important;overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 20px} html.tye-ts body #mem-ob-overlay .mem-ob-h{padding-right:0;font-size:24px;font-weight:700} html.tye-ts body #mem-ob-overlay .mem-ob-p{font-size:15px;margin-bottom:18px} html.tye-ts body #mem-ob-overlay .mem-ob-features,html.tye-ts body #mem-ob-overlay .mem-ob-prompts{gap:10px} html.tye-ts body #mem-ob-overlay .mem-ob-f{padding:14px;border:0;border-radius:16px;background:var(--ts-press)} html.tye-ts body #mem-ob-overlay .mem-ob-f-body b{font-size:15px} html.tye-ts body #mem-ob-overlay .mem-ob-f-body span{font-size:13.5px} html.tye-ts body #mem-ob-overlay .mem-ob-label{font-size:14px} html.tye-ts body #mem-ob-overlay .mem-ob-ta{border-radius:14px;border-color:transparent;background:var(--ts-press)} html.tye-ts body #mem-ob-overlay .mem-ob-ta:focus{background:var(--ts-sheet);border-color:var(--ts-dot)} html.tye-ts body #mem-ob-overlay .mem-ob-note{font-size:13px} html.tye-ts body #mem-ob-overlay .mem-ob-prompt{min-height:0 !important;padding:14px 16px;border:0;border-radius:16px;background:var(--ts-press)} html.tye-ts body #mem-ob-overlay .mem-ob-prompt:hover{background:var(--ts-press);border-color:transparent} html.tye-ts body #mem-ob-overlay .mem-ob-prompt b{font-size:15px} html.tye-ts body #mem-ob-overlay .mem-ob-prompt span{font-size:13.5px} html.tye-ts body #mem-ob-overlay .mem-ob-nav{flex:none;gap:14px;margin:0;padding:12px 20px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px)));border-top:1px solid var(--ts-line);background:var(--ts-sheet)} html.tye-ts body #mem-ob-overlay .mem-ob-actions{flex:1;justify-content:flex-end;gap:10px} html.tye-ts body #mem-ob-overlay .mem-ob-secondary,html.tye-ts body #mem-ob-overlay .mem-ob-primary{height:50px;min-height:50px !important;padding:0 20px;border-radius:25px;font-size:16px} html.tye-ts body #mem-ob-overlay .mem-ob-secondary{flex:none;min-width:88px} html.tye-ts body #mem-ob-overlay .mem-ob-primary{flex:1 1 auto;max-width:220px} html.tye-ts body #mem-ob-overlay .mem-ob-secondary:hover:not(:disabled){background:transparent;color:var(--ts-ink2)} html.tye-ts body #mem-ob-overlay .mem-ob-primary:hover:not(:disabled){opacity:1} html.tye-ts[data-theme="dark"] body #mem-ob-overlay{--tm-accent-text:#ff8a80} @media (max-width: 520px){html.tye-ts body #mem-ob-overlay .mem-ob-features,html.tye-ts body #mem-ob-overlay .mem-ob-prompts{grid-template-columns:1fr}} @media (min-width: 521px){html.tye-ts body #mem-ob-overlay .mem-ob-features,html.tye-ts body #mem-ob-overlay .mem-ob-prompts{grid-template-columns:1fr 1fr}} /* (short screens - a phone on its side: a slim header, the slide scrolls, a slim footer) */ @media (max-height: 500px){ html.tye-ts body #mem-ob-overlay .mem-ob-bar{min-height:46px;padding:4px 10px 2px} html.tye-ts body #mem-ob-overlay .mem-ob-bar-t{font-size:15px} html.tye-ts body #mem-ob-overlay .mem-ob-body{padding:4px 20px 14px} html.tye-ts body #mem-ob-overlay .mem-ob-h{font-size:20px;margin-bottom:6px} html.tye-ts body #mem-ob-overlay .mem-ob-p{font-size:14px;margin-bottom:12px} html.tye-ts body #mem-ob-overlay .mem-ob-nav{padding:8px 20px calc(8px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px)))} html.tye-ts body #mem-ob-overlay .mem-ob-secondary,html.tye-ts body #mem-ob-overlay .mem-ob-primary{height:42px;min-height:42px !important;border-radius:21px;font-size:15px} } @media (prefers-reduced-motion: reduce){html.tye-ts body #mem-ob-overlay .mem-ob-modal,html.tye-ts body #mem-ob-overlay.is-closing .mem-ob-modal{animation:none}} /* ---------- SIGNIN_SHEET_2026Q4: sign-in as a page, like the Terms step and Account and settings ---------- (the sign-in view only: .is-auth is off while the account view - and its own page stack - is showing) */ html.tye-ts[data-theme="dark"] body #mem-overlay.is-auth,html.tye-ts[data-theme="dark"] body #mem-fpw-overlay,html.tye-ts[data-theme="dark"] body #mem-verify-overlay, html.tye-ts[data-theme="dark"] body .tye-vp-overlay,html.tye-ts[data-theme="dark"] body .tye-2fa-overlay,html.tye-ts[data-theme="dark"] body #tye-sess-expired{--tm-accent-text:#ff8a80;--tm-raise:#3a3c42} html.tye-ts body #mem-overlay.is-auth{padding:0 !important;align-items:flex-end !important;background:var(--ts-scrim) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important} html.tye-ts body #mem-overlay.is-auth #mem-box.mem-box{position:fixed !important;top:calc(env(safe-area-inset-top, 0px) + 10px) !important;bottom:0 !important;left:max(0px, calc(50% - 280px)) !important;right:max(0px, calc(50% - 280px)) !important; width:auto !important;max-width:none !important;height:auto !important;max-height:none !important;margin:0 !important;padding:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important; background:var(--ts-sheet) !important;color:var(--ts-ink);border:1px solid var(--ts-line) !important;border-bottom:0 !important;border-radius:22px 22px 0 0 !important;box-shadow:0 -12px 40px rgba(0,0,0,.18) !important; font-family:Inter, system-ui, sans-serif;animation:tsPageUp .34s cubic-bezier(.32, .72, 0, 1) both !important} html.tye-ts body #mem-overlay.is-auth.is-closing{opacity:1;background:transparent !important;transition:background-color .24s ease;pointer-events:none} html.tye-ts body #mem-overlay.is-auth.is-closing #mem-box.mem-box{animation:tsPageDown .24s cubic-bezier(.32, .72, 0, 1) both !important} html.tye-ts body #mem-overlay.is-auth #mem-handle,html.tye-ts body #mem-overlay.is-auth #mem-esc-chip{display:none !important} html.tye-ts body #mem-view-auth.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden} html.tye-ts body #mem-view-auth .mem-auth-bar{display:grid;grid-template-columns:44px minmax(0, 1fr) 44px;align-items:center;gap:10px;flex:none;min-height:66px;padding:12px 14px 10px;background:var(--ts-sheet)} html.tye-ts body #mem-view-auth .mem-auth-bar-t{display:block;grid-column:2;margin:0;text-align:center;font:700 17px/1.25 Inter, system-ui, sans-serif;letter-spacing:-.01em;color:var(--ts-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tye-ts body #mem-view-auth .mem-auth-bb{position:static;width:44px;height:44px;min-height:44px !important;margin:0;padding:0;border:0;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation; background:var(--ts-sheet);color:var(--ts-ink);box-shadow:0 1px 2px rgba(17, 20, 28, .06), 0 4px 16px rgba(17, 20, 28, .12);-webkit-tap-highlight-color:transparent;transition:transform .12s ease} html.tye-ts[data-theme="dark"] body #mem-view-auth .mem-auth-bb{background:rgba(255, 255, 255, .08);box-shadow:none} html.tye-ts body #mem-view-auth .mem-auth-bb[hidden]{display:inline-flex;visibility:hidden} html.tye-ts body #mem-view-auth .mem-auth-bb:hover{background:var(--ts-sheet);color:var(--ts-ink)} html.tye-ts[data-theme="dark"] body #mem-view-auth .mem-auth-bb:hover{background:rgba(255, 255, 255, .08)} html.tye-ts body #mem-view-auth .mem-auth-bb:active{transform:scale(.92)} html.tye-ts body #mem-view-auth .mem-auth-bb svg{width:22px;height:22px} html.tye-ts body #mem-view-auth #mem-auth-back{grid-column:1} html.tye-ts body #mem-view-auth .mem-auth-x{grid-column:3} /* (the forced gate cannot be closed) */ html.tye-ts body #mem-overlay.mem-forced #mem-view-auth .mem-auth-x{visibility:hidden} html.tye-ts body #mem-view-auth .mem-auth-inner{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 20px calc(24px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px)))} html.tye-ts body #mem-view-auth .mem-auth-brand{margin:6px 0 20px;padding-right:0} html.tye-ts body #mem-view-auth .mem-auth-h{font-size:26px;font-weight:700} html.tye-ts body #mem-view-auth .mem-auth-sub{font-size:15px} html.tye-ts body #mem-view-auth .mem-err,html.tye-ts body #mem-view-auth .mem-ok{border-radius:14px;font-size:14.5px} html.tye-ts body #mem-view-auth .mem-field label{font-size:14px} html.tye-ts body #mem-view-auth .mem-field-hint{font-size:13px} html.tye-ts body #mem-view-auth .mem-input-icon{left:16px} html.tye-ts body #mem-view-auth .mem-field input{height:52px;padding-left:46px;border-radius:14px;font-size:16px !important;background:var(--ts-press) !important;border-color:transparent !important} html.tye-ts body #mem-view-auth #mem-in-pwd,html.tye-ts body #mem-view-auth #mem-reg-pwd{padding-right:54px} html.tye-ts body #mem-view-auth .mem-field input:focus{background:var(--ts-sheet) !important;border-color:var(--ts-dot) !important} html.tye-ts body #mem-view-auth .mem-pwd-toggle{right:4px;width:44px;height:44px;min-height:44px !important;border-radius:22px} html.tye-ts body #mem-view-auth .mem-pwd-toggle:hover{background:transparent;color:var(--ts-ink3)} html.tye-ts body #mem-view-auth .mem-pwd-toggle.shown:hover{color:var(--ts-ink)} html.tye-ts body #mem-view-auth .mem-pwd-toggle:active{background:var(--ts-press)} html.tye-ts body #mem-view-auth .mem-sbtn{height:52px;min-height:52px !important;margin-top:6px;border-radius:26px;font-size:16px} html.tye-ts body #mem-view-auth .mem-sbtn:hover:not(:disabled){opacity:1} html.tye-ts body #mem-view-auth .mem-social-label{font-size:13.5px} html.tye-ts body #mem-view-auth .mem-tos{gap:12px;font-size:14px} html.tye-ts body #mem-view-auth .mem-tos input[type="checkbox"]{width:22px;height:22px;margin-top:0} html.tye-ts body #mem-view-auth .mem-tos-hint{font-size:13px} html.tye-ts body #mem-view-auth .mem-social-btn{height:52px;min-height:52px !important;border-radius:26px;font-size:16px;background:transparent;border-color:var(--ts-line2)} html.tye-ts body #mem-view-auth .mem-social-btn:hover:not(:disabled){background:transparent;border-color:var(--ts-line2)} html.tye-ts body #mem-view-auth .mem-social-btn:not(:disabled):active{background:var(--ts-press)} html.tye-ts body #mem-view-auth .mem-email-pill{padding:8px 8px 8px 10px;border:0;border-radius:18px;background:var(--ts-press)} html.tye-ts body #mem-view-auth .mem-email-pill-text{font-size:15px} html.tye-ts body #mem-view-auth .mem-email-pill-edit{height:36px;min-height:36px !important;padding:0 14px;border-radius:18px;font-size:14px;color:var(--ts-ink)} html.tye-ts body #mem-view-auth .mem-email-pill-edit:hover{background:transparent;color:var(--ts-ink)} html.tye-ts body #mem-view-auth .mem-email-pill-edit:active{background:var(--ts-sheet)} html.tye-ts body #mem-view-auth .mem-tabs{margin-bottom:18px;padding:4px;border:0;border-radius:22px;background:var(--ts-press)} html.tye-ts body #mem-view-auth .mem-tab{height:40px;min-height:40px !important;border-radius:18px;font-size:15px} html.tye-ts body #mem-view-auth .mem-tab:hover:not(.active){color:var(--tm-ink3)} html.tye-ts body #mem-view-auth .mem-tab.active{background:var(--tm-raise);box-shadow:0 1px 3px rgba(17, 20, 28, .14)} html.tye-ts body #mem-view-auth .mem-forgot a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:15px} html.tye-ts body #mem-view-auth .mem-forgot a:hover{text-decoration:none} /* (Back is in the header) */ html.tye-ts body #mem-view-auth .mem-step-back{display:none} html.tye-ts body #mem-view-auth .mem-trust{font-size:12.5px} /* (short screens - a phone on its side: a slim header, no brand row) */ @media (max-height: 500px){ html.tye-ts body #mem-view-auth .mem-auth-bar{min-height:48px;padding:4px 10px 2px} html.tye-ts body #mem-view-auth .mem-auth-bar-t{font-size:15px} html.tye-ts body #mem-view-auth .mem-auth-bb{width:40px;height:40px;min-height:40px !important;border-radius:20px} html.tye-ts body #mem-view-auth .mem-auth-inner{padding-top:4px} html.tye-ts body #mem-view-auth .mem-auth-brand{display:none} html.tye-ts body #mem-view-auth .mem-auth-head{margin-bottom:14px} html.tye-ts body #mem-view-auth .mem-auth-h{font-size:21px} html.tye-ts body #mem-view-auth .mem-auth-sub{font-size:14px} html.tye-ts body #mem-view-auth .mem-field input{height:46px} html.tye-ts body #mem-view-auth .mem-sbtn,html.tye-ts body #mem-view-auth .mem-social-btn{height:46px;min-height:46px !important;border-radius:23px} } @media (prefers-reduced-motion: reduce){html.tye-ts body #mem-overlay.is-auth #mem-box.mem-box,html.tye-ts body #mem-overlay.is-auth.is-closing #mem-box.mem-box{animation:none !important}} /* the forgot-password, verification-code and two-factor dialogs over it: pages too, their buttons pinned at the foot (above the on-screen keyboard) */ html.tye-ts body #mem-fpw-overlay .mem-fpw-modal,html.tye-ts body .tye-vp-card,html.tye-ts body .tye-2fa-card,html.tye-ts body #mem-verify-overlay .mem-fpw-modal{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 10px);bottom:0;left:max(0px, calc(50% - 280px));right:max(0px, calc(50% - 280px)); width:auto;max-width:none;margin:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:24px 20px 0;border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.18); font-family:Inter, system-ui, sans-serif;animation:tsPageUp .34s cubic-bezier(.32, .72, 0, 1) both} html.tye-ts body .tye-vp-overlay,html.tye-ts body .tye-2fa-overlay{padding:0} html.tye-ts body #mem-fpw-overlay.is-closing,html.tye-ts body #mem-verify-overlay.is-closing{opacity:1;background:transparent;transition:background-color .24s ease;pointer-events:none} html.tye-ts body #mem-fpw-overlay.is-closing .mem-fpw-modal,html.tye-ts body #mem-verify-overlay.is-closing .mem-fpw-modal{animation:tsPageDown .24s cubic-bezier(.32, .72, 0, 1) both} html.tye-ts body #mem-fpw-overlay .mem-fpw-modal h3,html.tye-ts body .tye-vp-h,html.tye-ts body .tye-2fa-h,html.tye-ts body #mem-verify-overlay .mem-fpw-modal h3{font-size:24px;font-weight:700} html.tye-ts body #mem-fpw-overlay .mem-fpw-modal > p,html.tye-ts body .tye-vp-sub,html.tye-ts body .tye-2fa-sub,html.tye-ts body #mem-verify-overlay .mem-fpw-modal > p{font-size:15px} html.tye-ts body .tye-vp-icon,html.tye-ts body .tye-2fa-icon{width:64px;height:64px;margin:4px 0 18px;border:0;border-radius:20px;background:var(--ts-press)} html.tye-ts body .tye-vp-icon svg,html.tye-ts body .tye-2fa-icon svg{width:30px;height:30px} html.tye-ts body #mem-fpw-overlay .mem-fpw-label,html.tye-ts body .tye-vp-label,html.tye-ts body .tye-2fa-label,html.tye-ts body #mem-verify-overlay .mem-fpw-label{font-size:14px} html.tye-ts body #mem-fpw-overlay .mem-fpw-input,html.tye-ts body .tye-vp-input,html.tye-ts body .tye-2fa-input,html.tye-ts body #mem-verify-overlay .mem-fpw-input{height:52px;border-color:transparent;border-radius:14px;background:var(--ts-press);font-size:16px} html.tye-ts body #mem-fpw-overlay .mem-fpw-code-input,html.tye-ts body .tye-vp-input.code,html.tye-ts body .tye-2fa-input,html.tye-ts body #mem-verify-overlay .mem-fpw-code-input{height:60px;font-size:26px !important} html.tye-ts body #mem-fpw-overlay .mem-fpw-input:focus,html.tye-ts body .tye-vp-input:focus,html.tye-ts body .tye-2fa-input:focus,html.tye-ts body #mem-verify-overlay .mem-fpw-input:focus{background:var(--ts-sheet);border-color:var(--ts-dot)} html.tye-ts body #mem-fpw-overlay .mem-fpw-hint,html.tye-ts body #mem-verify-overlay .mem-fpw-hint{border-radius:14px;background:var(--ts-press);font-size:14px} html.tye-ts body #mem-fpw-overlay #mem-fpw-step1,html.tye-ts body #mem-fpw-overlay #mem-fpw-step2{padding-bottom:4px} html.tye-ts body #mem-fpw-overlay .mem-fpw-resend a,html.tye-ts body #mem-verify-overlay .mem-fpw-resend a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14.5px} html.tye-ts body #mem-fpw-overlay .mem-fpw-err,html.tye-ts body #mem-fpw-overlay .mem-fpw-ok,html.tye-ts body .tye-vp-err,html.tye-ts body .tye-2fa-err,html.tye-ts body #mem-verify-overlay .mem-fpw-err,html.tye-ts body #mem-verify-overlay .mem-fpw-ok{border-radius:14px;font-size:14px} html.tye-ts body .tye-vp-hint,html.tye-ts body .tye-2fa-hint{font-size:13.5px} html.tye-ts body .tye-vp-resend{font-size:14px} html.tye-ts body .tye-vp-resend-btn{min-height:44px !important} html.tye-ts body #mem-fpw-overlay .mem-fpw-actions,html.tye-ts body .tye-vp-row,html.tye-ts body .tye-2fa-row,html.tye-ts body #mem-verify-overlay .mem-fpw-actions{position:sticky;bottom:0;z-index:1;display:flex;flex-direction:column-reverse;gap:6px;margin:auto -20px 0; padding:14px 20px calc(14px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px)));border-top:1px solid var(--ts-line);background:var(--ts-sheet)} html.tye-ts body #mem-fpw-overlay .mem-fpw-actions button,html.tye-ts body .tye-vp-btn,html.tye-ts body .tye-2fa-btn,html.tye-ts body #mem-verify-overlay .mem-fpw-actions button{flex:none;width:100%;padding:0 20px;font-size:16px} html.tye-ts body #mem-fpw-overlay .mem-save-btn,html.tye-ts body .tye-vp-btn-primary,html.tye-ts body .tye-2fa-btn-primary,html.tye-ts body #mem-verify-overlay .mem-save-btn{height:52px;min-height:52px !important;border-radius:26px} html.tye-ts body #mem-fpw-overlay .mem-icon-btn,html.tye-ts body .tye-vp-btn-ghost,html.tye-ts body .tye-2fa-btn-ghost,html.tye-ts body #mem-verify-overlay .mem-icon-btn{height:44px;min-height:44px !important;border:0;border-radius:22px;background:transparent;color:var(--ts-ink2);font-size:15px} html.tye-ts body #mem-fpw-overlay .mem-icon-btn:hover,html.tye-ts body .tye-vp-btn-ghost:hover,html.tye-ts body .tye-2fa-btn-ghost:hover,html.tye-ts body #mem-verify-overlay .mem-icon-btn:hover{background:transparent;color:var(--ts-ink2)} html.tye-ts body #mem-fpw-overlay .mem-icon-btn:active,html.tye-ts body .tye-vp-btn-ghost:active,html.tye-ts body .tye-2fa-btn-ghost:active,html.tye-ts body #mem-verify-overlay .mem-icon-btn:active{background:var(--ts-press)} html.tye-ts body #mem-fpw-overlay .mem-save-btn:hover,html.tye-ts body .tye-vp-btn-primary:hover:not([disabled]),html.tye-ts body .tye-2fa-btn-primary:hover,html.tye-ts body #mem-verify-overlay .mem-save-btn:hover{opacity:1} @media (max-height: 500px){ html.tye-ts body #mem-fpw-overlay .mem-fpw-modal,html.tye-ts body .tye-vp-card,html.tye-ts body .tye-2fa-card,html.tye-ts body #mem-verify-overlay .mem-fpw-modal{padding-top:14px} html.tye-ts body .tye-vp-icon,html.tye-ts body .tye-2fa-icon{display:none} html.tye-ts body #mem-fpw-overlay .mem-fpw-modal h3,html.tye-ts body .tye-vp-h,html.tye-ts body .tye-2fa-h,html.tye-ts body #mem-verify-overlay .mem-fpw-modal h3{font-size:20px} html.tye-ts body #mem-fpw-overlay .mem-fpw-actions,html.tye-ts body .tye-vp-row,html.tye-ts body .tye-2fa-row,html.tye-ts body #mem-verify-overlay .mem-fpw-actions{flex-direction:row-reverse;padding-top:8px;padding-bottom:calc(8px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px)))} html.tye-ts body #mem-fpw-overlay .mem-fpw-actions button,html.tye-ts body .tye-vp-btn,html.tye-ts body .tye-2fa-btn,html.tye-ts body #mem-verify-overlay .mem-fpw-actions button{flex:1 1 0;width:auto;height:44px;min-height:44px !important;border-radius:22px} } @media (prefers-reduced-motion: reduce){html.tye-ts body #mem-fpw-overlay .mem-fpw-modal,html.tye-ts body #mem-fpw-overlay.is-closing .mem-fpw-modal,html.tye-ts body #mem-verify-overlay .mem-fpw-modal,html.tye-ts body #mem-verify-overlay.is-closing .mem-fpw-modal,html.tye-ts body .tye-vp-card,html.tye-ts body .tye-2fa-card{animation:none}} /* VERIFY_PROMPT_THEME_2026Q4: the verification-code prompt is the same sheet, with a resend row */ html.tye-ts body #mem-verify-overlay #mem-verify-resend-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 6px} html.tye-ts body #mem-verify-overlay #mem-verify-resend-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 6px} /* ---------- SESSION_NOTICE_2026Q4: "You've been signed out" as a page, like the sign-in page it leads to ---------- */ html.tye-ts body #tye-sess-expired{padding:0;align-items:flex-end} html.tye-ts body #tye-sess-expired .tse-card{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 10px);bottom:0;left:max(0px, calc(50% - 280px));right:max(0px, calc(50% - 280px));width:auto;max-width:none;margin:0; border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.18);font-family:Inter, system-ui, sans-serif;animation:tsPageUp .34s cubic-bezier(.32, .72, 0, 1) both} html.tye-ts body #tye-sess-expired.is-closing{opacity:1;background:transparent;transition:background-color .24s ease} html.tye-ts body #tye-sess-expired.is-closing .tse-card{animation:tsPageDown .24s cubic-bezier(.32, .72, 0, 1) both} /* ("Sign in again": the sign-in page slides up under it, the same shape - it stays put until it is removed) */ html.tye-ts body #tye-sess-expired.tse-handoff,html.tye-ts body #tye-sess-expired.tse-handoff.is-closing{background:transparent;transition:background-color .2s ease} html.tye-ts body #tye-sess-expired.tse-handoff .tse-card{animation:none} html.tye-ts body #tye-sess-expired .tse-bar{display:grid;grid-template-columns:44px minmax(0, 1fr) 44px;align-items:center;gap:10px;flex:none;min-height:66px;padding:12px 14px 10px} html.tye-ts body #tye-sess-expired .tse-bar-t{display:block;grid-column:2;text-align:center;font:700 17px/1.25 Inter, system-ui, sans-serif;letter-spacing:-.01em;color:var(--ts-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tye-ts body #tye-sess-expired .tse-x{position:static;grid-column:3;width:44px;height:44px;min-height:44px !important;border-radius:22px;background:var(--ts-sheet);color:var(--ts-ink); box-shadow:0 1px 2px rgba(17, 20, 28, .06), 0 4px 16px rgba(17, 20, 28, .12);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease} html.tye-ts[data-theme="dark"] body #tye-sess-expired .tse-x{background:rgba(255, 255, 255, .08);box-shadow:none} html.tye-ts body #tye-sess-expired .tse-x:hover{background:var(--ts-sheet);color:var(--ts-ink)} html.tye-ts[data-theme="dark"] body #tye-sess-expired .tse-x:hover{background:rgba(255, 255, 255, .08)} html.tye-ts body #tye-sess-expired .tse-x:active{transform:scale(.92)} html.tye-ts body #tye-sess-expired .tse-x svg{width:22px;height:22px} html.tye-ts body #tye-sess-expired .tse-main{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 20px 20px} html.tye-ts body #tye-sess-expired .tse-ic{width:64px;height:64px;margin:8px 0 18px;border:0;border-radius:20px;background:var(--ts-press)} html.tye-ts body #tye-sess-expired .tse-ic svg{width:30px;height:30px} html.tye-ts body #tye-sess-expired .tse-title{font-size:26px;font-weight:700;margin-bottom:10px} html.tye-ts body #tye-sess-expired .tse-body{font-size:15px} html.tye-ts body #tye-sess-expired .tse-foot{flex:none;padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--ts-line);background:var(--ts-sheet)} html.tye-ts body #tye-sess-expired .tse-primary{height:52px;min-height:52px !important;border-radius:26px;font-size:16px} html.tye-ts body #tye-sess-expired .tse-primary:hover{opacity:1} @media (max-height: 500px){ html.tye-ts body #tye-sess-expired .tse-bar{min-height:48px;padding:4px 10px 2px} html.tye-ts body #tye-sess-expired .tse-bar-t{font-size:15px} html.tye-ts body #tye-sess-expired .tse-x{width:40px;height:40px;min-height:40px !important;border-radius:20px} html.tye-ts body #tye-sess-expired .tse-main{padding-top:4px} html.tye-ts body #tye-sess-expired .tse-ic{display:none} html.tye-ts body #tye-sess-expired .tse-title{font-size:21px;margin-bottom:6px} html.tye-ts body #tye-sess-expired .tse-foot{padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))} html.tye-ts body #tye-sess-expired .tse-primary{height:46px;min-height:46px !important;border-radius:23px} } @media (prefers-reduced-motion: reduce){html.tye-ts body #tye-sess-expired .tse-card,html.tye-ts body #tye-sess-expired.is-closing .tse-card{animation:none}} /* ---------- AI_ENGINE_PAGES_2026Q4: AI Engine's menu and its pages on the account page stack ---------- */ html.tye-ts #mem-panel-ai,html.tye-ts #mem-panel-billing,html.tye-ts #mem-panel-account,html.tye-ts #mem-panel-orgs,html.tye-ts .aie-page{--aie-card:var(--ts-press);--aie-line:var(--ts-line);--aie-hover:transparent;--aie-tint:var(--ts-sheet); --aie-txt:var(--ts-ink);--aie-txt2:var(--ts-ink2);--aie-txt3:var(--ts-ink3);--aie-field:var(--ts-press);--aie-fline:var(--ts-line2);--aie-accent:var(--ts-dot); --aie-btn:var(--ts-ink);--aie-btnink:var(--ts-sheet)} html.tye-ts .aie-crumbs{display:none} html.tye-ts #mem-panel-ai .aie-menu,html.tye-ts .aie-page .aie-body{max-width:none} html.tye-ts #mem-panel-ai .aie-menu{margin-top:24px} html.tye-ts .aie-note{font-size:15px} html.tye-ts .aie-note.sm{font-size:13.5px} html.tye-ts .aie-sec{margin:26px 4px 8px;font-size:12.5px} html.tye-ts .aie-list{border:0;border-radius:16px} html.tye-ts .aie-row{min-height:62px;padding:10px 16px} html.tye-ts button.aie-row:active,html.tye-ts .aie-act:active,html.tye-ts .aie-chip:active,html.tye-ts .aie-eye:active{background:color-mix(in srgb, var(--ts-ink) 7%, transparent)} html.tye-ts .aie-l{font-size:16px} html.tye-ts .aie-d{font-size:13.5px} html.tye-ts .aie-h{font-size:20px;font-weight:700} html.tye-ts .aie-card{padding:16px;border:0;border-radius:16px} html.tye-ts .aie-card .aie-input,html.tye-ts .aie-card .aie-select{background:var(--ts-sheet)} html.tye-ts .aie-label{font-size:14px} html.tye-ts .aie-input,html.tye-ts .aie-select{height:52px;border-color:transparent;border-radius:14px;font-size:16px !important} html.tye-ts .aie-input:focus,html.tye-ts .aie-select:focus{border-color:var(--ts-dot);box-shadow:none;background:var(--ts-sheet)} html.tye-ts .aie-inwrap .aie-input{padding-right:54px} html.tye-ts .aie-eye{right:4px;width:44px;height:44px;min-height:44px !important;border-radius:22px} html.tye-ts .aie-help{font-size:13.5px} html.tye-ts .aie-status{border-radius:14px;font-size:14.5px} html.tye-ts .aie-actions{flex-direction:column;align-items:stretch} html.tye-ts .aie-btn{height:52px;min-height:52px !important;border-radius:26px;font-size:16px} html.tye-ts .aie-btn.sm{height:40px;min-height:40px !important;border-radius:20px;font-size:14px} html.tye-ts .aie-acts .aie-btn{flex:none} html.tye-ts .aie-row.is-confirm{flex-wrap:wrap} html.tye-ts .aie-row.is-confirm .aie-acts{width:100%;justify-content:flex-end} html.tye-ts .aie-chip{height:36px;min-height:36px !important;border-radius:18px;font-size:14px} html.tye-ts .aie-act{width:44px;height:44px;min-height:44px !important;border-radius:22px} html.tye-ts .aie-pick input[type="checkbox"]{width:22px;height:22px} html.tye-ts .aie-switch{width:51px;height:31px;border-radius:16px} html.tye-ts .aie-switch::after{width:27px;height:27px;top:2px;left:2px} html.tye-ts .aie-switch:checked::after{transform:translateX(20px)} html.tye-ts .aie-status:not(:empty) + .aie-actions,html.tye-ts .aie-foot{margin-top:4px} /* DRAWING_STATUSBAR_2026Q4: the Drawing screen's status bar is the first thing on the screen here (the header and the view tabs are hidden), and at 24px / 9.5px type its coordinates were unreadable and could scroll out of sight. It reads as one shell bar: the tool, then the numbers that change while drawing, then what is selected. */ html.tye-ts body #cad-panel #vp-cad > .sbar { height: 40px; padding-block: 0; padding-inline: calc(env(safe-area-inset-left, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 10px); gap: 6px; overflow-x: auto; overflow-y: hidden; font-family: Inter, system-ui, sans-serif; font-size: 12px; background: var(--ts-surface); color: var(--ts-ink3); border-top: 0; border-bottom: 1px solid var(--ts-line); } html.tye-ts body #cad-panel #vp-cad > .sbar .sb-divider { display: none; } html.tye-ts body #cad-panel #vp-cad > .sbar .sb-section { padding: 0; } /* the active tool */ html.tye-ts body #cad-panel #vp-cad > .sbar #sb-tool { color: var(--ts-ink) !important; font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; } /* the numbers: one pill, tabular so they don't jitter, with air between X and Y */ html.tye-ts body #cad-panel #vp-cad > .sbar #sb-coord, html.tye-ts body #cad-panel #vp-cad > .sbar #sb-len { display: inline-flex !important; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--ts-press); color: var(--ts-ink) !important; font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; word-spacing: .4em; letter-spacing: .01em; } html.tye-ts body #cad-panel #vp-cad > .sbar #sb-len { color: var(--ts-dot) !important; background: transparent; padding: 0 2px; } html.tye-ts body #cad-panel #vp-cad > .sbar #sb-len:empty { display: none !important; } html.tye-ts body #cad-panel #vp-cad > .sbar #sb-osnap { color: #10b981; font-weight: 600; } /* while a length is on the bar it is the number being read: the pointer's own position steps aside, so nothing is pushed off the right edge (the bar can still scroll if a long tool name makes it) */ html.tye-ts body #cad-panel #vp-cad > .sbar:has(#sb-len:not(:empty)) #sb-coord { display: none !important; } /* what is selected, and the units, sit at the right edge */ html.tye-ts body #cad-panel #vp-cad > .sbar #sb-selcount { color: var(--ts-ink3) !important; font: 500 12px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; } html.tye-ts body #cad-panel #vp-cad > .sbar #tye-assoc-badge { font-size: 12px !important; opacity: .8 !important; } html.tye-ts body #cad-panel #vp-cad > .sbar .sb-units { background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--ts-ink3) !important; font: 600 11.5px/1 Inter, system-ui, sans-serif; letter-spacing: .01em; } /* the hint bubble over the canvas, in the shell's colours */ html.tye-ts body #cad-panel #vp-cad .hint { top: 10px; padding: 7px 14px; border-radius: 16px; font: 500 12.5px/1.25 Inter, system-ui, sans-serif; background: var(--ts-sheet); color: var(--ts-ink); border: 1px solid var(--ts-line); box-shadow: var(--ts-shadow); max-width: calc(100% - var(--ts-rail-gutter) - 24px); left: calc(50% - var(--ts-rail-gutter) / 2); /* centred in what is left of the screen beside the rail */ } /* DRAWING_SOLID_FIRST_2026Q4: the card that says a part comes first wears the shell's own surface */ html.tye-ts body #tye-drw-empty { background: var(--ts-sheet); border-color: var(--ts-line); color: var(--ts-ink); box-shadow: var(--ts-shadow); max-width: min(360px, calc(100% - var(--ts-rail-gutter) - 24px)); left: calc(50% - var(--ts-rail-gutter) / 2); } /* a phone on its side has no room to centre the card: it stands on the sheet pill's clearance instead, and the decorative icon goes, so its two buttons are never under the pill */ @media (max-height: 560px) { html.tye-ts body #tye-drw-empty { top: auto; bottom: calc(var(--ts-space) + var(--ts-pill, 0px)); transform: translateX(-50%); padding: 16px 20px 14px; } html.tye-ts body #tye-drw-empty .dg-ic { display: none; } } html.tye-ts body #tye-drw-empty button { min-height: 44px; border-radius: 22px; border-color: var(--ts-line2); } html.tye-ts body #tye-drw-empty button.dg-main { background: var(--ts-ink); border-color: var(--ts-ink); color: var(--ts-sheet); } /* BUILD_PROGRESS_TOUCH_2026Q4: the build card (#tye-solid-prog, phase_vision_part_bridge.js) is placed for a desktop split view - fixed at top 50% / right 24%, which on a phone lands in the middle of the chat, over the text it is reporting on. Here it is a card under the header instead: the chat, the model and the tab bar all stay readable. Its own geometry is inline, so every line of this needs !important. */ html.tye-ts body #tye-solid-prog:not([style*="display: none"]) { top: calc(var(--ts-rail-top) + 8px) !important; bottom: auto !important; transform: none !important; left: calc(env(safe-area-inset-left, 0px) + 10px) !important; right: calc(env(safe-area-inset-right, 0px) + 10px) !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - var(--ts-pill, 0px) - 24px) !important; display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 14px 16px !important; border-radius: 18px !important; text-align: left !important; background: var(--ts-sheet) !important; color: var(--ts-ink) !important; box-shadow: var(--ts-shadow) !important; z-index: 9006 !important; font: 500 13px/1.35 Inter, system-ui, -apple-system, sans-serif !important; } /* on the CAD screens the right rail owns its column */ html.tye-ts[data-ts-view="model"] body #tye-solid-prog, html.tye-ts[data-ts-view="drawing"] body #tye-solid-prog { right: var(--ts-rail-gutter) !important; } /* (its own travelling ring is drawn at the card's old 14px radius) */ html.tye-ts body #tye-solid-prog::before { border-radius: 18px !important; } html.tye-ts body #tye-solid-prog > div:first-child { justify-content: flex-start !important; margin-bottom: 0 !important; } html.tye-ts body #tye-solid-prog .tsp-title { font-size: 14.5px !important; font-weight: 600 !important; color: var(--ts-ink) !important; } html.tye-ts body #tye-solid-prog .tsp-cube { width: 24px !important; height: 24px !important; } html.tye-ts body #tye-solid-prog .tsp-list { max-height: none !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; font-size: 13px !important; line-height: 1.7 !important; } html.tye-ts body #tye-solid-prog .tsp-list > div { color: var(--ts-ink2) !important; } html.tye-ts body #tye-solid-prog .tsp-sub { font-size: 12px !important; color: var(--ts-ink3) !important; } /* it reports, it does not take the screen: while a panel, a sheet, a page or one of the chat header's own menus is up it steps aside (the model picker and the mode menu open into exactly this rectangle) */ html.tye-ts.ts-casc-open body #tye-solid-prog, html.tye-ts.ts-sheet-open body #tye-solid-prog, html.tye-ts.ts-page body #tye-solid-prog, html.tye-ts.ts-mpage body #tye-solid-prog, html.tye-ts body:has(#ts-mm:not([hidden])) #tye-solid-prog, html.tye-ts body:has(#mode-dropdown.open) #tye-solid-prog { visibility: hidden !important; pointer-events: none !important; } /* ...and the Pro Tools dock (z 99999) yields to it, as it does to the FEA and Section cards */ html.tye-ts body:has(#tye-solid-prog:not([style*="display: none"])) #tye-pro-dock { visibility: hidden !important; pointer-events: none !important; } /* ATTACH_SCAN_2026Q4: a sent attachment is 96px on a phone too - the sweep and its brackets are sized for that */ html.tye-ts body .msg.user .bubble-attachments.tye-scanning::before { inset: -2px; border-radius: 12px; } /* ---------- ACCOUNT_SHEETS_2026Q4: the last account popups become pages ---------- The three new pages wear .aie-page, so the block above already gave them 52px controls and 16px fields. Here: what only these pages have, the Security rows that lead to them, and the payment sheet - which cannot be moved into the page stack (Stripe mounts its card iframe by selector and nothing ever destroys it, so re-parenting it would reload the iframe and leave Pay disabled forever) and is therefore given the page's shape where it stands. */ html.tye-ts .acs-steps li { padding-left: 34px; font-size: 15px; } /* --aie-tint is re-pointed at the sheet colour here, i.e. the page's own background, so the numbered disc would vanish: on touch it takes the pressed tint instead. */ html.tye-ts .acs-steps li::before { width: 24px; height: 24px; font-size: 12.5px; background: var(--ts-press); color: var(--ts-ink2); } html.tye-ts .acs-qr { width: 216px; height: 216px; } html.tye-ts .acs-secret { padding: 10px 10px 10px 14px; border-color: transparent; border-radius: 14px; background: var(--ts-sheet); } html.tye-ts .acs-secret code { font-size: 14px; } html.tye-ts .acs-code { font-size: 22px !important; } html.tye-ts .acs-codes { padding: 18px; border: 0; border-radius: 16px; } html.tye-ts .acs-codes code { font-size: 15px; } /* The Security rows were authored for a mouse: 13px type and buttons well under the 44px target. The markup stays exactly as it is - phase_totp_option_b.js has a MutationObserver on #mem-totp-status and #mem-totp-btn and would detach silently if those nodes were replaced - so this is metrics only. Scoped to #mem-view-account, not #mem-panels: the slide clones the outgoing panel into #ts-mp-ghost, which is a child of #mem-view-account but NOT of #mem-panels - under a #mem-panels scope the clone would snap back to desktop metrics for the length of the slide. */ html.tye-ts body #mem-view-account .mem-sc { border-radius: 16px; margin-bottom: 14px; } html.tye-ts body #mem-view-account .mem-sc-hdr { padding: 12px 16px; } html.tye-ts body #mem-view-account .mem-sc-hdr h3 { font-size: 12.5px; } html.tye-ts body #mem-view-account .mem-sr { padding: 13px 16px; gap: 12px; } html.tye-ts body #mem-view-account .mem-sr .mem-sr-info h4 { font-size: 16px; } html.tye-ts body #mem-view-account .mem-sr .mem-sr-info p { font-size: 13.5px; margin-top: 4px; } html.tye-ts body #mem-view-account .mem-sr .mem-save-btn { height: 44px; min-height: 44px !important; padding: 0 18px; border-radius: 22px; font-size: 15px; font-weight: 600; } /* ---- the payment sheet ---- */ html.tye-ts body #pay-overlay.open { padding: 0 !important; align-items: flex-end !important; justify-content: center !important; background: var(--ts-scrim) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.tye-ts body #pay-overlay #pay-box { position: fixed; left: max(0px, calc(50% - 280px)); right: max(0px, calc(50% - 280px)); top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: 0; width: auto; max-width: none; max-height: none; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border: 0; border-radius: 22px 22px 0 0; background: var(--ts-sheet); box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); animation: tsPageUp .34s cubic-bezier(.32, .72, 0, 1) both !important; } html.tye-ts[data-theme="dark"] body #pay-overlay #pay-box { box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); } /* the header the page stack gives every other page; the close button is MOVED into it, because an absolutely positioned one inside a scrolling box scrolls away from the reader */ html.tye-ts body #pay-box > #acs-pay-bar { position: sticky; top: 0; z-index: 4; flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 12px 14px 10px; background: var(--ts-sheet); } html.tye-ts body #acs-pay-bar .acs-pay-t { margin: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--ts-ink); } html.tye-ts body #acs-pay-bar .pay-close { position: static !important; top: auto; right: auto; width: 44px; height: 44px; min-height: 44px !important; border-radius: 22px; background: var(--ts-press) !important; color: var(--ts-ink) !important; display: inline-flex; align-items: center; justify-content: center; } html.tye-ts body #acs-pay-bar .pay-close svg { width: 20px; height: 20px; } html.tye-ts body #acs-pay-bar .pay-close:active { transform: scale(.92); } /* !important on the two the light theme also claims with !important (voice_ui.css:418-421) - without it the column keeps a grey band down one side of an otherwise white sheet. */ html.tye-ts body #pay-box .pay-left { width: auto; flex: none; max-height: none; overflow: visible; padding: 2px 16px 0; border-right: 0 !important; border-bottom: 0; background: transparent !important; } html.tye-ts body #pay-box .pay-right { flex: none; max-height: none; overflow: visible; padding: 18px 16px calc(24px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))); } html.tye-ts body #pay-box .pay-plan-badge { font-size: 12px; margin-bottom: 10px; } html.tye-ts body #pay-box .pay-plan-name { font-size: 22px; } html.tye-ts body #pay-box .pay-plan-desc { font-size: 14px; margin-bottom: 16px; } html.tye-ts body #pay-box .pay-period-sel { gap: 4px; padding: 4px; border-radius: 15px; background: var(--ts-press); margin-bottom: 18px; } html.tye-ts body #pay-box .pay-pd { height: 44px; min-height: 44px !important; padding: 0 8px; border-radius: 11px; font-size: 15px; } html.tye-ts body #pay-box .pay-price { font-size: 42px; } html.tye-ts body #pay-box .pay-price-sub { font-size: 15px; } html.tye-ts body #pay-box .pay-price-note { font-size: 13px; margin-bottom: 14px; } html.tye-ts body #pay-box .pay-breakdown { margin: 4px 0 14px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--ts-press); font-size: 14.5px; } html.tye-ts body #pay-box .pay-breakdown .pay-bd-row { color: var(--ts-ink2); padding: 5px 0; } html.tye-ts body #pay-box .pay-breakdown .pay-bd-row b { color: var(--ts-ink); } html.tye-ts body #pay-box .pay-breakdown .pay-bd-row em { font-size: 12.5px; } html.tye-ts body #pay-box .pay-breakdown .pay-bd-row.total { border-top-color: var(--ts-line); font-size: 16px; } html.tye-ts body #pay-box .pay-breakdown .pay-bd-row.total span, html.tye-ts body #pay-box .pay-breakdown .pay-bd-row.total b { color: var(--ts-ink); } html.tye-ts body #pay-box .pay-secure-note { margin-top: 2px; font-size: 13.5px; color: var(--ts-ink3); } /* Past the first step the plan summary has done its job, and at full size it pushed the card fields a whole screen down. It shrinks to the one line that still matters - which plan, how much - and the form starts near the top. (payGoStep writes the step's display inline, so the step in view is what this reads.) */ html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-plan-desc, html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-period-sel, html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-price-note, html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-breakdown, html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-secure-note { display: none !important; } html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-left { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ts-line); } html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-plan-badge { margin-bottom: 0; order: 2; } html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-plan-name { margin-bottom: 0; font-size: 17px; order: 1; } html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-price-row { order: 3; width: 100%; } html.tye-ts body #pay-box:has(> .pay-right > #pay-step-method[style*="display: none"]) .pay-price { font-size: 26px; } html.tye-ts body #pay-box .pay-step-title { font-size: 17px; margin-bottom: 14px; } html.tye-ts body #pay-box .pay-method-info { padding: 14px; border-radius: 14px; font-size: 14.5px; margin-bottom: 18px; } html.tye-ts body #pay-box .pay-proceed-btn { height: 52px; min-height: 52px !important; padding: 0 18px; border-radius: 26px; font-size: 16px; margin-top: 10px; } html.tye-ts body #pay-box .pay-back-btn { height: 44px; min-height: 44px !important; padding: 0 16px; border-radius: 22px; font-size: 14.5px; margin-top: 14px; border-color: var(--ts-line2); color: var(--ts-ink2); } html.tye-ts body #pay-box .pay-cf-label { font-size: 13px; margin-bottom: 7px; color: var(--ts-ink2); } /* the same three the light theme claims with !important (voice_ui.css:426-430) - and the colour is the one _payCardStyle() reads off this field and hands to Stripe, so it has to be the one the user sees */ html.tye-ts body #pay-box .pay-cf-input { min-height: 52px; padding: 15px 14px; border-radius: 14px; border-color: transparent !important; background: var(--ts-press) !important; color: var(--ts-ink) !important; font-size: 16px; } /* PAY_CARD_THEME_2026Q4 reads this size off the mounted field and hands it to Stripe, so the digits inside the cross-origin iframe are 16px too - under that, iOS zooms the whole sheet when the field takes focus. */ html.tye-ts body #pay-box #pay-card-element.pay-cf-input { min-height: 52px; display: flex; flex-direction: column; justify-content: center; } /* padding-block, not the shorthand: the row has a tinted rounded ground and the shorthand zeroed its side padding, putting the text flat against the corner radius */ html.tye-ts body #pay-box .pay-ar-row { gap: 14px; padding-block: 14px; padding-inline: 14px; border-radius: 14px; } html.tye-ts body #pay-box .pay-ar-title { font-size: 15px; } html.tye-ts body #pay-box .pay-ar-sub { font-size: 13px; } html.tye-ts body #pay-box .pay-secure-mini { font-size: 13.5px; margin-top: 14px; } html.tye-ts body #pay-box .pay-success-msg { font-size: 15px; } @media (prefers-reduced-motion: reduce) { html.tye-ts body #pay-overlay #pay-box { animation: none !important; } } /* ---------- BILLING_PAGES_2026Q4: the Billing panel on a phone or tablet ---------- It was the only long account panel with no touch treatment at all. Measured at 320x780 before this: the invoice inputs were 37px tall at 13.5px (iOS zooms the sheet on focus), "Remove card" was a 25px target, the auto-renew switch 38x22, and the payment-history table 334px wide inside a 287px panel - and because #mem-panels declares overflow-y:auto and leaves overflow-x visible, overflow-x computes to auto, so the WHOLE account sheet scrolled sideways by 31px rather than just the table. The invoice form is not here any more (it is a page), so what is left is the plan card, the saved card and the history. Scoped to #mem-view-account, not #mem-panels: the slide clones the outgoing panel into #ts-mp-ghost, which is a child of #mem-view-account but NOT of #mem-panels. */ /* The panel carries its own --b-* set, written for the desktop modal's ground. On a sheet it has to follow the shell the way --aie-* does, or the injected row (an .aie-card on --ts-press) sits on a different palette from the plan card and the saved card right above it. */ html.tye-ts #mem-panel-billing { --b-card: var(--ts-press); --b-cardline: transparent; --b-line: var(--ts-line); --b-txt: var(--ts-ink); --b-txt2: var(--ts-ink2); --b-txt3: var(--ts-ink3); --b-field: var(--ts-press); --b-fieldline: var(--ts-line2); --b-iconbg: var(--ts-press); --b-icon: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-billing .bill-section-title { font-size: 12.5px; margin: 26px 4px 8px; } /* :first-of-type would key on the element type, and the first div child is .mem-panel-title - it matched nothing */ html.tye-ts body #mem-view-account #mem-panel-billing #bill-current + .bill-section .bill-section-title { margin-top: 0; } /* the plan card */ html.tye-ts body #mem-view-account #mem-panel-billing .bill-current { border-radius: 16px !important; padding: 18px 16px; } html.tye-ts body #mem-view-account #mem-panel-billing .bc-name { font-size: 20px; } html.tye-ts body #mem-view-account #mem-panel-billing .bc-period { font-size: 14px; margin-left: 0; text-align: left; } html.tye-ts body #mem-view-account #mem-panel-billing .bc-row { flex-direction: column; align-items: flex-start; gap: 10px; } /* BILLING_BTNROW_2026Q4: side by side, and each one visibly a button. They were stacked, and because the touch pass re-points --b-cardline at transparent for the cards, .bc-btn.ghost's border-color - which reads that token with !important at voice_ui.css:10987, on a background it also forces to transparent - went with it: two lines of centred text on the plan card. The pair gets its own surface and edge here. flex-basis 120px so both fit one row from 287px of panel (320px viewport) upward, and wrap rather than squeeze below that. */ html.tye-ts body #mem-view-account #mem-panel-billing .bc-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 16px; } html.tye-ts body #mem-view-account #mem-panel-billing .bc-btn { flex: 1 1 120px; height: 48px; min-height: 48px !important; padding: 0 14px; border-radius: 24px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } html.tye-ts body #mem-view-account #mem-panel-billing .bc-btn.ghost { background: var(--ts-sheet) !important; border: 1px solid var(--ts-line2) !important; color: var(--ts-ink) !important; } html.tye-ts body #mem-view-account #mem-panel-billing .bc-btn.ghost:active { background: var(--ts-press) !important; } /* The rule above already out-ranks voice_ui.css:10988's accent-tint hover (2,3,2 vs 1,3,0, both !important), so that hover is gone under this shell and has to be given back - html.tye-ts is a WIDTH test first, so a desktop window narrowed under 1024px lands here with a real mouse. Only where a pointer can hover, and not paired with a (hover:none) reset: that would tie with :active on specificity, win on source order, and eat the press flash on exactly the screens it was written for. */ @media (hover: hover) { html.tye-ts body #mem-view-account #mem-panel-billing .bc-btn.ghost:hover { background: var(--ts-press) !important; } } /* the row that opens the Invoice details page uses .aie-row, which touch_shell already sizes */ html.tye-ts body #mem-view-account #mem-panel-billing .bli-list { border: 0; border-radius: 16px; } /* the saved card: brand and expiry on their own lines, then the switch, then the button - at 320px the three fought over one flex row and the expiry wrapped to three lines */ html.tye-ts body #mem-view-account #bill-pm-box { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 16px; border-radius: 16px !important; } /* BILLING_CARDICON_2026Q4: a column would put the brand mark on a line of its own. Two rows instead - the mark beside the card, then the controls across the full width. */ html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-icon { grid-row: 1; grid-column: 1; width: 44px; height: 44px; border-radius: 13px; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-icon i { font-size: 24px; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-info { grid-row: 1; grid-column: 2; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-right { grid-row: 2; grid-column: 1 / -1; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-brand { font-size: 16px; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-meta { font-size: 13px; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-title { font-size: 16px; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-sub { font-size: 13.5px; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-right { margin-left: 0; flex-wrap: wrap; align-items: center; gap: 12px; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-ar { flex: 1 1 auto; justify-content: space-between; min-width: 0; font-size: 15px; min-height: 44px; } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-rm { flex: none; height: 44px; min-height: 44px !important; padding: 0 18px; border-radius: 22px; font-size: 14.5px; } html.tye-ts body #mem-view-account #bill-pm-box .settings-toggle { width: 51px; height: 31px; flex: none; } html.tye-ts body #mem-view-account #bill-pm-box .settings-toggle-slider { border-radius: 16px; } html.tye-ts body #mem-view-account #bill-pm-box .settings-toggle-slider::before { width: 25px; height: 25px; left: 3px; top: 3px; } html.tye-ts body #mem-view-account #bill-pm-box input:checked + .settings-toggle-slider::before { transform: translateX(20px); } html.tye-ts body #mem-view-account #bill-pm-box .bill-pm-msg { font-size: 13.5px; } /* the payment history becomes one card per payment: date and amount on the first line, plan and status on the second, the documents on their own. Nothing is hidden and no column is cut - the table simply stops being a table at this width, which is what let it push the whole sheet sideways. */ html.tye-ts body #mem-view-account #mem-panel-billing #bill-history { overflow-x: visible; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table { display: block; border-radius: 16px; font-size: 15px; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table thead { display: none; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table tbody { display: block; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 14px 16px; border-bottom: 1px solid var(--b-line); } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table tbody tr:last-child { border-bottom: 0; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table tbody td { display: block; padding: 0; border: 0; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table tbody td:nth-child(1) { grid-row: 1; grid-column: 1; font-size: 15px; color: var(--b-txt); font-weight: 600; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table tbody td:nth-child(4) { grid-row: 1; grid-column: 2; text-align: right; font-size: 15px; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table tbody td:nth-child(2) { grid-row: 2; grid-column: 1; font-size: 13.5px; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table tbody td:nth-child(3) { grid-row: 2; grid-column: 2; text-align: right; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-table tbody td.bill-act { grid-row: 3; grid-column: 1 / -1; margin-top: 8px; text-align: left; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-view { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 15px; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-sep { margin: 0 8px; } html.tye-ts body #mem-view-account #mem-panel-billing .pay-status { font-size: 11.5px; padding: 3px 10px; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-empty { border-radius: 16px; font-size: 14.5px; padding: 28px 20px; } html.tye-ts body #mem-view-account #mem-panel-billing .bill-tip { border-radius: 14px; padding: 12px 14px; font-size: 13.5px; } /* the invoice page's address box */ html.tye-ts .acs-page .acs-area { min-height: 112px; padding: 14px; font-size: 16px !important; } /* ---------- TOOLS_PAGES_2026Q4: Terminal, Tasks and Extensions in the account pages' language ---------- These three are #ts-page pages (the real panels are moved in), but everything under the page header still wore the desktop floating window: 11.5px square buttons, 10px section labels on a white strip, grey square tabs, a red switch, and a centred card with no backdrop for the task editor and the AI prompt. Measured at 375px before this: Run 63x40 at 11.5px, section headers 52px tall only because a 20px chevron was stretched by the <=480 "button {min-height: 40px}", and above 480px wide the editor dropped to 12.5px - iOS zooms the page on focus. The vocabulary is .aie-* on touch (touch_shell.css AI_ENGINE_PAGES block): cards on --ts-press with no border, hairlines between rows, 44px round actions, 48-52px pills, 16px fields, 51x31 switches. Every rule is scoped `#ts-pg-body > .ts-pg-panel`: the bare panel ids would also reach the <=1024px slide-in, the >=1025px touch float and, once a panel is back in #app, the desktop window. Nothing here sets transform, filter or contain on the panel - the editors are position:fixed inside it. */ /* tokens the three pages share; the same values the .aie-* set uses for ok / error / amber */ html.tye-ts body #ts-pg-body > .ts-pg-panel { --tl-ok: #16a34a; --tl-okbg: rgba(22, 163, 74, .10); --tl-err: #b91c1c; --tl-errbg: rgba(220, 38, 38, .08); --tl-amber: #a3470a; --tl-amberbg: rgba(240, 178, 101, .22); --tl-mono: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace; } html.tye-ts[data-theme="dark"] body #ts-pg-body > .ts-pg-panel { --tl-ok: #5fd08a; --tl-okbg: rgba(95, 208, 138, .12); --tl-err: #fca5a5; --tl-errbg: rgba(248, 113, 113, .12); --tl-amber: #f0c674; --tl-amberbg: rgba(240, 198, 116, .14); } /* ---- the toolbar row under the page header ---- */ html.tye-ts body #ts-pg-body > .ts-pg-panel > :is(.term-header, .tasks-header, .ext-header) { min-height: 52px; padding: 2px 16px 10px !important; gap: 10px; } html.tye-ts body #ts-pg-body > .ts-pg-panel > :is(.term-header, .tasks-header, .ext-header) .tasks-btn-icon { width: 44px; height: 44px; min-height: 44px !important; border-radius: 22px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel > :is(.term-header, .tasks-header, .ext-header) .tasks-btn-icon svg { width: 18px; height: 18px; } html.tye-ts body #ts-pg-body > .ts-pg-panel > :is(.term-header, .tasks-header, .ext-header) .tasks-btn-icon:active { background: color-mix(in srgb, var(--ts-ink) 12%, transparent) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-btn-new { height: 44px; min-height: 44px !important; padding: 0 18px !important; border-radius: 22px !important; display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 Inter, system-ui, sans-serif !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-btn-new svg { width: 16px; height: 16px; } /* ---- filter chips (Tasks and Extensions): one scrolling row, the active chip filled with ink ---- */ html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-filters { flex: none; display: flex !important; flex-direction: column; gap: 10px; margin: 0 !important; padding: 0 0 12px !important; border: 0 !important; background: transparent !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.tasks-tabs, .ext-filters) { flex: none; display: flex !important; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 !important; padding: 0 16px 2px !important; overflow-x: auto; overflow-y: hidden; border: 0 !important; background: transparent !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-filters { padding-bottom: 12px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.tasks-tabs, .ext-filters)::-webkit-scrollbar { display: none; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.tasks-tab, .ext-tab) { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; min-height: 36px !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid var(--ts-line2) !important; border-radius: 18px !important; box-shadow: none !important; background: transparent !important; color: var(--ts-ink2) !important; font: 500 14px/1 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; white-space: nowrap; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.tasks-tab, .ext-tab).active { background: var(--ts-ink) !important; color: var(--ts-sheet) !important; border-color: transparent !important; font-weight: 600 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-tab .tab-n { min-width: 0; margin: 0 !important; padding: 0 !important; background: transparent !important; color: inherit !important; opacity: .6; font: 600 12.5px/1 Inter, system-ui, sans-serif !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-search { height: 52px; min-height: 52px !important; margin: 0 16px; width: auto; border-radius: 14px !important; padding: 0 16px !important; } /* ---- lists: the rows of a list are one card, hairlines between ---- */ html.tye-ts body #ts-pg-body > .ts-pg-panel :is(#tasks-list, #ext-list) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 !important; padding: 0 16px 28px !important; border: 0 !important; background: transparent !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.task-item, .ext-card) { margin: 0 !important; background: var(--ts-press) !important; box-shadow: none !important; border: 0 !important; border-top: 1px solid var(--ts-line) !important; border-radius: 0 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.task-item, .ext-card):first-child { border-top: 0 !important; border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.task-item, .ext-card):last-child { border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; } /* a task: check, text, actions */ /* (flex: none - the list is a flex column, and with a min-height set the rows would shrink to fit it and draw over each other instead of the list scrolling) */ html.tye-ts body #ts-pg-body > .ts-pg-panel .task-item { display: flex !important; flex: none; align-items: flex-start; gap: 12px; min-height: 62px; padding: 14px 6px 14px 16px !important; box-sizing: border-box; opacity: 1 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-check { margin-top: 1px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-item.done .task-check { background: var(--tl-ok) !important; border: 2px solid var(--tl-ok) !important; color: #fff !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-body { flex: 1 1 auto; min-width: 0; cursor: pointer; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-title-row { display: flex; align-items: flex-start; gap: 8px; margin: 0 !important; font: 500 16px/1.35 Inter, system-ui, sans-serif !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-title-row > span:last-child { min-width: 0; overflow-wrap: anywhere; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-item.done .task-title-row { color: var(--ts-ink3) !important; text-decoration: line-through; } /* (the dot sits on the first line of a title that wraps, not halfway down it) */ html.tye-ts body #ts-pg-body > .ts-pg-panel .task-prio-dot { flex: none; width: 8px !important; height: 8px !important; margin: 7px 0 0 !important; border-radius: 50% !important; box-shadow: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-prio-dot.high { background: var(--tl-err) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-prio-dot.med { background: var(--tl-amber) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-prio-dot.low { background: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-desc { margin: 3px 0 0 !important; font: 400 13.5px/1.45 Inter, system-ui, sans-serif !important; color: var(--ts-ink2) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 !important; font: 500 12.5px/1 Inter, system-ui, sans-serif !important; } /* (the template always writes whitespace into .task-meta, so :empty never matches) */ html.tye-ts body #ts-pg-body > .ts-pg-panel .task-meta:not(:has(> *)) { display: none; } /* (a long tag ends in an ellipsis instead of running out of the card and panning the list sideways) */ html.tye-ts body #ts-pg-body > .ts-pg-panel .task-meta :is(.due, .tag) { display: inline-block; max-width: 100%; box-sizing: border-box; height: 24px; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 24px !important; background: var(--ts-sheet) !important; color: var(--ts-ink2) !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-meta .due.today { background: var(--tl-amberbg) !important; color: var(--tl-amber) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-meta .due.overdue { background: var(--tl-errbg) !important; color: var(--tl-err) !important; } /* the actions are hover-only on a desktop; there is no hover here */ html.tye-ts body #ts-pg-body > .ts-pg-panel .task-actions { display: flex !important; flex: none; gap: 0; margin: -6px 0 0 !important; opacity: 1 !important; visibility: visible !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-btn-mini { width: 44px; height: 44px; min-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 22px !important; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; color: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-btn-mini svg { width: 18px !important; height: 18px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-btn-mini:active { background: color-mix(in srgb, var(--ts-ink) 8%, transparent) !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .task-btn-mini.delete:active { background: var(--tl-errbg) !important; color: var(--tl-err) !important; } /* an extension: tile, text, switch */ html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-card { display: grid !important; flex: none; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 14px 16px !important; box-sizing: border-box; opacity: 1 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-icon { align-self: start; width: 40px !important; height: 40px !important; margin: 0 !important; display: flex; align-items: center; justify-content: center; border: 0 !important; border-radius: 11px !important; background: var(--ts-sheet) !important; color: var(--ts-ink2) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-icon svg { width: 20px !important; height: 20px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-info { min-width: 0; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 !important; font: 600 16px/1.3 Inter, system-ui, sans-serif !important; color: var(--ts-ink) !important; } /* (the name takes its own line and the category chip sits under it, whatever the name's length; the Built-in badge stays hidden as on the desktop - voice_ui.css calls it redundant, nearly every extension is built in) */ html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-name-text { flex: 1 0 100%; min-width: 0; margin-bottom: 2px; overflow-wrap: anywhere; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-badge-cat { display: inline-flex; align-items: center; height: 20px; margin: 0 !important; padding: 0 7px !important; border: 0 !important; border-radius: 6px !important; background: var(--ts-sheet) !important; color: var(--ts-ink3) !important; font: 600 10.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: .05em !important; text-transform: uppercase; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-desc { margin: 4px 0 0 !important; font: 400 13.5px/1.45 Inter, system-ui, sans-serif !important; color: var(--ts-ink2) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0 !important; font: 400 12.5px/1.3 Inter, system-ui, sans-serif !important; color: var(--ts-ink3) !important; } /* the .aie-switch: 51x31, green when on (the red was the app accent, which elsewhere means "danger" or "brand") */ html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle { width: 51px !important; height: 31px !important; border-radius: 16px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--ts-line2) !important; box-shadow: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle::after { width: 27px !important; height: 27px !important; top: 2px !important; left: 2px !important; background: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .28) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle.on { background: var(--tl-ok) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle.on::after { transform: translateX(20px) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle:focus-visible { outline: 2px solid var(--ts-dot) !important; outline-offset: 2px; } /* empty and signed-out states: the section-label ink, not the accent */ html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-empty-eyebrow { color: var(--ts-ink3) !important; font: 600 12.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: .07em !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tasks-empty-sub { max-width: 32ch; color: var(--ts-ink2) !important; font: 400 14.5px/1.5 Inter, system-ui, sans-serif !important; } /* ---- Terminal ---- */ html.tye-ts body #ts-pg-body > .ts-pg-panel .term-lang { display: inline-flex; align-items: center; height: 28px; padding: 0 12px !important; border: 0 !important; border-radius: 14px !important; background: var(--ts-press) !important; color: var(--ts-ink2) !important; font: 600 13px/1 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-toolbar { flex: none; display: flex !important; align-items: center; gap: 10px !important; margin: 0 !important; padding: 0 16px 12px !important; border: 0 !important; background: transparent !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.term-btn-ai, .term-btn-run) { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px !important; height: 48px; min-height: 48px !important; margin: 0 !important; padding: 0 20px !important; border-radius: 24px !important; font: 600 15px/1 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; box-shadow: none !important; filter: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.term-btn-ai, .term-btn-run) svg { width: 16px !important; height: 16px !important; opacity: 1 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-btn-ai { flex: none; background: var(--ts-sheet) !important; color: var(--ts-ink) !important; border: 1px solid var(--ts-line2) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-btn-ai:active { background: var(--ts-press) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-btn-run { flex: 1 1 auto; background: var(--ts-ink) !important; color: var(--ts-sheet) !important; border: 0 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-btn-run:active { opacity: .85; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-btn-run:disabled, html.tye-ts body #ts-pg-body > .ts-pg-panel .term-btn-run.running { background: var(--ts-ink) !important; opacity: .6; } /* the two sections are cards; max-height:50% (voice_ui.css) is lifted so a collapsed Output lets Code take the height instead of leaving ~230px of blank page, and a collapsed card is exactly its 48px header */ html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.term-editor-wrap, .term-output-wrap) { margin: 0 16px !important; max-height: none !important; overflow: hidden !important; border: 0 !important; border-radius: 16px !important; background: var(--ts-press) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.term-editor-wrap, .term-output-wrap).collapsed { flex: 0 0 48px !important; min-height: 48px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-output-wrap { margin-bottom: 12px !important; } /* (an open Output keeps its header and about four lines - Code has a 100px floor (above) and a saved divider position of 85% would otherwise leave Output one line tall, or just its header on a phone held sideways) */ html.tye-ts body #ts-pg-body > .ts-pg-panel .term-output-wrap:not(.collapsed) { min-height: 128px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-section-header { flex: none; display: flex !important; align-items: center; justify-content: space-between; height: 48px; min-height: 48px; box-sizing: border-box; margin: 0 !important; padding: 0 6px 0 16px !important; border: 0 !important; background: transparent !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-section-title { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 12.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: .07em !important; text-transform: uppercase; color: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-output-meta { font: 500 12.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none; color: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-section-toggle { flex: none; width: 36px; height: 36px; min-height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 18px !important; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; color: var(--ts-ink3) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-section-toggle svg { width: 16px !important; height: 16px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-section-toggle:active { background: color-mix(in srgb, var(--ts-ink) 8%, transparent) !important; } /* the editor: 16px at every width (under it iOS zooms), and code keeps its lines - it scrolls sideways, it does not wrap */ html.tye-ts body #ts-pg-body > .ts-pg-panel #term-editor { margin: 0 !important; padding: 0 16px 14px !important; border: 0 !important; background: transparent !important; color: var(--ts-ink) !important; font: 400 16px/1.5 var(--tl-mono) !important; white-space: pre; overflow-wrap: normal; overflow: auto; caret-color: var(--ts-dot); } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-editor::placeholder { color: var(--ts-ink3) !important; opacity: .85 !important; } /* the resize handle between the cards: a finger-sized strip with a grabber */ html.tye-ts body #ts-pg-body > .ts-pg-panel .term-divider { flex: none; display: flex !important; align-items: center; justify-content: center; height: 22px !important; min-height: 22px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; touch-action: none; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-divider-handle { width: 36px !important; height: 4px !important; border-radius: 2px !important; background: var(--ts-line2) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-divider.dragging .term-divider-handle { background: var(--ts-ink3) !important; } /* (with a section folded the handle does nothing - terminal_app.js ignores it - so it goes, as on the desktop, and a margin keeps the cards apart) */ html.tye-ts body #ts-pg-body > .ts-pg-panel:has(.term-editor-wrap.collapsed, .term-output-wrap.collapsed) .term-divider { display: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel:has(.term-editor-wrap.collapsed, .term-output-wrap.collapsed) .term-output-wrap { margin-top: 12px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-output { margin: 0 !important; padding: 0 16px 14px !important; background: transparent !important; color: var(--ts-ink) !important; font: 400 13.5px/1.55 var(--tl-mono) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-output .term-hint { padding: 20px 8px !important; text-align: center; color: var(--ts-ink3) !important; font: 400 13.5px/1.55 Inter, system-ui, sans-serif !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-output .stdout { color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-output .stderr { color: var(--tl-err) !important; border-left-color: var(--tl-err) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-output .status { display: inline-flex; align-items: center; margin: 10px 0 0 !important; padding: 5px 10px !important; border-radius: 8px !important; font: 600 12.5px/1 Inter, system-ui, sans-serif !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-output .status.success { background: var(--tl-okbg) !important; color: var(--tl-ok) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-output .status.warn { background: var(--tl-amberbg) !important; color: var(--tl-amber) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-output .status.error { background: var(--tl-errbg) !important; color: var(--tl-err) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel #term-output .plot img { max-width: 100%; height: auto; border-radius: 12px; background: #fff; } /* history: rows you can tap */ html.tye-ts body #ts-pg-body > .ts-pg-panel .term-hist-head { margin: 2px 0 10px !important; color: var(--ts-ink3) !important; font: 600 12.5px/1.3 Inter, system-ui, sans-serif !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-hist-row { min-height: 56px; margin: 0 0 8px !important; padding: 10px 14px !important; border: 0 !important; border-radius: 14px !important; background: var(--ts-sheet) !important; color: var(--ts-ink) !important; font: 400 14px/1.4 var(--tl-mono) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-hist-row:active { background: color-mix(in srgb, var(--ts-ink) 6%, var(--ts-sheet)) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-hist-when { margin-bottom: 4px !important; color: var(--ts-ink3) !important; font: 500 12px/1.3 Inter, system-ui, sans-serif !important; } /* ---- the task editor and the AI prompt: a full-height sheet with the page header, not a centred card ---- They stay .tye-popup nodes inside the panel (pgUnmount clicks their [data-close], MP_SUB counts them for Escape), so this changes their look only. Their backdrop is transparent !important app-wide (voice_ui.css); here it takes the shell's scrim. */ html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup { padding: 0 !important; align-items: flex-end !important; justify-content: center !important; background: var(--ts-scrim) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-backdrop { background: transparent !important; backdrop-filter: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-card { position: fixed !important; left: max(0px, calc(50% - 280px)) !important; right: max(0px, calc(50% - 280px)) !important; top: calc(env(safe-area-inset-top, 0px) + 10px) !important; bottom: 0 !important; width: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; border: 0 !important; border-radius: 22px 22px 0 0 !important; background: var(--ts-sheet) !important; color: var(--ts-ink); box-shadow: 0 -10px 40px rgba(0, 0, 0, .28) !important; animation: tsPageUp .34s cubic-bezier(.32, .72, 0, 1) both !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-head { flex: none; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 14px 10px !important; border: 0 !important; background: var(--ts-sheet) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-head h3 { grid-column: 2; display: flex; align-items: center; justify-content: center; min-width: 0; margin: 0 !important; font: 700 17px/1.25 Inter, system-ui, sans-serif !important; letter-spacing: -.01em; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-head h3 > svg { display: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-head h3 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-close { grid-column: 3; width: 44px; height: 44px; min-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 22px !important; display: inline-flex; align-items: center; justify-content: center; background: var(--ts-press) !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-close svg { width: 20px !important; height: 20px !important; pointer-events: none; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex !important; flex-direction: column; gap: 16px !important; margin: 0 !important; padding: 4px 16px 16px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-field { display: flex !important; flex-direction: column; gap: 6px !important; margin: 0 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-field > span { font: 600 14px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ts-ink) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-field .req { color: var(--ts-dot) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-field :is(input, textarea, select) { width: 100% !important; box-sizing: border-box; min-height: 52px; margin: 0 !important; padding: 0 14px !important; border: 1px solid transparent !important; border-radius: 14px !important; outline: none !important; box-shadow: none !important; background: var(--ts-press) !important; color: var(--ts-ink) !important; font: 400 16px/1.4 Inter, system-ui, sans-serif !important; resize: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-field textarea { min-height: 120px; padding: 14px !important; } /* (the date field's calendar glyph and the select's list are drawn by the browser: black on the dark sheet without this) */ html.tye-ts[data-theme="dark"] body #ts-pg-body > .ts-pg-panel .tye-popup-field :is(input, textarea, select) { color-scheme: dark; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-field :is(input, textarea, select)::placeholder { color: var(--ts-ink3) !important; opacity: 1; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-field :is(input, textarea, select):focus { border-color: var(--ts-dot) !important; background: var(--ts-sheet) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-foot { flex: none; display: flex !important; align-items: center; gap: 10px !important; margin: 0 !important; padding: 12px 16px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))) !important; border: 0 !important; border-top: 1px solid var(--ts-line) !important; background: var(--ts-sheet) !important; } /* Ctrl+Enter and Esc mean nothing on a phone, and at 375px the hint pushed itself off the left edge */ html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-hint { display: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-btn { flex: 1 1 0; height: 52px; min-height: 52px !important; margin: 0 !important; padding: 0 16px !important; border-radius: 26px !important; font: 600 16px/1 Inter, system-ui, sans-serif !important; box-shadow: none !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-btn:not(.primary) { background: var(--ts-sheet) !important; color: var(--ts-ink) !important; border: 1px solid var(--ts-line2) !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-btn.primary { background: var(--ts-ink) !important; color: var(--ts-sheet) !important; border: 0 !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-btn:disabled { opacity: .55; } /* a phone held sideways (about 300px under the page header): the Terminal's rows tighten so both cards still show */ @media (max-height: 500px) { html.tye-ts body #ts-pg-body > .ts-pg-panel > .term-header { min-height: 48px; padding: 0 16px 4px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-toolbar { padding-bottom: 8px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel :is(.term-btn-ai, .term-btn-run) { height: 44px; min-height: 44px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-divider { height: 14px !important; min-height: 14px; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-output-wrap { margin-bottom: 8px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-editor-wrap:not(.collapsed) { min-height: 64px !important; } html.tye-ts body #ts-pg-body > .ts-pg-panel .term-output-wrap:not(.collapsed) { min-height: 96px !important; } } @media (prefers-reduced-motion: reduce) { html.tye-ts body #ts-pg-body > .ts-pg-panel .tye-popup-card { animation: none !important; } } /* ---------- TOUCH_PICK_2026Q4: the picked face or edge - a group of its own under the rail ---------- A long press on the model (or a right click) picks what is under the finger and opens its menu as a rail panel; while something stays picked this group stands under #ts-quick: its menu, and Clear. touch_shell.js pickPlace() sets its top from the rail's rect (the rail's height depends on the buttons shown); its right edge follows the rail here, the Properties drawer's shift included - JS overrides it only to stand beside the rail's foot when there is no room under it. The icon is the orange the model paints a picked face or edge. */ html:not(.tye-ts) #ts-pick, #ts-pick[hidden] { display: none !important; } html.tye-ts body #ts-pick { display: none; } /* (the badge's own, darker tone: white 11px digits need 4.5:1 - #d9580b gives 3.9) */ html.tye-ts { --ts-pick: #d9580b; --ts-pick-badge: #b54708; --ts-pick-badge-ink: #fff; } html.tye-ts[data-theme="dark"] { --ts-pick: #ff8a3d; --ts-pick-badge: #ff8a3d; --ts-pick-badge-ink: #1c1d21; } html.tye-ts[data-ts-view="model"] body #ts-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; position: fixed; z-index: 8600; box-sizing: border-box; top: calc(var(--ts-rail-top) + 300px); right: calc(env(safe-area-inset-right, 0px) + 10px); padding: 5px; border-radius: 27px; background: var(--ts-surface); border: 1px solid var(--ts-line); box-shadow: var(--ts-shadow); -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; animation: tsPickIn .18s cubic-bezier(.32, .72, 0, 1); } @keyframes tsPickIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } } html.tye-ts body #ts-pick button { position: relative; flex: none; width: 44px; height: 44px; min-height: 44px !important; margin: 0; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--ts-ink2); font-size: 22px; line-height: 1; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; transition: background .16s ease, color .16s ease, transform .12s ease; } html.tye-ts body #ts-pick button i { pointer-events: none; } html.tye-ts body #ts-pick button:active { transform: scale(.9); } html.tye-ts body #ts-pick button:focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } html.tye-ts body #ts-pick [data-tsp="menu"] { color: var(--ts-pick); } html.tye-ts body #ts-pick [data-tsp="menu"][aria-expanded="true"] { background: var(--ts-press); } /* (Select more is on: the next long presses add to the set - the button says so) */ html.tye-ts body #ts-pick.ts-pick-more [data-tsp="menu"] { background: color-mix(in srgb, var(--ts-pick) 14%, transparent); box-shadow: inset 0 0 0 2px var(--ts-pick); } html.tye-ts body #ts-pick .ts-pick-n { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--ts-pick-badge); color: var(--ts-pick-badge-ink); font: 700 11px/18px Inter, system-ui, sans-serif; text-align: center; pointer-events: none; box-shadow: 0 0 0 2px var(--ts-surface); } html.tye-ts body #ts-pick .ts-pick-n[hidden] { display: none; } html.tye-ts body.mobile-panel-open #ts-pick { visibility: hidden !important; pointer-events: none !important; } @media (max-height: 500px) { html.tye-ts[data-ts-view="model"] body #ts-pick { padding: 3px; gap: 0; border-radius: 22px; } html.tye-ts body #ts-pick button { width: 38px; height: 38px; min-height: 38px !important; font-size: 20px; border-radius: 19px; } } @media (prefers-reduced-motion: reduce) { html.tye-ts[data-ts-view="model"] body #ts-pick { animation: none; } } /* ---------- ACCOUNT_PAGES_2026Q4: the Account panel and its pages on the account page stack ---------- The lists and pages take the .aie touch sizes above; this adds the avatar and the swatches at touch size. */ html.tye-ts #acs-acct-host{max-width:none} html.tye-ts #acs-acct-host > .aie-sec:first-child{margin-top:14px} html.tye-ts .acs-av.xl{width:120px;height:120px;font-size:50px;outline-color:var(--ts-line)} html.tye-ts .acs-av.sm{font-size:16px} html.tye-ts .acs-hero{margin:14px 0 24px} html.tye-ts .acs-cur{margin-bottom:16px} html.tye-ts .acs-swatches{grid-template-columns:repeat(4,56px);gap:18px 22px;margin:8px 0 20px} html.tye-ts .acs-sw{width:56px;height:56px;min-height:56px !important} html.tye-ts .acs-sw svg{width:26px;height:26px} html.tye-ts .acs-sw.on{outline-width:3px} /* ---------- ORGS_PAGES_2026Q4: the Organizations list and an organization's pages on the account page stack ---------- The .aie touch sizes above apply; this sizes what is new (badges, figures, bars, role choices). Choices and tiles sit on the grey card, so their own surface is the sheet colour. */ html.tye-ts #orgs-content{max-width:none} html.tye-ts #orgs-content > .aie-sec:first-child{margin-top:14px} html.tye-ts #orgs-content > .aie-list:first-child,html.tye-ts #orgs-content > .aie-card:first-child,html.tye-ts #orgs-content > .aie-status:first-child{margin-top:16px} html.tye-ts .ogp-badge{height:22px;padding:0 9px;border-radius:11px;font-size:12.5px} html.tye-ts .aie-ic.ogp-mono{font-size:16px} html.tye-ts .ogp-role{font-size:14px} html.tye-ts .ogp-hn,html.tye-ts .ogp-mn{font-size:19px} html.tye-ts .ogp-hs{font-size:13.5px} html.tye-ts .ogp-mm{font-size:14.5px} html.tye-ts .ogp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} html.tye-ts .ogp-tile{padding:14px 16px;border:0;border-radius:16px} html.tye-ts .ogp-tl{font-size:13.5px} html.tye-ts .ogp-tv{font-size:24px} html.tye-ts .ogp-td{font-size:13px} html.tye-ts .ogp-ct{font-size:15px} html.tye-ts .ogp-cv{font-size:13.5px} html.tye-ts .ogp-plot{height:120px} html.tye-ts .ogp-axis{font-size:12.5px} html.tye-ts .ogp-none,html.tye-ts .ogp-bl,html.tye-ts .ogp-seats{font-size:14.5px} html.tye-ts .ogp-meter{height:8px;border-radius:4px} html.tye-ts .ogp-opt{min-height:56px;padding:12px 14px;border:0;border-radius:14px;background:var(--ts-sheet)} html.tye-ts .ogp-opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--ts-ink)} html.tye-ts .ogp-opt input{width:22px;height:22px;margin-top:0} html.tye-ts .ogp-ol{font-size:16px} html.tye-ts .ogp-od{font-size:13.5px} html.tye-ts .aie-row.ogp-msg .aie-btn.sm{flex:none} html.tye-ts .aie-foot.ogp-danger{margin-top:28px} /* the account modal's toast was one line (nowrap) - a message naming an organization or an address ran off both sides of a phone */ html.tye-ts body #mem-toast{box-sizing:border-box;width:max-content;max-width:calc(100vw - 32px);white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.35;border-radius:18px} html.tye-ts .ogp-bill .aie-foot{margin-top:16px} html.tye-ts .ogp-head + .aie-foot{margin-top:14px} /* (the tint over the grey card is 4:1; over the sheet colour it reads) */ html.tye-ts .ogp-badge.on{background:linear-gradient(var(--aie-okbg),var(--aie-okbg)),var(--ts-sheet)} /* ---------- TYE_DIALOGS_2026Q4: the dialogs on touch (tye_dialog.js; desktop and tokens in voice_ui.css) ---------- A confirm or a notice is a content-height bottom sheet (the Profile sheet's geometry), its answers stacked with the verb on top. A prompt, a list to pick from and a form (Upgrade to Team) are the full-height page sheet: the title bar, a scrolling body, and one action row that rides above the keyboard (the verify / Tasks editor pattern). */ html.tye-ts body .tye-dlg{--dlg-scrim:var(--ts-scrim);--dlg-card:var(--ts-sheet);--dlg-line:var(--ts-line);--dlg-ink:var(--ts-ink);--dlg-ink2:var(--ts-ink2);--dlg-ink3:var(--ts-ink3); --dlg-soft:var(--ts-press);--dlg-press:var(--ts-press);--dlg-field:var(--ts-press);--dlg-fline:var(--ts-line2);--dlg-focus:var(--ts-dot);--dlg-btn:var(--ts-ink);--dlg-btnink:var(--ts-sheet); padding:0;align-items:flex-end;overflow:hidden} html.tye-ts[data-theme="dark"] body .tye-dlg{--dlg-err:#ff8a80} html.tye-ts body .tye-dlg-card{position:fixed;left:max(0px,calc(50% - 280px));right:max(0px,calc(50% - 280px));bottom:0;width:auto;max-width:none;max-height:min(86dvh,720px);margin:0; border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.18);animation:tsSheetUp .26s cubic-bezier(.32,.72,0,1) both} html.tye-ts body .tye-dlg.w-md .tye-dlg-card{max-width:none} html.tye-ts body .tye-dlg.is-closing .tye-dlg-card{animation:tsPageDown .22s cubic-bezier(.32,.72,0,1) both} html.tye-ts body .tye-dlg.lay-sheet .tye-dlg-main{padding:28px 20px 4px} html.tye-ts body .tye-dlg-ic{width:52px;height:52px;margin-bottom:16px;border:0;border-radius:16px} html.tye-ts body .tye-dlg-ic svg{width:26px;height:26px} html.tye-ts body .tye-dlg-title{margin-bottom:8px;font-size:22px;font-weight:700;line-height:1.25} html.tye-ts body .tye-dlg-msg{font-size:15px} html.tye-ts body .tye-dlg.no-title .tye-dlg-msg{font-size:16px} html.tye-ts body .tye-dlg-foot{flex-direction:column-reverse;flex-wrap:nowrap;align-items:stretch;gap:10px;padding:20px 20px calc(14px + max(env(safe-area-inset-bottom,0px),var(--ts-kbh,0px)))} html.tye-ts body .tye-dlg .tye-dlg-btn{width:100%;height:52px;min-height:52px !important;border-radius:26px;font-size:16px} html.tye-ts body .tye-dlg .tye-dlg-btn.is-cancel{border-color:var(--ts-line2);background:var(--ts-sheet)} html.tye-ts body .tye-dlg .tye-dlg-btn:active:not(:disabled){transform:scale(.985)} html.tye-ts body .tye-dlg .tye-dlg-btn.is-cancel:active:not(:disabled){background:var(--ts-press)} /* the page sheet */ html.tye-ts body .tye-dlg.lay-page .tye-dlg-card{top:calc(env(safe-area-inset-top,0px) + 10px);max-height:none;animation-name:tsPageUp;animation-duration:.34s} html.tye-ts body .tye-dlg.lay-page.is-closing .tye-dlg-card{animation:tsPageDown .22s cubic-bezier(.32,.72,0,1) both} html.tye-ts body .tye-dlg.lay-page .tye-dlg-bar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;flex:none;min-height:66px;padding:12px 14px 10px} html.tye-ts body .tye-dlg.lay-page .tye-dlg-bar-t{display:block;grid-column:2;margin:0;overflow:hidden;font-size:17px;font-weight:700;line-height:1.25;text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--ts-ink)} html.tye-ts body .tye-dlg.lay-page .tye-dlg-x{position:static;grid-column:3;width:44px;height:44px;min-height:44px !important;border-radius:22px;background:var(--ts-sheet);color:var(--ts-ink); box-shadow:0 1px 2px rgba(17,20,28,.06),0 4px 16px rgba(17,20,28,.12);transition:transform .12s ease} html.tye-ts[data-theme="dark"] body .tye-dlg.lay-page .tye-dlg-x{background:rgba(255,255,255,.08);box-shadow:none} html.tye-ts body .tye-dlg.lay-page .tye-dlg-x:active{transform:scale(.92)} html.tye-ts body .tye-dlg.lay-page .tye-dlg-main{padding:6px 20px 20px} html.tye-ts body .tye-dlg.lay-page .tye-dlg-ic,html.tye-ts body .tye-dlg.lay-page:not(.title-long) .tye-dlg-title{display:none} /* (a question longer than the bar wraps in the body; the bar keeps only the X) */ html.tye-ts body .tye-dlg.lay-page.title-long .tye-dlg-bar-t{visibility:hidden} html.tye-ts body .tye-dlg.lay-page.title-long .tye-dlg-title{margin-top:2px;padding-right:0} html.tye-ts body .tye-dlg-label{margin:14px 0 8px;font-size:14px} html.tye-ts body .tye-dlg.lay-page .tye-dlg-main > .tye-dlg-msg{margin-bottom:4px} html.tye-ts body .tye-dlg.lay-page .tye-dlg-main > .tye-dlg-title + .tye-dlg-label{margin-top:4px} html.tye-ts body .tye-dlg .tye-dlg-input{height:52px;padding:0 16px;border-color:transparent;border-radius:14px;font-size:16px !important} html.tye-ts body .tye-dlg .tye-dlg-field.has-unit .tye-dlg-input{padding-right:56px} html.tye-ts body .tye-dlg .tye-dlg-input:focus{background:var(--ts-sheet);border-color:var(--ts-dot);box-shadow:none} html.tye-ts body .tye-dlg .tye-dlg-input[aria-invalid="true"]{border-color:var(--dlg-err)} html.tye-ts body .tye-dlg-unit{right:16px;font-size:15px} html.tye-ts body .tye-dlg-err{margin-top:10px;font-size:14px} html.tye-ts body .tye-dlg.lay-page .tye-dlg-foot{flex-direction:row;padding:14px 20px calc(14px + max(env(safe-area-inset-bottom,0px),var(--ts-kbh,0px)));border-top:1px solid var(--ts-line);background:var(--ts-sheet)} html.tye-ts body .tye-dlg.lay-page .tye-dlg-btn{flex:1 1 0;width:auto;min-width:0} html.tye-ts body .tye-dlg.lay-page.ok-long .tye-dlg-btn.is-ok{flex-grow:2} @media (max-width:440px) and (min-height:501px){ html.tye-ts body .tye-dlg.lay-page.ok-long .tye-dlg-foot{flex-direction:column-reverse} html.tye-ts body .tye-dlg.lay-page.ok-long .tye-dlg-btn{flex:none;width:100%} } html.tye-ts body .tye-dlg-choices{gap:0;margin:8px -6px 0} html.tye-ts body .tye-dlg-choice{min-height:52px;padding:10px 12px;border-radius:14px;font-size:16px} html.tye-ts body .tye-dlg-choice:active{background:var(--ts-press)} html.tye-ts body .tye-dlg-choice-s{font-size:13.5px} html.tye-ts body .tye-dlg-body{margin-top:18px} html.tye-ts body .tye-dlg-row{padding:12px 12px 12px 16px;border:0;border-radius:16px;background:var(--ts-press)} html.tye-ts body .tye-dlg-row-k{font-size:16px} html.tye-ts body .tye-dlg-row-s{font-size:13.5px} html.tye-ts body .tye-dlg .tye-dlg-step-b{width:44px;height:44px;min-height:44px !important;border-color:var(--ts-line2);border-radius:22px;background:var(--ts-sheet)} html.tye-ts body .tye-dlg .tye-dlg-step-b:active:not(:disabled){transform:scale(.92)} html.tye-ts body .tye-dlg .tye-dlg-step-in{width:60px;height:44px;border-color:transparent;border-radius:12px;background:var(--ts-sheet);font-size:17px !important} html.tye-ts body .tye-dlg .tye-dlg-step-in:focus{border-color:var(--ts-dot);box-shadow:none} html.tye-ts body .tye-dlg-sum{padding:16px;border:1px solid var(--ts-line);border-radius:16px;background:transparent} html.tye-ts body .tye-dlg-sum span{font-size:15px} html.tye-ts body .tye-dlg-sum b{font-size:19px} html.tye-ts body .tye-dlg-fine{font-size:13.5px} @media (max-height:500px){ html.tye-ts body .tye-dlg.lay-sheet .tye-dlg-ic{display:none} html.tye-ts body .tye-dlg.lay-sheet .tye-dlg-main{padding-top:20px} html.tye-ts body .tye-dlg-title{font-size:19px} html.tye-ts body .tye-dlg.lay-sheet .tye-dlg-foot{flex-direction:row;padding-top:14px} html.tye-ts body .tye-dlg .tye-dlg-btn{flex:1 1 0;width:auto;height:44px;min-height:44px !important} html.tye-ts body .tye-dlg.lay-page .tye-dlg-card{top:0;border-radius:0} html.tye-ts body .tye-dlg.lay-page .tye-dlg-bar{min-height:48px;padding:4px 10px} html.tye-ts body .tye-dlg.lay-page .tye-dlg-x{width:40px;height:40px;min-height:40px !important} } @media (prefers-reduced-motion:reduce){html.tye-ts body .tye-dlg-card,html.tye-ts body .tye-dlg.is-closing .tye-dlg-card,html.tye-ts body .tye-dlg.lay-page .tye-dlg-card,html.tye-ts body .tye-dlg.lay-page.is-closing .tye-dlg-card{animation:none}} /* ---------- SWITCH_SIZE_2026Q4: the same switch, finger size (tokens in voice_ui.css) ---------- 51x31 with a 27px knob at 2px, travel 20px - what the Extensions page and the account pages already showed. The families whose desktop rules read the tokens (.ext-toggle outside a tools page, .settings-toggle, .mem-toggle) follow automatically; the three below are restated because their own rules are !important or more specific. */ html.tye-ts{--tsw-w:51px;--tsw-h:31px;--tsw-r:16px;--tsw-k:27px;--tsw-p:2px;--tsw-x:20px} html.tye-ts .aie-switch{width:var(--tsw-w);height:var(--tsw-h);border-radius:var(--tsw-r)} html.tye-ts .aie-switch::after{width:var(--tsw-k);height:var(--tsw-k);top:var(--tsw-p);left:var(--tsw-p)} html.tye-ts .aie-switch:checked::after{transform:translateX(var(--tsw-x))} html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle{width:var(--tsw-w) !important;height:var(--tsw-h) !important;min-height:0 !important;border-radius:var(--tsw-r) !important} html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle::after{width:var(--tsw-k) !important;height:var(--tsw-k) !important;top:var(--tsw-p) !important;left:var(--tsw-p) !important;border-radius:50% !important} html.tye-ts body #ts-pg-body > .ts-pg-panel .ext-toggle.on::after{transform:translateX(var(--tsw-x)) !important} /* the saved card's auto-renew switch: its knob was 25px at 3px while its track was already 51x31 */ html.tye-ts body #mem-view-account #bill-pm-box .settings-toggle{width:var(--tsw-w);height:var(--tsw-h)} html.tye-ts body #mem-view-account #bill-pm-box .settings-toggle-slider{border-radius:var(--tsw-r)} html.tye-ts body #mem-view-account #bill-pm-box .settings-toggle-slider::before{width:var(--tsw-k);height:var(--tsw-k);top:var(--tsw-p);left:var(--tsw-p)} html.tye-ts body #mem-view-account #bill-pm-box input:checked + .settings-toggle-slider::before{transform:translateX(var(--tsw-x))} /* the right rail's on / off rows (Snap, Ortho, Grid, Axes, Isolate...): the same size, its own ink track */ html.tye-ts body #ts-casc .ts-cp-sw{width:var(--tsw-w);height:var(--tsw-h);border-radius:var(--tsw-r)} html.tye-ts body #ts-casc .ts-cp-sw::after{width:var(--tsw-k);height:var(--tsw-k);top:var(--tsw-p);left:var(--tsw-p)} html.tye-ts body #ts-casc [aria-checked="true"] .ts-cp-sw::after{transform:translateX(var(--tsw-x))} /* ---------- ACCOUNT_PAGES3_2026Q4: Overview, Plans, Custom Instructions, Active devices, Data, API and Help on touch ---------- Seven account pages still wore their desktop modal on a phone: red text links and red code chips, 5px card borders, a serif landing headline, a 9px black Save, an invisible placeholder, a full-width red-bordered button per device, 31px buttons, 13.5px fields (iOS zooms), a Help card floating inside the page. They now use the pages' own vocabulary: grey --ts-press cards and lists on the sheet, 62px rows, 52px ink pills, 40px compact pills, fields at 16px, neutral actions with red only as the ink of a destructive one. CSS only except Help (a real page now, phase_help_panel.js) and the Overview chart (tap and drag, voice_ui.js). Scope: every rule keys on #mem-view-account (the slide's ghost copy of a leaving page sits there, outside #mem-panels, and keeps its id) and never on a viewport width (an iPad at 1025-1400 is touch too). Hover comes back only under (hover:hover). */ /* the line under the title, on every page that has one */ html.tye-ts body #mem-view-account :is(#mem-panel-plans, #mem-panel-instructions, #mem-panel-devices, #mem-panel-data, #mem-panel-api) > .mem-panel-sub { margin: 0 0 18px; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--ts-ink2); } /* ===== Overview ===== */ html.tye-ts #mem-panel-overview { --ov-card: var(--ts-press); --ov-line: var(--ts-line); --ov-cell: var(--ts-sheet); --ov-txt: var(--ts-ink); --ov-txt2: var(--ts-ink2); --ov-txt3: var(--ts-ink3); --ov-accink: var(--ts-ink); --ov-marktrack: var(--ts-sheet); --ov-bar: var(--ts-ink3); --ov-hover: color-mix(in srgb, var(--ts-ink) 7%, transparent); --ov-solid: #eeeeef; } html.tye-ts[data-theme="dark"] #mem-panel-overview { --ov-solid: #333438; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-head { margin: 0 0 18px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-head .mem-panel-title { font-size: 22px; font-weight: 700; color: var(--ts-ink); } html.tye-ts body #mem-view-account #mem-panel-overview .mem-pbadge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; margin-left: 8px; font: 600 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; vertical-align: 3px; } html.tye-ts body #mem-view-account #mem-panel-overview .mem-pbadge:not(.pro):not(.max) { background: var(--ts-press); color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-overview .ov-sub { font-size: 15px; color: var(--ts-ink2); } /* the e-mail and "Member since" on their own lines: a wrapped row began with a stray middle dot */ html.tye-ts body #mem-view-account #mem-panel-overview .ov-sub { flex-direction: column; align-items: flex-start; gap: 2px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-since::before { content: none; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-grid { gap: 12px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-card { padding: 16px; border: 0; border-radius: 16px; gap: 12px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-ch { min-height: 40px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-ct { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ts-ink); white-space: normal; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-ct .ti { font-size: 18px; color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-overview .ov-link { height: 40px; min-height: 40px !important; padding: 0 8px 0 14px; gap: 2px; border: 1px solid var(--ts-line2) !important; border-radius: 20px; background: var(--ts-sheet) !important; color: var(--ts-ink) !important; font-size: 14px; font-weight: 600; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-link .ti { font-size: 16px; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-overview .ov-link:active { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-val { font-size: 30px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-of { font-size: 15px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-foot { font-size: 13.5px; line-height: 1.45; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-meter { height: 8px; border-radius: 4px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-meter:not(.warn):not(.full) > span { background: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-overview .ov-chip { font-size: 13px; padding: 4px 10px 4px 8px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-chip .ti { font-size: 14px; } /* (the green tint over the sheet colour, not over the grey card: 4.8:1 again, was 4.2:1) */ html.tye-ts body #mem-view-account #mem-panel-overview .ov-chip.good { background: linear-gradient(var(--ov-goodbg), var(--ov-goodbg)), var(--ts-sheet); } html.tye-ts body #mem-view-account #mem-panel-overview .ov-sum b { font-size: 16px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-sum span { font-size: 13.5px; } /* (pan-y: a vertical swipe still scrolls the page, a sideways drag scrubs the days - voice_ui.js _ovWireChart) */ html.tye-ts body #mem-view-account #mem-panel-overview .ov-plot { height: 140px; grid-template-columns: 28px minmax(0, 1fr); touch-action: pan-y; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-xl { grid-template-columns: 28px minmax(0, 1fr); font-size: 12.5px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-yaxis { font-size: 12px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-yaxis span { right: 6px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-peak { font-size: 12px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-tip b { font-size: 14px; } html.tye-ts body #mem-view-account #mem-panel-overview :is(.ov-tip span, .ov-tip em) { font-size: 13px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-empty { height: 160px; border-radius: 12px; font-size: 13.5px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-empty b { font-size: 15px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-model b { font-size: 17px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-model span { font-size: 13.5px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-actions { flex-direction: column; align-items: stretch; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-btn { justify-content: center; height: 48px; min-height: 48px !important; padding: 0 18px; border-radius: 24px; font-size: 15px; border: 1px solid var(--ts-line2) !important; background: var(--ts-sheet) !important; color: var(--ts-ink) !important; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-btn .ti { font-size: 18px; } /* (the desktop primary hard-codes white ink: on the dark theme's light pill that would be white on white) */ html.tye-ts body #mem-view-account #mem-panel-overview .ov-btn.primary { background: var(--ts-ink) !important; border-color: transparent !important; color: var(--ts-sheet) !important; filter: none !important; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-btn:active { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-btn.primary:active { background: var(--ts-ink) !important; opacity: .85; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-row { grid-template-columns: 36px minmax(0, 1fr) auto; min-height: 56px; gap: 12px; } @container ov (max-width: 460px) { html.tye-ts body #mem-view-account #mem-panel-overview .ov-row { grid-template-columns: 36px minmax(0, 1fr); } } html.tye-ts body #mem-view-account #mem-panel-overview .ov-ri { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-rt b { font-size: 16px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-rt span { font-size: 13.5px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-stat { padding: 12px 14px; border-radius: 12px; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-stat span { font-size: 15px; } @media (hover: hover) { html.tye-ts body #mem-view-account #mem-panel-overview .ov-link:hover { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-btn:not(.primary):hover { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-overview .ov-btn.primary:hover { opacity: .9; } } /* ===== Plans ===== */ /* (one column at every touch width, your own plan first; the serif landing headline goes - the page has a title) */ html.tye-ts body #mem-view-account #mem-panel-plans .pc-hero { display: none; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-card.is-cur { order: -1; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-card.is-down { order: 1; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-card { padding: 18px 16px 16px; border: 0; border-radius: 16px; background: var(--ts-press); opacity: 1; transition: none; box-shadow: none; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-card:hover { transform: none; border-color: transparent; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-card.is-cur { box-shadow: inset 0 0 0 2px var(--ts-ink); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-head { margin: 0 0 4px; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-name { font: 700 20px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--ts-ink); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font: 600 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; background: var(--ts-sheet); color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-tagline { min-height: 0; margin-bottom: 14px; font-size: 15px; color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-price { min-height: 0; margin-bottom: 16px; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-price-cur { font-family: Inter, system-ui, sans-serif; font-size: 18px; font-weight: 600; color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-price-big { font-family: Inter, system-ui, sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--ts-ink); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-price-per { font-family: Inter, system-ui, sans-serif; font-size: 15px; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-price-helper { font: 500 13.5px/1.35 Inter, system-ui, sans-serif; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-tax-line { font: 500 13.5px/1.35 Inter, system-ui, sans-serif; color: var(--ts-ink3) !important; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-cta { height: 52px; min-height: 52px !important; padding: 0 18px; border-radius: 26px; margin-bottom: 8px; font: 600 16px/1 Inter, system-ui, sans-serif; transition: none; transform: none; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-cta.up { background: var(--ts-ink); color: var(--ts-sheet); border-color: transparent; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-cta.up:hover { background: var(--ts-ink); transform: none; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-cta.up:active { opacity: .85; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-cta.free { background: var(--ts-sheet); border: 1px solid var(--ts-line2); color: var(--ts-ink); } /* ("Current plan" is a status, not a button: a green pill) */ html.tye-ts body #mem-view-account #mem-panel-plans .pc-cta.cur { align-self: flex-start; width: auto; height: 32px; min-height: 32px !important; padding: 0 12px; margin: 0 0 4px; border: 0; border-radius: 16px; font: 600 14px/1 Inter, system-ui, sans-serif; background: linear-gradient(rgba(22, 163, 74, .10), rgba(22, 163, 74, .10)), var(--ts-sheet); color: #15803d; cursor: default; opacity: 1; } html.tye-ts[data-theme="dark"] body #mem-view-account #mem-panel-plans .pc-cta.cur { background: linear-gradient(rgba(95, 208, 138, .12), rgba(95, 208, 138, .12)), var(--ts-sheet); color: #86efac; } /* ("Downgrade not supported" is a note, not a faded button) */ html.tye-ts body #mem-view-account #mem-panel-plans .pc-cta.down { align-self: flex-start; width: auto; height: auto; min-height: 0 !important; padding: 0; margin: 0 0 4px; border: 0; background: none; opacity: 1; cursor: default; text-align: left; font: 400 13.5px/1.4 Inter, system-ui, sans-serif; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-subnote { display: none; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-divider { margin: 16px 0 14px; border-top-color: var(--ts-line); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-feat-header { font-size: 15px; color: var(--ts-ink); margin-bottom: 8px; } html.tye-ts body #mem-view-account #mem-panel-plans .pc-feats li { font-size: 15px; line-height: 1.45; padding: 6px 0; gap: 12px; color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-feats li.off { opacity: 1; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-check { width: 18px; height: 18px; color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-check.pc-x { color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-plans .pc-footnote { margin: 14px 4px 0; text-align: left; font-size: 13.5px; line-height: 1.5; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-plans .mem-pgrid .text-loading { display: block; padding: 20px 4px; font-size: 15px; color: var(--ts-ink3); } @media (hover: hover) { html.tye-ts body #mem-view-account #mem-panel-plans .pc-cta.up:hover { opacity: .9; } } /* ===== Custom Instructions ===== */ html.tye-ts body #mem-view-account #mem-panel-instructions .ci-card { padding: 16px; margin-bottom: 12px; border: 0 !important; border-radius: 16px; background: var(--ts-press); transition: none; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-field-label { gap: 4px; margin-bottom: 10px; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-field-title { font: 600 16px/1.3 Inter, system-ui, sans-serif; color: var(--ts-ink); } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-field-hint { font-size: 13.5px; line-height: 1.45; color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-textarea { min-height: 112px; padding: 14px; border: 1px solid transparent; border-radius: 14px; background: var(--ts-sheet); color: var(--ts-ink); font-family: Inter, system-ui, sans-serif; font-size: 16px !important; line-height: 1.5; resize: vertical; box-shadow: none; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-textarea:focus { outline: none; border-color: var(--ts-dot); background: var(--ts-sheet); box-shadow: none; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-textarea::placeholder { color: var(--ts-ink3); opacity: .85; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-counter { margin-top: 8px; font-size: 13px; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-counter.warn { color: #a3470a; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-counter.full { color: #b91c1c; } html.tye-ts[data-theme="dark"] body #mem-view-account #mem-panel-instructions .ci-counter.warn { color: #f0c674; } html.tye-ts[data-theme="dark"] body #mem-view-account #mem-panel-instructions .ci-counter.full { color: #fca5a5; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-actions { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 8px; margin: 4px 0 0; } html.tye-ts body #mem-view-account #mem-panel-instructions :is(.ci-save, .ci-clear) { width: 100%; height: 52px; min-height: 52px !important; padding: 0 18px; border-radius: 26px; font: 600 16px/1 Inter, system-ui, sans-serif; transition: none; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-save { background: var(--ts-ink) !important; color: var(--ts-sheet) !important; border: 1px solid transparent !important; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-save:active { opacity: .85; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-save:disabled { opacity: .5; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-clear { background: transparent !important; border: 1px solid var(--ts-line2) !important; color: var(--ts-ink) !important; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-clear:active { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-tip { margin: 18px 4px 0; padding: 0; border: 0; background: none; font-size: 13.5px; line-height: 1.5; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-tip svg { width: 16px; height: 16px; opacity: 1 !important; vertical-align: -3px; } @media (hover: hover) { html.tye-ts body #mem-view-account #mem-panel-instructions .ci-save:hover { opacity: .9; } html.tye-ts body #mem-view-account #mem-panel-instructions .ci-clear:hover { background: var(--ts-press) !important; } } /* ===== Active devices: one list, a device per row; Sign out is a compact pill, never a red box ===== */ html.tye-ts #mem-panel-devices { --v-card: transparent; --v-cardline: transparent; --v-cardhover: transparent; --v-greenbg: transparent; --v-greenline: transparent; --v-redtint: transparent; --v-field: transparent; --v-shadow: none; --v-txt: var(--ts-ink); --v-txt2: var(--ts-ink2); --v-txt3: var(--ts-ink2); --v-iconbg: var(--ts-sheet); --v-icon: var(--ts-ink2); --v-redline: var(--ts-line2); --v-red: #b91c1c; --v-redink: #b91c1c; } html.tye-ts[data-theme="dark"] #mem-panel-devices { --v-red: #fca5a5; --v-redink: #fca5a5; } html.tye-ts body #mem-view-account #mem-panel-devices #dev-list { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--ts-press); container-type: inline-size; container-name: dev; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 8px; min-height: 62px; margin: 0; padding: 12px 16px; box-sizing: border-box; background: transparent !important; border: 0 !important; border-top: 1px solid var(--ts-line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; transition: none !important; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-card:first-child { border-top: 0 !important; } @container dev (max-width: 420px) { html.tye-ts body #mem-view-account #mem-panel-devices .dev-card { grid-template-columns: 36px minmax(0, 1fr); } html.tye-ts body #mem-view-account #mem-panel-devices .dev-revoke { grid-column: 2; justify-self: start; } } html.tye-ts body #mem-view-account #mem-panel-devices :is(.dev-icon, .dev-card.is-current .dev-icon) { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px !important; background: var(--ts-sheet) !important; color: var(--ts-ink2) !important; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-icon svg { width: 19px; height: 19px; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-info { width: auto; min-width: 0; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 2px; font: 600 16px/1.3 Inter, system-ui, sans-serif; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-cur-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font: 600 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; background: linear-gradient(rgba(22, 163, 74, .10), rgba(22, 163, 74, .10)), var(--ts-sheet) !important; color: #15803d !important; } html.tye-ts[data-theme="dark"] body #mem-view-account #mem-panel-devices .dev-cur-badge { background: linear-gradient(rgba(95, 208, 138, .12), rgba(95, 208, 138, .12)), var(--ts-sheet) !important; color: #86efac !important; } /* (an IPv6 address is one long word: it must wrap, or the whole sheet scrolls sideways) */ html.tye-ts body #mem-view-account #mem-panel-devices .dev-meta { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-revoke { align-self: center; justify-self: end; height: 40px; min-height: 40px !important; padding: 0 14px; border-radius: 20px !important; border: 1px solid var(--ts-line2) !important; background: var(--ts-sheet) !important; color: var(--v-red) !important; font: 600 14px/1 Inter, system-ui, sans-serif; white-space: nowrap; transition: none !important; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-revoke:active { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-actions { display: flex; flex-direction: column; align-items: stretch; margin: 28px 0 0; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-revoke-all { width: 100%; height: 52px; min-height: 52px !important; padding: 0 18px; border-radius: 26px !important; border: 1px solid var(--ts-line2) !important; background: transparent !important; color: var(--v-red) !important; font: 600 16px/1.2 Inter, system-ui, sans-serif; transition: none !important; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-revoke-all:active { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-revoke-all:disabled { opacity: 1 !important; color: var(--ts-ink3) !important; border-color: var(--ts-line) !important; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-tip { margin: 10px 4px 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; font-size: 13.5px; line-height: 1.5; color: var(--ts-ink3) !important; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-tip svg { opacity: 1 !important; } html.tye-ts body #mem-view-account #mem-panel-devices :is(.dev-empty, #dev-list .text-loading) { display: block; padding: 24px 16px; text-align: center; font-size: 15px; color: var(--ts-ink3) !important; } @media (hover: hover) { html.tye-ts body #mem-view-account #mem-panel-devices .dev-revoke:hover { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-devices .dev-revoke-all:not(:disabled):hover { background: var(--ts-press) !important; } } /* ===== Data: section labels over grey lists and tiles ===== */ html.tye-ts #mem-panel-data { --dv-txt: var(--ts-ink); --dv-txt2: var(--ts-ink2); --dv-txt3: var(--ts-ink3); --dv-line: var(--ts-line); --dv-btnbg: var(--ts-sheet); --dv-btnline: var(--ts-line2); --dv-accent: var(--ts-dot); --dv-dangerline: var(--ts-line2); } html.tye-ts body #mem-view-account #mem-panel-data .dv-wrap { gap: 0; } html.tye-ts body #mem-view-account #mem-panel-data .dv-card { padding: 0; border: 0; border-radius: 0; background: transparent; gap: 8px; margin-top: 26px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-card:first-child { margin-top: 0; } html.tye-ts body #mem-view-account #mem-panel-data .dv-ch { padding: 0 4px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-ct { font-size: 12.5px; letter-spacing: .07em; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-data .dv-ct .ti { display: none; } html.tye-ts body #mem-view-account #mem-panel-data .dv-danger .dv-ct { color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-data .dv-total { font-size: 13.5px; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-data .dv-total b { font-size: 13.5px; color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-data .dv-tiles { gap: 10px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-tile { padding: 14px 16px; border-radius: 16px; background: var(--ts-press); } html.tye-ts body #mem-view-account #mem-panel-data .dv-tl { font-size: 13.5px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-tl .ti { font-size: 17px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-tv b { font-size: 24px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-tv span { font-size: 13.5px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-td { font-size: 13px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-tk { font-size: 13px; border-top-color: var(--ts-line); } html.tye-ts body #mem-view-account #mem-panel-data .dv-also { margin: 10px 4px 0; font-size: 13.5px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-link { display: inline-flex; align-items: center; height: 36px; min-height: 36px !important; padding: 0 14px; border: 1px solid var(--ts-line2); border-radius: 18px; text-decoration: none; background: transparent; } html.tye-ts body #mem-view-account #mem-panel-data .dv-rows { background: var(--ts-press); border-radius: 16px; overflow: hidden; } html.tye-ts body #mem-view-account #mem-panel-data .dv-row { min-height: 62px; padding: 12px 16px; gap: 12px; border-top: 1px solid var(--ts-line); } html.tye-ts body #mem-view-account #mem-panel-data .dv-row:first-child { border-top: 0; padding-top: 12px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-row:last-child { padding-bottom: 12px; } html.tye-ts body #mem-view-account #mem-panel-data :is(.dv-ri, .dv-danger .dv-ri) { width: 36px; height: 36px; border-radius: 10px; background: var(--ts-sheet); color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-data .dv-ri .ti { font-size: 19px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-rt b { font-size: 16px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-rt span { font-size: 13.5px; line-height: 1.4; } @container dv (max-width: 460px) { html.tye-ts body #mem-view-account #mem-panel-data .dv-ra { padding-left: 48px; } } html.tye-ts body #mem-view-account #mem-panel-data .dv-btn { height: 40px; min-height: 40px !important; padding: 0 14px; border-radius: 20px; border: 1px solid var(--ts-line2); background: var(--ts-sheet); color: var(--ts-ink); font: 600 14px/1 Inter, system-ui, sans-serif; } html.tye-ts body #mem-view-account #mem-panel-data .dv-btn .ti { font-size: 17px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-btn:active { background: var(--ts-press); } html.tye-ts body #mem-view-account #mem-panel-data .dv-btn.danger { color: var(--dv-danger); border-color: var(--ts-line2); background: var(--ts-sheet); } html.tye-ts body #mem-view-account #mem-panel-data .dv-btn.danger.solid { color: #fff; border-color: transparent; background: var(--dv-dangersolid); } html.tye-ts body #mem-view-account #mem-panel-data .dv-btn.danger:active { background: var(--ts-press); } html.tye-ts body #mem-view-account #mem-panel-data .dv-btn.danger.solid:active { background: var(--dv-dangersolid); opacity: .85; } html.tye-ts body #mem-view-account #mem-panel-data .dv-confirm { border: 0; border-radius: 14px; padding: 14px 16px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-cf-h { font-size: 15px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-cf-list { font-size: 13.5px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-cf-l { font-size: 14px; font-weight: 600; } html.tye-ts body #mem-view-account #mem-panel-data .dv-cf-err { font-size: 14px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-in { max-width: none; height: 52px; min-height: 52px; padding: 0 14px; border: 1px solid transparent; border-radius: 14px; background: var(--ts-sheet); font-family: Inter, system-ui, sans-serif; font-size: 16px !important; } html.tye-ts body #mem-view-account #mem-panel-data .dv-in:focus-visible { outline: none; border-color: var(--ts-dot); } html.tye-ts body #mem-view-account #mem-panel-data .dv-in[aria-invalid="true"] { border-color: var(--dv-danger); } html.tye-ts body #mem-view-account #mem-panel-data .dv-cf-a { gap: 8px; } html.tye-ts body #mem-view-account #mem-panel-data .dv-cf-a .dv-btn { flex: 1 1 120px; height: 48px; min-height: 48px !important; border-radius: 24px; font-size: 15px; } @media (hover: hover) { html.tye-ts body #mem-view-account #mem-panel-data .dv-btn:not(.solid):hover:not(:disabled) { background: var(--ts-press); } } /* ===== API ===== */ /* (the panel's own tokens, re-pointed: the red URL chip, the red code chip and Regenerate's red border go) */ html.tye-ts #mem-panel-api { --a-card: var(--ts-press); --a-cardline: transparent; --a-line: var(--ts-line); --a-txt: var(--ts-ink); --a-txt2: var(--ts-ink2); --a-txt3: var(--ts-ink3); --a-accink: var(--ts-ink); --a-acctint: var(--ts-sheet); --a-field: var(--ts-sheet); --a-fieldtxt: var(--ts-ink); --a-chip: var(--ts-sheet); --a-btn: var(--ts-sheet); --a-btnline: var(--ts-line2); --a-btnhover: var(--ts-sheet); --a-redline: var(--ts-line2); --a-redtint: var(--ts-sheet); --a-red: #b91c1c; } html.tye-ts[data-theme="dark"] #mem-panel-api { --a-red: #fca5a5; } html.tye-ts body #mem-view-account #mem-panel-api .api-section { padding: 16px; border: 0 !important; border-radius: 16px !important; margin-bottom: 12px; } html.tye-ts body #mem-view-account #mem-panel-api .api-section-label { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; margin: 0 0 12px; } html.tye-ts body #mem-view-account #mem-panel-api .api-section-hdr { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } /* (the key wraps: a new key is ~56 characters, and a phone showed about 33 of them) */ html.tye-ts body #mem-view-account #mem-panel-api .api-key-field { padding: 12px 14px; margin-bottom: 12px; border: 0 !important; border-radius: 14px !important; font: 400 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0 !important; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; } html.tye-ts body #mem-view-account #mem-panel-api .api-key-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } html.tye-ts body #mem-view-account #mem-panel-api .api-key-actions button { flex: 1 1 120px; justify-content: center; gap: 8px; height: 48px; min-height: 48px !important; padding: 0 14px !important; border-radius: 24px !important; border: 1px solid var(--ts-line2) !important; background: var(--ts-sheet) !important; color: var(--ts-ink) !important; font: 600 15px/1 Inter, system-ui, sans-serif; transition: none !important; } html.tye-ts body #mem-view-account #mem-panel-api .api-key-actions button svg { width: 18px; height: 18px; } html.tye-ts body #mem-view-account #mem-panel-api .api-key-actions button:active { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-api .api-key-actions button.danger { color: var(--a-red) !important; } html.tye-ts body #mem-view-account #mem-panel-api .api-key-note { font-size: 13.5px; line-height: 1.5; } html.tye-ts body #mem-view-account #mem-panel-api .api-key-note code { font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; } html.tye-ts body #mem-view-account #mem-panel-api .api-info-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; } html.tye-ts body #mem-view-account #mem-panel-api .api-info-row:first-child { padding-top: 0; } html.tye-ts body #mem-view-account #mem-panel-api .api-info-row:last-child { padding-bottom: 0; border-bottom: 0; } html.tye-ts body #mem-view-account #mem-panel-api .api-info-k { width: auto; font-size: 13.5px; } html.tye-ts body #mem-view-account #mem-panel-api :is(.api-info-v, .api-info-v--url, .api-info-v--method) { padding: 0; background: transparent !important; border-radius: 0 !important; color: var(--ts-ink) !important; font: 500 15px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; word-break: normal; overflow-wrap: anywhere; } /* (Vision / Text: the Profile sheet's segmented look - ink on a sheet track) */ html.tye-ts body #mem-view-account #mem-panel-api .api-modes { flex: 1 1 100%; display: flex; gap: 4px; padding: 3px !important; border-radius: 12px !important; background: var(--ts-sheet) !important; } html.tye-ts body #mem-view-account #mem-panel-api .api-mode { flex: 1 1 0; height: 38px; min-height: 38px !important; padding: 0 10px !important; border-radius: 9px !important; background: transparent; color: var(--ts-ink2) !important; font: 600 14px/1 Inter, system-ui, sans-serif; } html.tye-ts body #mem-view-account #mem-panel-api .api-mode.active { background: var(--ts-ink) !important; color: var(--ts-sheet) !important; box-shadow: none !important; } /* (the code card becomes a column: language chips, the code, then Copy under it - it used to sit over "Node.js") */ html.tye-ts body #mem-view-account #mem-panel-api .api-code-wrap { margin-top: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; } html.tye-ts body #mem-view-account #mem-panel-api .api-code-wrap .api-tabs-lang { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; background: transparent; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } html.tye-ts body #mem-view-account #mem-panel-api .api-code-wrap .api-tabs-lang::-webkit-scrollbar { display: none; } html.tye-ts body #mem-view-account #mem-panel-api .api-tabs-lang .api-tab { flex: none; height: 36px; min-height: 36px !important; margin: 0; padding: 0 14px; border: 1px solid var(--ts-line2); border-radius: 18px; background: var(--ts-sheet); color: var(--ts-ink2); font: 500 14px/1 Inter, system-ui, sans-serif; } html.tye-ts body #mem-view-account #mem-panel-api .api-tabs-lang .api-tab.active { background: var(--ts-ink); color: var(--ts-sheet); border-color: transparent; font-weight: 600; } html.tye-ts body #mem-view-account #mem-panel-api .api-code-pre { margin: 0; padding: 14px 16px; border-radius: 14px; font: 400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } html.tye-ts body #mem-view-account #mem-panel-api .api-copy-btn { position: static; display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; min-height: 44px !important; margin-top: 10px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--ts-line2); background: var(--ts-sheet); color: var(--ts-ink); font: 600 15px/1 Inter, system-ui, sans-serif; backdrop-filter: none; -webkit-backdrop-filter: none; } html.tye-ts body #mem-view-account #mem-panel-api .api-copy-btn:active { background: var(--ts-press); } /* (the plan gate: the house empty-state card; the renderer shows and hides its wrapper #mem-api-gate, not this) */ html.tye-ts body #mem-view-account #mem-panel-api .api-gate { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; padding: 16px; border: 0; border-radius: 16px; background: var(--ts-press); } html.tye-ts body #mem-view-account #mem-panel-api .api-gate-icon { width: 44px; height: 44px; border-radius: 12px; margin: 0 0 4px; background: var(--ts-sheet); color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-api .api-gate h3 { margin: 0; font: 700 20px/1.25 Inter, system-ui, sans-serif; color: var(--ts-ink); } html.tye-ts body #mem-view-account #mem-panel-api .api-gate p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-api .api-gate .mem-save-btn { width: 100%; height: 52px; min-height: 52px !important; padding: 0 18px; border-radius: 26px !important; border: 1px solid transparent !important; background: var(--ts-ink) !important; color: var(--ts-sheet) !important; font: 600 16px/1 Inter, system-ui, sans-serif; } @media (hover: hover) { html.tye-ts body #mem-view-account #mem-panel-api .api-key-actions button:hover { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-api .api-copy-btn:hover { background: var(--ts-press); } } /* ===== Help & Commands: a page of the account stack (phase_help_panel.js mounts the drawer into #mem-panel-help) ===== */ /* (the page scrolls its list, not the whole sheet: tabs, search and chips stay put) */ html.tye-ts.ts-mpage body #mem-overlay #mem-view-account #mem-panels:has(> #mem-panel-help.active) { display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 0 !important; } html.tye-ts body #mem-view-account #mem-panel-help.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer { position: relative; inset: auto; z-index: auto; width: auto; max-width: none; max-height: none; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; opacity: 1; pointer-events: auto; transform: none; transition: none; border-radius: 0; background: transparent !important; color: var(--ts-ink) !important; border: 0 !important; box-shadow: none !important; font: 400 15px/1.45 Inter, "Noto Sans Thai", system-ui, sans-serif; --panel: var(--ts-sheet); --panel2: var(--ts-press); --line: var(--ts-line); --line2: var(--ts-line2); --txt: var(--ts-ink); --txt2: var(--ts-ink2); --txt3: var(--ts-ink3); --acc: var(--ts-ink); --acc2: var(--ts-ink2); --accink: var(--ts-ink); --acctint: var(--ts-press); --acctint2: var(--ts-press); --chip: var(--ts-press); --kbd: var(--ts-press); --sans: Inter, "Noto Sans Thai", system-ui, sans-serif; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer > :is(.hdr, .foot) { display: none !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .modes { flex: none; display: flex; gap: 4px; margin: 2px 16px 10px; padding: 3px; border: 0 !important; border-radius: 12px; background: var(--ts-press); } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .mode { flex: 1 1 0; min-width: 0; height: 38px; min-height: 38px !important; margin: 0; padding: 0 6px; gap: 0; border: 0 !important; border-radius: 9px; background: transparent !important; color: var(--ts-ink2) !important; font: 600 14px/1 Inter, system-ui, sans-serif; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .mode.active { background: var(--ts-sheet) !important; color: var(--ts-ink) !important; box-shadow: 0 1px 2px rgba(17, 20, 28, .08), 0 1px 6px rgba(17, 20, 28, .06); } html.tye-ts[data-theme="dark"] body #mem-view-account #mem-panel-help #tye-help-drawer .mode.active { background: rgba(255, 255, 255, .12) !important; box-shadow: none; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer :is(.mode-ic, .mode-n) { display: none; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .mode-lbl { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a phone: "Commands" takes the room it needs (equal quarters cut it to "Comman..." at 390) */ @media (max-width: 480px) { html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .mode { flex: 1 1 auto; } } @media (max-width: 360px) { html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .mode { font-size: 13px; } } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .search-bar { flex: none; padding: 0 16px 10px; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .search-bar input { height: 44px; min-height: 44px !important; padding: 0 14px 0 42px; border: 0 !important; border-radius: 12px; color: var(--ts-ink) !important; font: 400 16px/1.3 Inter, system-ui, sans-serif !important; box-shadow: none !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .search-bar input::placeholder { color: var(--ts-ink3) !important; opacity: 1; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .search-bar input:focus { border-color: transparent !important; box-shadow: inset 0 0 0 1.5px var(--ts-ink3) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .cats { flex: none; gap: 8px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .cats::-webkit-scrollbar { display: none; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .cat { display: inline-flex; align-items: center; height: 36px; min-height: 36px !important; padding: 0 14px; border: 1px solid var(--ts-line2) !important; border-radius: 18px; background: transparent !important; color: var(--ts-ink2) !important; box-shadow: none !important; font: 500 14px/1 Inter, system-ui, sans-serif; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .cat.active { background: var(--ts-ink) !important; color: var(--ts-sheet) !important; border-color: transparent !important; font-weight: 600; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer :is(.list, .content) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 16px calc(28px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))); } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .grp-h { padding: 18px 4px 8px; font: 600 12.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: .07em; color: var(--ts-ink3) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .grp-h::after { display: none; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .list > .grp-h:first-child { padding-top: 4px; } /* (the rows of a group read as one grey list, like every other page) */ html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .list > .item { min-height: 62px; margin: 0 !important; padding: 10px 4px 10px 16px !important; gap: 14px; border-radius: 0 !important; background: var(--ts-press) !important; border-top: 1px solid var(--ts-line); } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .list > :is(.item:first-child, .grp-h + .item) { border-top: 0; border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .list > .item:is(:last-child, :has(+ .grp-h)) { border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .list > .item:active { background: color-mix(in srgb, var(--ts-ink) 7%, var(--ts-press)) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer :is(.item .ico, .item:hover .ico) { width: 40px; height: 40px; border-radius: 11px; background: var(--ts-sheet) !important; color: var(--ts-ink2) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .item .ico svg { width: 20px; height: 20px; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer :is(.item .cmd, .item:hover .cmd) { font: 600 15px/1.3 var(--mono); white-space: normal; overflow-wrap: anywhere; color: var(--ts-ink) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .item .desc { margin-top: 3px; font: 400 13.5px/1.45 Inter, system-ui, sans-serif; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ts-ink2) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .item .run { display: none; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .item .fav { width: 44px; height: 44px; min-height: 44px !important; border-radius: 22px; opacity: 1 !important; font-size: 18px; color: var(--ts-ink3) !important; background: transparent !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .item .fav.on { color: var(--star) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .item .fav:active { background: color-mix(in srgb, var(--ts-ink) 8%, transparent) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .empty { padding: 40px 16px; font-size: 15px; color: var(--ts-ink3) !important; } /* guides, shortcuts, about: cards on the sheet, code and keys on the card */ html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .content { padding-top: 4px; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .guide { margin: 0 0 12px; padding: 16px !important; border: 0 !important; border-radius: 16px; background: var(--ts-press); } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .g-title { font: 700 17px/1.3 Inter, system-ui, sans-serif; margin-bottom: 10px; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .g-body { font-size: 15px; line-height: 1.6; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .g-body h4 { font: 600 15px/1.3 Inter, system-ui, sans-serif; margin: 16px 0 6px; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .g-body h4:first-child { margin-top: 0; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .g-body code { background: var(--ts-sheet) !important; color: var(--ts-ink) !important; font-size: 13.5px; border-radius: 6px; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .g-body em { color: var(--ts-ink) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .g-body kbd { background: var(--ts-sheet) !important; border-color: var(--ts-line2) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-grp { margin: 0 0 8px; padding: 0; border: 0 !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-grp-h { margin: 0; padding: 18px 4px 8px; font: 600 12.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ts-ink3) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-grp:first-child .sc-grp-h { padding-top: 4px; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-tbl { display: block; border-radius: 16px; overflow: hidden; background: var(--ts-press); } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-tbl tbody { display: block; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-tbl tr { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border-bottom: 0 !important; border-top: 1px solid var(--ts-line); } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-tbl tr:first-child { border-top: 0; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-tbl td { padding: 0 !important; font-size: 15px; color: var(--ts-ink) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-keys { width: auto; flex: none; max-width: 55%; white-space: normal; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .sc-tbl kbd { font-size: 12.5px; background: var(--ts-sheet) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .about-hero { border-bottom: 0 !important; margin-bottom: 12px; padding: 16px; border-radius: 16px; background: var(--ts-press); } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .hero-ic { background: var(--ts-ink) !important; color: var(--ts-sheet) !important; box-shadow: none !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .hero-ttl { font: 700 20px/1.25 Inter, system-ui, sans-serif; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .hero-url { color: var(--ts-ink) !important; text-decoration: underline; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .about-sec { margin: 0 0 12px; padding: 16px; border-radius: 16px; background: var(--ts-press); } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .about-sec h4 { margin: 0 0 8px; font: 600 15px/1.3 Inter, system-ui, sans-serif; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer .about-sec strong { color: var(--ts-ink) !important; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer :is(.mode, .cat, .fav, .item .body):focus-visible { outline: 2px solid var(--ts-dot); outline-offset: -2px; } /* short landscape: one scroller - tabs, search and chips scroll away instead of taking half of a 300px page */ /* the slide's picture of a leaving Help page sits where the page was (the sheet has no side padding for Help) */ @media (min-height: 501px) { html.tye-ts.ts-mpage body #ts-mp-ghost > #mem-panel-help { display: flex; flex-direction: column; height: calc(100% + 2px); margin: -2px -16px 0 !important; } } @media (max-height: 500px) { html.tye-ts.ts-mpage body #mem-overlay #mem-view-account #mem-panels:has(> #mem-panel-help.active) { display: block !important; overflow-y: auto !important; padding: 2px 16px calc(28px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))) !important; } html.tye-ts body #mem-view-account #mem-panel-help.active { display: block; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer { display: block; overflow: visible; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer :is(.list, .content) { overflow: visible; padding: 0; } html.tye-ts body #mem-view-account #mem-panel-help #tye-help-drawer :is(.modes, .search-bar, .cats) { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } /* SECURITY_THEME_2026Q4: the backup codes a phone shows in the house dialog */ html.tye-ts body .tye-dlg .bc-codes { padding: 16px; border-radius: 16px; } html.tye-ts body .tye-dlg .bc-codes code { font-size: 15px; } html.tye-ts body .tye-dlg .bc-copy { height: 44px; min-height: 44px; font-size: 15px; } /* ══════════════ SECURITY_PAGE_2026Q4: the Security page on a phone or tablet ══════════════════════════════════ The house page look, like the other account pages: a grey card, 62px rows, a 40px pill per row, red ink for the destructive ones. The markup is untouched - phase_totp_option_b.js watches #mem-totp-status / #mem-totp-btn. */ html.tye-ts #mem-panel-security { --sec-card: var(--ts-press); --sec-line: var(--ts-line); --sec-line2: var(--ts-line2); --sec-ink: var(--ts-ink); --sec-ink2: var(--ts-ink2); --sec-ink3: var(--ts-ink3); --sec-press: var(--ts-press); --sec-btn: var(--ts-sheet); --sec-btnline: var(--ts-line2); } html.tye-ts body #mem-view-account #mem-panel-security .mem-sc { border: 0 !important; border-radius: 16px; margin-bottom: 12px; background: var(--ts-press); overflow: hidden; } html.tye-ts body #mem-view-account #mem-panel-security .mem-sc-hdr { padding: 14px 16px 8px; border: 0 !important; } html.tye-ts body #mem-view-account #mem-panel-security .mem-sc-hdr h3 { font: 600 12.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr { min-height: 62px; padding: 12px 16px; gap: 12px; border: 0 !important; border-top: 1px solid var(--ts-line) !important; } html.tye-ts body #mem-view-account #mem-panel-security .mem-sc-hdr + .mem-sr { border-top: 0 !important; } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr-info h4 { font: 600 16px/1.3 Inter, system-ui, sans-serif; color: var(--ts-ink); } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr-info p { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ts-ink2); } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr .mem-save-btn { flex: none; height: 40px; min-height: 40px !important; padding: 0 16px; border-radius: 20px; background: var(--ts-sheet) !important; border: 1px solid var(--ts-line2) !important; color: var(--ts-ink) !important; font: 600 14px/1 Inter, system-ui, sans-serif; white-space: nowrap; /* the house .aie-btn.sm, touch_shell.css:1861 */ } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr .mem-save-btn.danger { color: var(--ts-danger, #b42318) !important; } html.tye-ts[data-theme="dark"] body #mem-view-account #mem-panel-security .mem-sr .mem-save-btn.danger { color: #fca5a5 !important; } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr .mem-save-btn:active { background: var(--ts-press) !important; } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr .mem-save-btn:disabled { opacity: .5; } /* the state chip sits on the sheet colour, not on the grey card (it would vanish) */ html.tye-ts body #mem-view-account #mem-panel-security .mem-2fa-badge { align-self: center; height: 26px; padding: 0 12px; border-radius: 13px; font-size: 12px; letter-spacing: .04em; border: 1px solid var(--ts-line2) !important; background: var(--ts-sheet) !important; color: var(--ts-ink2) !important; } html.tye-ts body #mem-view-account #mem-panel-security .mem-2fa-badge.mem-2fa-active { border-color: rgba(22, 163, 74, .3) !important; color: #166534 !important; /* green-800: -700 reads 4.39:1 here */ background: linear-gradient(rgba(22, 163, 74, .12), rgba(22, 163, 74, .12)), var(--ts-sheet) !important; } html.tye-ts[data-theme="dark"] body #mem-view-account #mem-panel-security .mem-2fa-badge.mem-2fa-active { border-color: rgba(34, 197, 94, .32) !important; color: #86efac !important; background: linear-gradient(rgba(34, 197, 94, .18), rgba(34, 197, 94, .18)), var(--ts-sheet) !important; } /* the Change-password form, when this page still shows one */ html.tye-ts body #mem-view-account #mem-panel-security .mem-pw-form { padding: 4px 16px 16px; border-top: 1px solid var(--ts-line); } html.tye-ts body #mem-view-account #mem-panel-security .mem-field label { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ts-ink3); } html.tye-ts body #mem-view-account #mem-panel-security .mem-field input { height: 52px; min-height: 52px; padding: 0 14px; border-radius: 14px; font-size: 16px; background: var(--ts-sheet); border: 1px solid var(--ts-line2); color: var(--ts-ink); } html.tye-ts body #mem-view-account #mem-panel-security .mem-pw-actions { display: flex; flex-direction: column-reverse; gap: 8px; margin-top: 12px; } html.tye-ts body #mem-view-account #mem-panel-security .mem-pw-actions .mem-save-btn { width: 100%; height: 52px; min-height: 52px !important; border-radius: 26px; background: var(--ts-ink) !important; border: 1px solid transparent !important; color: var(--ts-sheet) !important; font-size: 16px; } html.tye-ts body #mem-view-account #mem-panel-security .mem-pw-actions .mem-icon-btn { width: 100%; height: 48px; min-height: 48px !important; border-radius: 24px; background: transparent !important; border: 1px solid var(--ts-line2) !important; color: var(--ts-ink) !important; font-size: 16px; font-weight: 600; } @media (hover: hover) { html.tye-ts body #mem-view-account #mem-panel-security .mem-sr .mem-save-btn:hover:not(:disabled) { background: var(--ts-press) !important; } } /* the row: text left, action right, on one edge */ html.tye-ts body #mem-view-account #mem-panel-security .mem-sr { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr-info { flex: 1 1 auto; min-width: 0; } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr > .mem-save-btn, html.tye-ts body #mem-view-account #mem-panel-security .mem-sr > .mem-2fa-badge { flex: 0 0 auto; margin-left: auto; } /* a narrow phone: the text keeps the full width and the action sits under it, still on the right edge (squeezed into one line the first row ran to 150px of wrapped words) */ @media (max-width: 360px) { html.tye-ts body #mem-view-account #mem-panel-security .mem-sr { flex-direction: column; align-items: stretch; gap: 10px; } html.tye-ts body #mem-view-account #mem-panel-security .mem-sr > .mem-save-btn, html.tye-ts body #mem-view-account #mem-panel-security .mem-sr > .mem-2fa-badge { align-self: flex-end; } } /* ══════════════ WELCOME_BACK_2026Q4: the returning-user dashboard on a phone or tablet ═══════════════════════ The house page look, like the account pages: grey pill rows on the sheet, ink text, no hairline borders. Not a width query - html.tye-ts is also on for a coarse-pointer tablet up to 1400px, where neither the 1024px nor the 640px media block in the base sheet fires and the card would otherwise render the desktop metrics. */ html.tye-ts body .usage-summary { --wb-card: var(--ts-press); --wb-line: transparent; --wb-line2: transparent; --wb-ink: var(--ts-ink); --wb-ink2: var(--ts-ink2); --wb-ink3: var(--ts-ink3); --wb-press: var(--ts-press); max-width: 600px; padding: 0; } html.tye-ts body .usage-summary .us-hi { font-size: 27px; gap: 12px; margin-bottom: 9px; } html.tye-ts body .usage-summary .us-hi-icon { width: 42px; height: 42px; border-radius: 13px; } html.tye-ts body .usage-summary .us-hi-icon svg { width: 22px; height: 22px; } html.tye-ts body .usage-summary .us-sub { font-size: 14px; margin-bottom: 20px; } html.tye-ts body .usage-summary .us-stats { margin-bottom: 22px; border: 0; border-radius: 18px; background: var(--ts-press); } html.tye-ts body .usage-summary .us-stat { padding: 14px 8px; } html.tye-ts body .usage-summary .us-stat + .us-stat::before { background: var(--ts-line); } html.tye-ts body .usage-summary .us-stat-v { font-size: 25px; } html.tye-ts body .usage-summary .us-stat-l { font-size: 10.5px; letter-spacing: .06em; } html.tye-ts body .usage-summary .us-recent-head { font-size: 11px; letter-spacing: .12em; margin-bottom: 10px; } html.tye-ts body .usage-summary .us-recent { gap: 8px; } html.tye-ts body .usage-summary .us-recent-item { min-height: 58px; padding: 10px 12px 10px 14px; gap: 13px; border: 0; border-radius: 16px; background: var(--ts-press); } html.tye-ts body .usage-summary .us-recent-item:active { background: var(--ts-line); } html.tye-ts body .usage-summary .us-rec-icon { width: 36px; height: 36px; border-radius: 11px; border: 0; background: var(--ts-sheet); color: var(--ts-ink2); } html.tye-ts body .usage-summary .us-rec-icon svg { width: 18px; height: 18px; } html.tye-ts body .usage-summary .us-rec-title { font-size: 15px; } html.tye-ts body .usage-summary .us-rec-ago { font-size: 12.5px; } html.tye-ts body .usage-summary .us-rec-go { width: 17px; height: 17px; } /* a tablet has the room for the desktop type scale */ @media (min-width: 700px) { html.tye-ts body .usage-summary { max-width: 620px; } html.tye-ts body .usage-summary .us-hi { font-size: 32px; gap: 15px; } html.tye-ts body .usage-summary .us-hi-icon { width: 48px; height: 48px; border-radius: 15px; } html.tye-ts body .usage-summary .us-hi-icon svg { width: 25px; height: 25px; } html.tye-ts body .usage-summary .us-sub { font-size: 15px; margin-bottom: 28px; } html.tye-ts body .usage-summary .us-stat { padding: 19px 10px; } html.tye-ts body .usage-summary .us-stat-v { font-size: 28px; } html.tye-ts body .usage-summary .us-recent-item { min-height: 66px; } } /* cad_responsive.css:628-630 centres #welcome-card with justify-content on #chat, which IS the scroller: a card taller than the pane then starts above scrollTop 0 and its greeting cannot be scrolled back into view. The auto margins that rule also sets (:631-634) centre it on their own whenever there is room, and collapse to 0 when there is not - which is the behaviour we want at every height. */ html.tye-ts body #chat:has(> #welcome-card > .usage-summary) { justify-content: flex-start !important; } /* a narrow phone: the stat labels are what runs out of room first */ @media (max-width: 360px) { html.tye-ts body .usage-summary .us-hi { font-size: 24px; } html.tye-ts body .usage-summary .us-stat { padding: 14px 4px; } html.tye-ts body .usage-summary .us-stat-v { font-size: 22px; } html.tye-ts body .usage-summary .us-stat-l { font-size: 9.5px; letter-spacing: .04em; } html.tye-ts body .usage-summary .us-rec-title { font-size: 14px; } } /* ══════════════ QUICK_PALETTE_2026Q4: the /command palette on a phone or tablet ═══════════════════════════════ Scoped to html.tye-ts, not to a width: the only responsive rule this palette ever had was a @media (max-width: 640px) block in cad_responsive.css, so every tablet in the touch shell - 641px up to the 1400px coarse-pointer line - rendered the desktop palette, hover styles and all. That block is deleted; this replaces it. No !important anywhere: the position comes from --qp-left / --qp-bottom now, not inline styles. */ html.tye-ts body #tye-slash { --qp-panel: var(--ts-sheet); --qp-line: var(--ts-line); --qp-line2: var(--ts-line2); --qp-ink: var(--ts-ink); --qp-ink2: var(--ts-ink2); --qp-ink3: var(--ts-ink3); --qp-press: var(--ts-press); --qp-foot: var(--ts-press); --qp-kbd: var(--ts-press); --qp-shadow: var(--ts-shadow); left: 10px; right: 10px; width: auto; border-radius: 18px; /* the composer-relative anchor still decides the bottom edge, but the keyboard is up by definition here (the user typed "/"), and touch_shell.js measures it into --ts-kbh - which the old palette ignored entirely */ bottom: max(var(--qp-bottom, 120px), calc(var(--ts-kbh, 0px) + 12px)); max-height: min(58dvh, calc(100dvh - max(var(--qp-bottom, 120px), calc(var(--ts-kbh, 0px) + 12px)) - 14px)); } html.tye-ts body #tye-slash .qp-hdr { padding: 14px 16px 11px; } html.tye-ts body #tye-slash .qp-title { font-size: 19px; } html.tye-ts body #tye-slash .qp-hdr-left { gap: 10px; } html.tye-ts body #tye-slash .qp-cat { padding: 12px 16px 6px; } html.tye-ts body #tye-slash .qp-item { min-height: 46px; padding: 9px 16px 9px 18px; gap: 12px; } html.tye-ts body #tye-slash .qp-item:active { background: var(--qp-press); } html.tye-ts body #tye-slash .qp-cmd { font-size: 13.5px; } html.tye-ts body #tye-slash .qp-desc { font-size: 12.5px; } html.tye-ts body #tye-slash .qp-foot { padding: 10px 16px; } /* the key hints are keyboard affordances: a phone has no arrow keys and no Esc, and the palette closes by tapping outside it */ html.tye-ts body #tye-slash .qp-keys { display: none; } html.tye-ts body #tye-slash .qp-foot { justify-content: space-between; } html.tye-ts body #tye-slash .qp-foot::before { content: 'Tap a command to insert it'; color: var(--qp-ink3); font-size: 12px; } /* a tablet has the room for the desktop type scale, and a centred panel reads better than one hung off the composer's left edge across 1180px */ @media (min-width: 700px) { html.tye-ts body #tye-slash { /* centred with auto margins, not translateX: the entrance keyframes animate `transform`, which would yank a translateX-centred panel to the left edge for the first 160 ms */ left: 0; right: 0; width: min(88vw, 620px); margin-inline: auto; border-radius: 16px; } html.tye-ts body #tye-slash .qp-hdr { padding: 16px 20px 12px; } html.tye-ts body #tye-slash .qp-title { font-size: 21px; } html.tye-ts body #tye-slash .qp-cat { padding: 13px 20px 6px; } html.tye-ts body #tye-slash .qp-item { padding: 9px 20px 9px 22px; } html.tye-ts body #tye-slash .qp-foot { padding: 11px 20px; } } /* a narrow phone: the description is the first thing to run out of room - 46 of the 223 rows ellipsise at 320px with both halves on one line. Stack them and let the description wrap instead. */ @media (max-width: 460px) { html.tye-ts body #tye-slash .qp-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; padding-top: 8px; padding-bottom: 8px; } html.tye-ts body #tye-slash .qp-cmd { max-width: 100%; } html.tye-ts body #tye-slash .qp-desc { text-align: left; white-space: normal; overflow: visible; line-height: 1.35; } } @media (prefers-reduced-motion: reduce) { html.tye-ts body #tye-slash { animation: none; } } /* ── PROPERTIES_FLOAT_2026Q4 — the Properties (#v3d-rp) and Drawing (#rp) cards are floating panels now, so on touch they belong in the same rules that already place .sk-panel: clear of the right rail, and on a phone pinned to the width left of it. Written as one block at the end rather than by editing eight shared selector lists: an id beats .sk-panel's class either way, and a reader can see the whole touch behaviour of these two cards in one place. The phone pin is the shell's existing decision, not a new one: a header drag would otherwise push the card over the tab bar. phase_rp_drawer.js does not arm its drag at these widths, so the gesture is not taken and then ignored. ── */ /* every touch width: clear of the rail */ html.tye-ts body #v3d-rp, html.tye-ts body #rp { right: var(--ts-rail-gutter) !important; max-width: calc(100vw - var(--ts-rail-gutter) - 10px) !important; } /* phones and short screens: the width left of the rail, above the tab bar */ @media (max-width: 640px), (max-height: 500px) { html.tye-ts body #v3d-rp, html.tye-ts body #rp { left: calc(env(safe-area-inset-left, 0px) + 10px) !important; right: var(--ts-rail-gutter) !important; width: auto !important; max-width: none !important; top: var(--ts-rail-top) !important; max-height: calc(100dvh - var(--ts-rail-top) - var(--ts-space) - var(--ts-pill, 0px) - 8px) !important; } } /* and it steps aside for the same things .sk-panel does */ html.tye-ts.ts-casc-open body #v3d-rp, html.tye-ts.ts-casc-open body #rp, html.tye-ts.ts-sheet-open body #v3d-rp, html.tye-ts.ts-sheet-open body #rp, html.tye-ts.ts-page body #v3d-rp, html.tye-ts.ts-page body #rp, html.tye-ts body.mobile-panel-open #v3d-rp, html.tye-ts body.mobile-panel-open #rp, html.tye-ts body:has(#mem-overlay.open) #v3d-rp, html.tye-ts body:has(#mem-overlay.open) #rp, html.tye-ts body:has(#pay-overlay.open) #v3d-rp, html.tye-ts body:has(#pay-overlay.open) #rp, html.tye-ts body:has(#search-modal:not(.d-none)) #v3d-rp, html.tye-ts body:has(#search-modal:not(.d-none)) #rp, html.tye-ts body:has(#prompt-modal.show) #v3d-rp, html.tye-ts body:has(#prompt-modal.show) #rp, html.tye-ts body:has(#confirm-modal.show) #v3d-rp, html.tye-ts body:has(#confirm-modal.show) #rp { visibility: hidden !important; pointer-events: none !important; } /* ── END PROPERTIES_FLOAT_2026Q4 ── */ /* ============================================================================ FEATROW_LONGPRESS_2026Q4 - a feature row is pressable The same five properties .sess-item (:1318) and .proj-hdr (:1385) carry, and for the same reasons: the callout and the selection handles would come up under the finger at 480 ms, and touch-action:manipulation is NOT optional here - voice_ui.html's viewport has no user-scalable=no, so double-tap zoom is live on these rows. Specificity (0,3,1) beats the kernel's injected .sk-row (0,1,0) whatever the injection order, so no !important. .sk-list keeps its own scrolling: no touch-action goes on it. ============================================================================ */ html.tye-ts body .sk-row, html.tye-ts body .sk-check-i[data-fid] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* ============================================================================================ MOBILE_PANEL_SHEET_2026Q4 - the two CAD panels become this app's own bottom sheet on touch. Owner: "ux ui ยังไม่เข้าธีม mobile ยังไม่สวย ออกแบบใหม่", then chose this from mockups. Measured on a 390x844 phone before anything was written: #ts-bar draws at radius 29 and #ts-quick at 27, both on rgba(255,255,255,.94) with saturate(170%) blur(22px) and --ts-shadow; the CAD panels drew at radius 18 on opaque white with 0 18px 50px rgba(0,0,0, .16) and no blur. Two systems on one screen. The Drawing card sat at [10,52,306,640] with 84px of dead screen beneath it while its log clipped mid-line above; the Model card left about 300px empty under it - a panel floating in the middle of a screen whose every other surface hugs an edge. So it is the geometry of #ts-sheet (:894-944), value for value, because that IS the mobile panel of this app. The one departure is the scrim: #ts-sheet dims the app behind it because it is a menu, and these are inspectors - Z-Clip, visibility and Color by part have to be watched on the model while they are dragged. The sheet still takes the screen: the bar, the rail, the tree and the dock step aside, exactly the list body.mobile-panel-open uses below. ============================================================================================ */ html.tye-ts body #v3d-rp.rpd-open, html.tye-ts body #rp.rpd-open { display: flex !important; flex-direction: column !important; position: fixed !important; left: max(0px, calc(50% - 280px)) !important; right: max(0px, calc(50% - 280px)) !important; top: auto !important; bottom: 0 !important; width: auto !important; max-width: none !important; height: auto !important; max-height: min(86dvh, 720px) !important; padding: 8px 0 calc(var(--ts-safe) + 12px) !important; background: var(--ts-sheet) !important; color: var(--ts-ink) !important; border: 1px solid var(--ts-line) !important; border-bottom: 0 !important; border-radius: 22px 22px 0 0 !important; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: tsSheetUp .26s cubic-bezier(.32, .72, 0, 1) !important; z-index: 9030 !important; } /* the grabber every sheet in this app has (.ts-grab is 38x5 r3 on --ts-line). A ::before on a flex column is its first flex item, so no markup has to change. */ html.tye-ts body #v3d-rp.rpd-open::before, html.tye-ts body #rp.rpd-open::before { content: "" !important; width: 38px !important; height: 5px !important; border-radius: 3px !important; background: var(--ts-line2) !important; margin: 2px auto 10px !important; flex: none !important; } @media (prefers-reduced-motion: reduce) { html.tye-ts body #v3d-rp.rpd-open, html.tye-ts body #rp.rpd-open { animation: none !important; } } /* a sheet owns the screen - the same list body.mobile-panel-open already steps aside */ html.tye-ts body:has(#v3d-rp.rpd-open) #ts-bar, html.tye-ts body:has(#rp.rpd-open) #ts-bar, html.tye-ts body:has(#v3d-rp.rpd-open) #ts-quick, html.tye-ts body:has(#rp.rpd-open) #ts-quick, html.tye-ts body:has(#v3d-rp.rpd-open) #ts-casc, html.tye-ts body:has(#rp.rpd-open) #ts-casc, html.tye-ts body:has(#v3d-rp.rpd-open) .sk-panel, html.tye-ts body:has(#rp.rpd-open) .sk-panel, html.tye-ts body:has(#v3d-rp.rpd-open) .sk-ed2, html.tye-ts body:has(#rp.rpd-open) .sk-ed2 { visibility: hidden !important; pointer-events: none !important; } /* THE DOCK, ON EVERY SIZE. #tye-pro-dock (z 99999) occupies the same rectangle as the panel (z 9000) - measured [1068,96,320,850] against [1070,96,312,828] on a 1400px desktop - and covers it whole, so nothing in the panel can be clicked while it is open. sw 2668 and 2669 made it yield, but both of those rules are scoped html.tye-ts, so only touch was ever covered. This is the same rule without that prefix. */ body:has(#v3d-rp.rpd-open) #tye-pro-dock, body:has(#rp.rpd-open) #tye-pro-dock { visibility: hidden !important; pointer-events: none !important; } /* ============================== END MOBILE_PANEL_SHEET_2026Q4 ============================== */