/* ========================================================================== TPM Labs — platform maintenance surface Two pieces, both inside `.main`, both using tokens styles.css already defines. No new colour, no new type scale, no new spacing system — the maintenance state is the existing Launcher wearing a different expression, not a second design. DELIBERATELY SCOPED. The gate hides the app-launch surface and NOTHING else. `.nav` (and with it the TPM Labs ID button), `.footer`, `.ambient` and the whole `.tid-*` panel are untouched at every width and in both appearances — that is what makes admin recovery structural rather than careful. See platform.js's header. ========================================================================== */ /* -------------------------------------------------------------------------- The gate. One attribute on , set by platform.js. -------------------------------------------------------------------------- */ html[data-launcher-maintenance="on"] .header, html[data-launcher-maintenance="on"] [data-library], html[data-launcher-maintenance="on"] .berth { display: none; } .pm-gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; /* Sits in the space the library would have occupied, so the page keeps its existing rhythm under the nav rather than jumping. */ min-height: 46vh; justify-content: center; padding: 40px 4px; animation: tpm-fade .42s var(--ease) both; } .pm-gate__wordmark { margin: 0; font-weight: 590; font-size: var(--wm); line-height: 1; letter-spacing: -.012em; color: var(--t1); } .pm-gate__labs { font-weight: 400; color: var(--t2); } .pm-gate__title { margin: 0; font-weight: 400; font-size: var(--title); line-height: 1.26; letter-spacing: -.028em; color: var(--t1); text-wrap: pretty; } .pm-gate__message { margin: 0; max-width: 34ch; font-size: 14.5px; line-height: 1.5; color: var(--t2); text-wrap: pretty; } /* The route back in. Quiet on purpose — it is a door for the person who needs it, not an invitation to everyone else. Same glass material as the status pill, so it belongs to this design without competing with anything. */ .pm-gate__admin { margin-top: 6px; height: 40px; padding: 0 22px; border-radius: 100px; background: var(--glass); border: 1px solid var(--gedge); color: var(--t2); font: 600 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; letter-spacing: -.006em; cursor: pointer; -webkit-backdrop-filter: blur(var(--gblur)) saturate(180%); backdrop-filter: blur(var(--gblur)) saturate(180%); transition: opacity .2s ease, transform .2s var(--ease); outline-offset: 4px; } .pm-gate__admin:hover { opacity: .85; } .pm-gate__admin:active { transform: scale(.985); } .pm-gate__admin:focus-visible { outline: 2px solid var(--t1); } /* -------------------------------------------------------------------------- The admin banner. Shown to an admin while Launcher maintenance is ON, so the one person who is NOT gated still knows the surface is closed to everyone else — and can reach the control in one tap. -------------------------------------------------------------------------- */ .pm-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 20px; padding: 12px 12px 12px 16px; box-sizing: border-box; border-radius: 100px; background: var(--glass); border: 1px solid var(--gedge); -webkit-backdrop-filter: blur(var(--gblur)) saturate(180%); backdrop-filter: blur(var(--gblur)) saturate(180%); box-shadow: var(--gtop); animation: tpm-fade .42s var(--ease) both; } .pm-banner__text { min-width: 0; font-size: 13px; line-height: 1.35; color: var(--t2); text-wrap: pretty; } .pm-banner__action { flex: none; height: 32px; padding: 0 15px; border: none; border-radius: 100px; background: var(--btn); color: var(--btnfg); font: 600 12.5px -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; letter-spacing: -.008em; cursor: pointer; transition: opacity .2s ease, transform .2s var(--ease); outline-offset: 4px; } .pm-banner__action:hover { opacity: .9; } .pm-banner__action:active { transform: scale(.985); } .pm-banner__action:focus-visible { outline: 2px solid var(--t1); } /* The banner is a pill on a phone too, but the sentence needs the room — let it stack rather than squeeze the action off the edge. */ @media (max-width: 519px) { .pm-banner { flex-direction: column; align-items: stretch; gap: 10px; border-radius: 20px; padding: 14px; } .pm-banner__action { width: 100%; height: 36px; } } /* -------------------------------------------------------------------------- Platform Maintenance rows inside the TPM Labs ID panel. Only additions to the panel's existing vocabulary — .tid-row and friends do all the structural work. -------------------------------------------------------------------------- */ .pm-state { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; margin-right: 4px; border-radius: 100px; background: var(--glass); border: 1px solid var(--gedge); font: 500 9px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .11em; color: var(--t2); white-space: nowrap; } .pm-state__dot { width: 5px; height: 5px; border-radius: 50%; background: oklch(0.72 0.17 155); } .pm-state--down .pm-state__dot { background: oklch(0.78 0.16 65); } .pm-state--down { color: var(--t1); } /* -------------------------------------------------------------------------- Platform Maintenance rows — responsive. The row is name+sub on the left, then a status chip and a toggle on the right. "LIVE" fits on a 375px phone; "MAINTENANCE" is roughly twice as wide and pushed the toggle off the edge. Shrinking the type would have made an already-small chip smaller, so the row RESTRUCTURES instead: below 480px the controls drop onto their own line under the app name and align right, which gives the widest possible chip its full width and keeps the toggle inside the card at any label length. -------------------------------------------------------------------------- */ .pm-control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 auto; /* sized by its contents; never clamped or clipped */ margin-left: auto; } /* Let the name column give way rather than push the controls out. */ .pm-row .tid-row__text { min-width: 0; } .pm-row .tid-row__label, .pm-row .tid-row__sub { overflow-wrap: anywhere; } @media (max-width: 479px) { .pm-row { flex-wrap: wrap; row-gap: 12px; } .pm-row .tid-row__text { flex: 1 1 100%; } .pm-control { flex: 1 1 100%; justify-content: flex-end; } }