:root{--pm-focus:2px solid currentColor;--pm-radius:12px;--pm-shadow:0 18px 55px rgba(0,0,0,.18)}
:focus-visible{outline:var(--pm-focus)!important;outline-offset:3px!important}
.pm-skip{position:fixed;z-index:2147483647;left:12px;top:12px;transform:translateY(-160%);background:#fff;color:#111;padding:10px 14px;border-radius:8px;box-shadow:var(--pm-shadow)}
.pm-skip:focus{transform:none}
.pm-status{position:fixed;z-index:2147483645;right:16px;bottom:16px;max-width:min(420px,calc(100vw - 32px));padding:11px 15px;border:1px solid #DCE6ED;border-radius:14px;background:linear-gradient(180deg,rgba(249,252,254,.98),rgba(241,247,250,.98));color:#10263A;box-shadow:0 18px 48px rgba(2,15,25,.28);font:600 12.5px/1.45 Inter,system-ui,sans-serif}
/* ── 32.8.0 Calm Surface — ProjMa Workspace Hub command surface ────────────
   The one command surface for the product: a light card on a quiet scrim,
   ProjMa teal for the accent, DM Mono for structural labels, and the keyboard
   contract printed in the footer where it is actually used. */
.pm-command{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:flex-start;justify-content:center;padding:clamp(64px,11vh,116px) 14px 18px;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.pm-command[hidden]{display:none}
.pm-command__backdrop{position:absolute;inset:0;background:rgba(3,14,24,.50);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pm-command__panel{position:relative;width:min(720px,calc(100vw - 28px));max-height:min(690px,calc(100dvh - 90px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(157,187,207,.32);border-radius:22px;color:#10263A;background:linear-gradient(180deg,rgba(249,252,254,.98),rgba(241,247,250,.98));box-shadow:0 38px 110px rgba(2,15,25,.44),0 0 0 1px rgba(255,255,255,.38) inset}
.pm-command__head{padding:16px 16px 12px;border-bottom:1px solid #DCE6ED;background:radial-gradient(circle at 10% 0%,rgba(35,212,190,.16),transparent 34%),radial-gradient(circle at 88% 0%,rgba(61,124,182,.13),transparent 34%)}
.pm-command__title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:11px}
.pm-command__title strong{font-size:13px;font-weight:850;letter-spacing:-.01em;line-height:1.25}
.pm-command__title span{font:600 9px/1.35 'DM Mono',ui-monospace,monospace;color:#6F8497;text-transform:uppercase;letter-spacing:.08em;text-align:right;max-width:46%}
.pm-command__field{display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid #CFDCE5;border-radius:13px;background:#fff;box-shadow:0 7px 24px rgba(14,42,66,.06)}
.pm-command__field b{color:#0C8F88;font-size:17px;line-height:1}
.pm-command__head input{min-width:0;flex:1;height:45px;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:#10263A;font:650 13px/1.2 Inter,system-ui,sans-serif}
.pm-command__head input::placeholder{color:#8AA0B2;font-weight:550}
.pm-command__head input::-webkit-search-cancel-button{display:none}
.pm-command kbd{font:600 9px/1 'DM Mono',ui-monospace,monospace;color:#6F8497;padding:4px 6px;border:1px solid #D7E3EB;border-radius:6px;background:#fff}
.pm-command__results{flex:1;overflow:auto;padding:9px 9px 14px;overscroll-behavior:contain}
.pm-command__group{margin-top:7px;padding:6px 9px;color:#73899A;font:700 9px/1 'DM Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.09em}
.pm-command__row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;width:100%;min-height:46px;padding:5px 9px;text-align:left;border:1px solid transparent;border-radius:11px;background:transparent;color:#173047;cursor:pointer;font:730 11.5px/1.3 Inter,system-ui,sans-serif}
.pm-command__row:hover,.pm-command__row:focus-visible,.pm-command__row.is-active{background:#fff;border-color:#D7E3EB;box-shadow:0 6px 18px rgba(14,42,66,.055)}
.pm-command__badge{width:29px;height:29px;display:grid;place-items:center;border:1px solid #D5E7E8;border-radius:9px;background:linear-gradient(135deg,#E9FBF8,#EEF5FB);color:#087B76;font-size:12px;font-weight:850}
.pm-command__text{min-width:0}
.pm-command__text b{display:block;font-weight:730;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-command__text small{display:block;margin-top:2px;color:#7B8FA1;font:600 10px/1.35 Inter,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-command__tag{font:600 8.5px/1 'DM Mono',ui-monospace,monospace;color:#8196A7;white-space:nowrap}
.pm-command__empty{padding:34px 18px;text-align:center;color:#71879A;font-size:12px;line-height:1.55}
.pm-command footer{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid #DCE6ED;background:rgba(255,255,255,.7);color:#8193A2;font:600 9px/1.4 'DM Mono',ui-monospace,monospace}
@media(prefers-reduced-motion:no-preference){.pm-command:not([hidden]) .pm-command__panel{animation:pmCommandIn .16s cubic-bezier(.2,.8,.2,1)}@keyframes pmCommandIn{from{opacity:.25;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}}
@media(max-width:620px){.pm-command{padding:10px;align-items:flex-end}.pm-command__panel{width:100%;max-height:min(82dvh,720px);border-radius:20px}.pm-command__tag{display:none}.pm-command__title span{max-width:52%}}
@media(max-width:640px){.pm-command__results{max-height:none}.pm-status{left:12px;right:12px;bottom:12px;max-width:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Floating surfaces share one viewport instead of competing for the same corner. */
html[data-pm-ai-open="true"] .pm-status{left:16px;right:auto}
/* 31.21 — CTA phase published by __pmCtaPos(). The offsets stay in JS (they
   depend on the measured AI panel rect); these rules own everything that is
   purely a function of state, so the two never disagree. */
body.pm-partner-collapsed [data-pm-partner="1"]{border-radius:999px}
body.pm-partner-collapsed [data-pm-partner="1"] .pm-partner__text{display:none}
body.pm-ai-open.pm-partner-collapsed [data-pm-partner="1"]{opacity:.92}
@media(max-width:720px){body.pm-ai-open [data-pm-partner="1"]{display:none!important}}
html[data-projma-enhanced="true"] button,html[data-projma-enhanced="true"] [role="button"]{-webkit-tap-highlight-color:transparent}
@media(max-width:720px){html[data-pm-ai-open="true"] .pm-status{left:12px;right:12px;bottom:12px}}

.pm-movable-surface{isolation:isolate}
.pm-window-drag-handle{position:absolute;z-index:41;inset-block-start:9px;inset-inline-start:50%;translate:-50% 0;width:48px;height:18px;display:grid;place-items:center;touch-action:none;user-select:none;cursor:grab}
.pm-window-drag-handle::after{content:"";display:block;width:32px;height:4px;border-radius:999px;background:rgba(111,132,151,.56);box-shadow:0 1px 0 rgba(255,255,255,.72) inset;transition:width .15s ease,background .15s ease}
.pm-movable-surface:hover>.pm-window-drag-handle::after,.pm-window-drag-handle:focus-visible::after{width:38px;background:rgba(14,155,138,.78)}
.pm-window-drag-handle[data-pm-dragging="true"]{cursor:grabbing}.pm-window-moving{user-select:none!important}
.pm-resizable-surface{min-width:min(300px,calc(100vw - 28px));min-height:180px}
.pm-resize-handle{opacity:.7;transition:opacity .15s ease}.pm-resizable-surface:hover>.pm-resize-handle{opacity:1}
@media(max-width:720px){.pm-window-drag-handle,.pm-resize-handle{display:none!important}.pm-resizable-surface{width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important}}

/* ── 31.8.0: deployment update prompt ─────────────────────────────────────
   Shown when a new ProjMa version has installed and is waiting to activate.
   On phones it clears the bottom application navigation (58px + safe area). */
.pm-update{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:2147483644;
  display:flex;align-items:center;gap:12px;max-width:min(480px,calc(100vw - 24px));
  background:#123047;color:#E8EFF5;border:1px solid rgba(159,232,220,.35);border-radius:12px;
  padding:11px 12px 11px 16px;font:600 12.5px/1.35 Inter,system-ui,sans-serif;
  box-shadow:0 14px 44px rgba(4,16,28,.5)}
.pm-update__go{border:0;border-radius:9px;padding:8px 14px;font:800 12px Inter,system-ui,sans-serif;
  color:#04211C;background:linear-gradient(135deg,#9FE8DC,#0E9B8A);cursor:pointer;white-space:nowrap}
.pm-update__go:disabled{opacity:.7;cursor:default}
.pm-update__later{border:0;background:transparent;color:#93A7BA;font-size:17px;line-height:1;
  cursor:pointer;padding:4px 6px}
@media(max-width:720px){.pm-update{bottom:calc(74px + env(safe-area-inset-bottom,0px));left:12px;right:12px;transform:none;max-width:none}}

/* ── 31.9.0: Become-Partner compact label reveal (§1 requirement 11) ──────
   Hovering or keyboard-focusing the compact CTA reveals its label WITHOUT
   resetting any lifecycle timer — the chip is display-only. */
.pm-partner-label{position:fixed;z-index:801;transform:translateY(-50%);pointer-events:none;
  background:#123047;color:#E8EFF5;border:1px solid rgba(159,232,220,.4);border-radius:9px;
  padding:7px 11px;font:700 11.5px Inter,system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 8px 24px rgba(4,16,28,.45)}
@media(prefers-reduced-motion:no-preference){.pm-partner-label{animation:pmPartnerLabelIn .16s ease}}
@keyframes pmPartnerLabelIn{from{opacity:0}to{opacity:1}}

/* ── 31.10: luminous micro-icons + phone utility-sheet collision guards ── */
@keyframes pmToolFlash{0%{filter:drop-shadow(0 0 0 rgba(159,232,220,0));transform:scale(1)}35%{filter:drop-shadow(0 0 7px rgba(159,232,220,.95));transform:scale(1.16)}70%{filter:drop-shadow(0 0 3px rgba(83,181,255,.78));transform:scale(1.05)}100%{filter:drop-shadow(0 0 0 rgba(159,232,220,0));transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){
  .pm-tool-icon--flash{animation:pmToolFlash .9s ease-out 1 both}
  /* 31.16 §18 — ONE shared luminous pulse for primary tool controls (dock
     pills, AI launcher, compact rail buttons): a short ~350ms halo on hover
     or keyboard focus, settling into the hover state. The global
     prefers-reduced-motion rule collapses the animation, and the static
     border/background hover state carries the affordance instead. */
  @keyframes pmGlowPulse{0%{box-shadow:0 0 0 0 rgba(159,232,220,0)}35%{box-shadow:0 0 14px 2px rgba(159,232,220,.55)}100%{box-shadow:0 0 0 0 rgba(159,232,220,0)}}
  #projma-utility-dock button:hover,#projma-utility-dock button:focus-visible,
  .pm-glowable:hover,.pm-glowable:focus-visible{animation:pmGlowPulse .38s ease-out 1}
  @media (prefers-reduced-motion: reduce){
    #projma-utility-dock button:hover,#projma-utility-dock button:focus-visible,
    .pm-glowable:hover,.pm-glowable:focus-visible{animation:none;box-shadow:0 0 0 1px rgba(159,232,220,.45)}
  }
  #projma-utility-dock button:hover .pm-tool-icon,#projma-utility-dock button:focus-visible .pm-tool-icon{animation:pmToolFlash .75s ease-out 1 both}
}
@media(max-width:380px){.pm-demo-menu,.pm-samples-menu{left:10px!important;right:10px!important;max-width:none!important;min-width:0!important}}

/* ── ProjMa 31.11 — canonical public brand and commercial landing ───────── */

/* Authenticated/demo landing — sharpen hierarchy without touching business logic. */
html[data-pm-workspace-landing="true"] body{background:#082944}
[data-pm-landing-section="1"]{isolation:isolate}
[data-pm-landing-section="1"]::before{content:"";position:absolute;z-index:-1;inset:-35px -22px -40px;border-radius:32px;background:radial-gradient(circle at 70% 10%,rgba(46,124,214,.18),transparent 46%);pointer-events:none}
[data-pm-landing-hero="1"]{filter:drop-shadow(0 10px 26px rgba(1,18,32,.15))}
[data-pm-product-pill="1"]{border-color:rgba(255,255,255,.17)!important;background:rgba(255,255,255,.055)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important}
[data-pm-signed-strip="1"]{background:linear-gradient(90deg,#087fb9,#126293)!important;border-top:1px solid rgba(255,255,255,.08)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
[data-pm-hero-cta]{min-height:52px!important;border-radius:14px!important;box-shadow:0 12px 30px rgba(1,18,32,.13)!important}
.projma-demo-pill[data-pm-demo-safe="1"]{backdrop-filter:blur(10px)}

@media(max-width:720px){
 [data-pm-signed-strip="1"]{padding-right:104px!important;min-height:72px!important}
 [data-pm-duplicate-workspace-cta="1"]{display:none!important}
 .projma-demo-pill[data-pm-demo-safe="1"]{font-size:10px!important;padding:5px 9px!important;letter-spacing:.06em!important}
}

/* 31.18.2 — mobile: nothing inside the workspace may exceed the viewport.
   Evidence: on a phone a wider-than-viewport ancestor left a solid blue
   column down the right side of /demo. `overflow-x: clip` bounds the app
   root WITHOUT creating a scroll container (so sticky headers and the
   island's own horizontally-scrolling strips keep working). */
#root { max-width: 100vw; overflow-x: clip; }
@supports not (overflow-x: clip) { #root { max-width: 100vw; overflow-x: hidden; } }
/* 32.6.0 — compact canonical work-item create/edit flow at 320 CSS px. */
@media (max-width: 420px) {
  .print-modal[data-projma-work-item-editor="true"] > div { width: 100% !important; max-width: 96vw !important; }
  .print-modal[data-projma-work-item-editor="true"] .modal-body { padding: 14px 12px !important; overflow-x: hidden !important; }
  .print-modal[data-projma-work-item-editor="true"] .modal-body > div,
  .print-modal[data-projma-work-item-editor="true"] .modal-body [style*="display: flex"] { max-width: 100% !important; flex-wrap: wrap !important; }
  .print-modal[data-projma-work-item-editor="true"] input,
  .print-modal[data-projma-work-item-editor="true"] select,
  .print-modal[data-projma-work-item-editor="true"] textarea,
  .print-modal[data-projma-work-item-editor="true"] button { min-height: 44px; max-width: 100%; }
}


/* ── 32.8.0: universal, elegant dismissal for transient surfaces ──────────
   Dialogs/windows receive a quiet top-end × when they lack Close/Cancel.
   Compact menus receive a full-width Cancel row instead, so no item is
   obscured. Both retain a 44px phone target and logical properties for RTL. */
.pm-surface-dismiss{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:80;display:grid;place-items:center;width:40px;height:40px;box-sizing:border-box;padding:0;border:1px solid var(--pm-line,#DCE6ED);border-radius:999px;background:rgba(248,251,253,.94);color:var(--pm-ink,#10263A);box-shadow:0 8px 24px rgba(2,15,25,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;touch-action:manipulation;font:700 20px/1 Inter,system-ui,sans-serif;transition:transform .14s var(--pm-ease,ease),background .16s var(--pm-ease,ease),border-color .16s var(--pm-ease,ease),box-shadow .16s var(--pm-ease,ease)}
.pm-surface-dismiss:hover{transform:translateY(-1px);background:#fff;border-color:#BFD2DE;box-shadow:0 11px 28px rgba(2,15,25,.18)}
.pm-surface-dismiss:active{transform:translateY(0) scale(.96)}
.pm-surface-dismiss:focus-visible{outline:var(--pm-focus,2px solid #0E9B8A)!important;outline-offset:3px!important}
.pm-surface-cancel{display:flex;align-items:center;justify-content:center;width:calc(100% - 12px);min-height:44px;box-sizing:border-box;margin:6px;padding:8px 12px;border:1px solid var(--pm-line,#DCE6ED);border-radius:10px;background:rgba(248,251,253,.74);color:var(--pm-ink,#10263A);cursor:pointer;touch-action:manipulation;font:700 11px/1.2 Inter,system-ui,sans-serif}
.pm-surface-cancel:hover,.pm-surface-cancel:focus-visible{background:#fff;border-color:#BFD2DE}
.pm-command__head{padding-inline-end:64px}
.pm-command__close{inset-block-start:12px;inset-inline-end:12px}
@media(max-width:620px){.pm-surface-dismiss{width:44px;height:44px;inset-block-start:8px;inset-inline-end:8px}.pm-command__head{padding-inline-end:62px}}
@media(prefers-reduced-motion:reduce){.pm-surface-dismiss,.pm-surface-cancel{transition:none!important}}