/* ProjMa 32.8.0 — Calm Surface
   ═══════════════════════════════════════════════════════════════════════════
   One design language for the whole product, taken from the surface people
   already liked best: the Workspace Hub. Navy for the shell, teal for
   delivery, a single quiet grey ramp, generous radii, hairline borders, and
   shadows that sit rather than shout. Inter carries voice; DM Mono carries
   structure — labels, keys, keyboard hints and data.

   Contract for this file: it never uses !important to set a colour. Colour is
   owned by the palette that the modules and the application bundle emit
   inline (see scripts/apply-calm-palette.mjs). What this layer standardises is
   geometry, rhythm, focus and motion — so that screens painted by different
   modules read as one calm surface instead of a dozen dialects.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* Shell — deep, matte, low-chroma navy. */
  --pm-shell:#0C2438; --pm-shell-deep:#071520; --pm-panel:#123047;
  --pm-field:#091D2E; --pm-card:#143653;

  /* Delivery accent — ProjMa teal, unchanged identity. */
  --pm-teal:#23D4BE; --pm-teal-deep:#0E9B8A; --pm-teal-ink:#04211C; --pm-teal-soft:#9FE8DC;

  /* Daylight blue — calmed from electric to considered. */
  --pm-blue:#3D7CB6; --pm-blue-deep:#1E4F6E;

  /* Ink ramp on the shell. */
  --pm-text:#E8EFF5; --pm-mut:#93A7BA; --pm-dim:#6B7F92;

  /* Paper ramp — cards, overlays, the Hub, anything printed. */
  --pm-paper:#F8FBFD; --pm-paper-2:#F1F7FA; --pm-ink:#10263A; --pm-ink-mut:#73899A;
  --pm-line:#DCE6ED; --pm-line-soft:#E6ECF1; --pm-line-dark:rgba(190,214,232,.14);

  /* Semantics — hue preserved, chroma pulled back. */
  --pm-ok:#0F8A6A; --pm-warn:#C0842E; --pm-risk:#C4514C; --pm-note:#6A63B8;

  /* Geometry and motion. */
  --pm-r-xs:8px; --pm-r-sm:11px; --pm-r-md:14px; --pm-r-lg:18px; --pm-r-xl:22px;
  --pm-ring:0 0 0 3px rgba(35,212,190,.26);
  --pm-lift-1:0 1px 2px rgba(6,20,32,.06),0 6px 18px rgba(6,20,32,.05);
  --pm-lift-2:0 10px 30px rgba(6,20,32,.10);
  --pm-lift-3:0 38px 110px rgba(2,15,25,.44);
  --pm-ease:cubic-bezier(.2,.8,.2,1);
  --pm-font:Inter,system-ui,sans-serif;
  --pm-mono:'DM Mono',ui-monospace,monospace;

  /* One calm focus ring for the entire product. product.css consumes this
     variable, so redefining it here retunes every focusable control at once. */
  --pm-focus:2px solid #0E9B8A;
  --pm-radius:var(--pm-r-md);
  --pm-shadow:var(--pm-lift-2);
}

/* Keep Android/WebView font autosizing from changing the vertical rhythm after
   the responsive layout has already selected its phone geometry. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ── voice ──────────────────────────────────────────────────────────────── */
h1,h2,h3{letter-spacing:-.025em;text-wrap:balance}
h4,h5,h6{letter-spacing:-.012em}
/* Data must line up. Anything set in the mono face is data or a label. */
code,kbd,samp,[style*="DM Mono"],[style*="dm mono"]{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

/* ── selection and focus ────────────────────────────────────────────────── */
::selection{background:rgba(35,212,190,.24)}
:focus-visible{outline-offset:3px}

/* ── quiet scrollbars everywhere ────────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:rgba(130,152,172,.34) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(130,152,172,.30);border-radius:99px;border:2.5px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(130,152,172,.52);border:2.5px solid transparent;background-clip:content-box}

/* ── controls: a shared default, never a forced one ─────────────────────── */
/* No !important — an application screen that has an opinion still wins; every
   control that never had one now inherits the same calm geometry. */
button,[role="button"]{border-radius:var(--pm-r-sm);transition:background .16s var(--pm-ease),border-color .16s var(--pm-ease),box-shadow .18s var(--pm-ease),color .16s var(--pm-ease),transform .12s var(--pm-ease)}
input,select,textarea{border-radius:var(--pm-r-sm);transition:border-color .16s var(--pm-ease),box-shadow .18s var(--pm-ease),background .16s var(--pm-ease)}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:var(--pm-ring)}
hr{border:0;border-top:1px solid var(--pm-line-dark)}

/* ── overlays and dialogs: one card language ────────────────────────────── */
/* Geometry only. The colour of these panels is emitted by the module that owns
   them and has already been harmonised by the palette pass. */
.print-modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.print-modal>div{border-radius:var(--pm-r-lg)!important;box-shadow:var(--pm-lift-3)!important}
.print-modal .modal-body{scrollbar-gutter:stable}
.pm-status,.pm-update,.pm-partner-label{border-radius:var(--pm-r-md);box-shadow:var(--pm-lift-2)}
.pm-skip{border-radius:var(--pm-r-sm);box-shadow:var(--pm-lift-2);font:700 13px/1 var(--pm-font)}

/* ── the public landing shares the same air ─────────────────────────────── */
.pm-marketing-root{--pm-paper:#F7FAFC;--pm-line:rgba(14,34,51,.09)}
.pm-marketing-root .pm-cta{border-radius:var(--pm-r-sm)}
.pm-marketing-root .pm-label{letter-spacing:.16em}

/* ── auth touch targets (#370) ──────────────────────────────────────────── */
/* Auth controls are composed with inline geometry in auth.js. Keep the
   visual treatment intact while enforcing the WCAG 2.2 standalone-control
   hit area at the final cascade layer. The structural selectors are scoped to
   the auth tab panel so inline legal links remain covered by the WCAG inline
   exception rather than being expanded into oversized prose rows. */
.pm-authbody form > button[type="submit"]{min-height:44px!important}
.pm-authbody form input + button{
  min-width:44px!important;min-height:44px!important;padding:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important
}
.pm-authbody form + div > a{
  min-height:44px!important;display:inline-flex!important;align-items:center!important
}
.pm-authfoot__demo{
  min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important
}

/* ── motion: present, but never demanding ───────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── phones: nothing may crowd the safe area ────────────────────────────── */
@media(max-width:620px){
  :root{
    --pm-r-lg:16px;--pm-r-xl:20px;
    --pm-phone-edge:13px;--pm-phone-gap:12px;--pm-phone-panel-pad:12px;
  }
  .print-modal>div{border-radius:var(--pm-r-lg)!important}

  /* One compact phone rhythm for every public entry surface. Standalone
     controls remain at least 44px; density comes from removing duplicated
     container padding, oversized cards and desktop section gaps. */
  .pm-early-root{min-height:100dvh!important}
  .pm-early-wrap{width:min(calc(100% - var(--pm-phone-edge) - var(--pm-phone-edge)),1160px)!important}
  .pm-early-navin{min-height:56px!important;gap:8px!important}
  .pm-early-actions{gap:4px!important;flex-wrap:nowrap!important}
  .pm-early-btn{min-height:44px!important;padding-inline:10px!important}
  .pm-early-hero{padding-block:24px 32px!important}
  .pm-early-section{padding-block:36px!important}

  .pm-network-hero{padding-block:12px 28px!important}
  .pm-network-hero-layout{gap:14px!important}
  .pm-network-first-stage,.pm-network-first-actions{gap:8px!important}
  .pm-network-first-intro .pm-early-title{margin:0!important}
  .pm-network-first-intro .pm-early-lead{margin-top:7px!important}
  .pm-network-primary-direction{
    min-height:60px!important;padding:10px 12px!important;gap:8px!important;
    flex-direction:row!important;align-items:center!important;
  }
  .pm-network-primary-direction__go{align-self:auto!important;margin-inline-start:auto!important}
  .pm-network-auth-entry{padding:10px!important}
  .pm-network-auth-intro{margin-top:3px!important}
  .pm-network-reference-palette .pm-network-auth-panel{margin-top:8px!important;padding:10px!important}
  .pm-network-auth-intents{margin-bottom:8px!important}
  .pm-network-auth-divider{margin-block:8px!important}
  .pm-network-auth-form{gap:7px!important}
  .pm-network-auth-field{gap:4px!important}
  .pm-network-auth-status{min-height:0!important;margin-top:5px!important}
  .pm-network-professional{margin-top:8px!important;padding-top:8px!important}

  .pm-welcome-main{gap:14px!important;padding-block:8px 28px!important}
  .pm-welcome-platform-entry{min-height:60px!important;padding:8px 12px!important}
  .pm-welcome-door{min-height:60px!important;padding:9px 12px!important}
  .pm-welcome-actions{margin-top:14px!important}
  .pm-welcome-door-grid{margin-top:12px!important;gap:8px!important}
  .pm-auth-facade{padding-block:12px 24px!important}
  .pm-auth-facade .pm-authpanel,
  .pm-provider-onboarding__card,
  .pm-welcome-inline-auth>.pm-authpanel{padding:14px 13px!important}

  .pm-marketing-root .pm-nav__inner{min-height:56px!important}
  .pm-marketing-root .pm-hero{padding-block:32px 48px!important}
  .pm-marketing-root .pm-hero__cta{margin-top:20px!important}
}

/* Short phone viewports need the same hierarchy with less empty air. Content
   is never hidden or scaled, and the 44px interaction floor stays unchanged. */
@media(max-width:620px) and (max-height:760px){
  .pm-early-hero{padding-block:16px 24px!important}
  .pm-network-hero{padding-block:10px 22px!important}
  .pm-early-section{padding-block:32px!important}
  .pm-welcome-main{padding-block:6px 20px!important}
  .pm-auth-facade{padding-block:10px 20px!important}
  .pm-marketing-root .pm-hero{padding-block:26px 40px!important}
}