/* ============================================================================
   AlliedTech client portal — "commissioning panel"
   ----------------------------------------------------------------------------
   The portal's job is to walk a business owner through four gates — documents,
   agreement, downpayment, switch-on — without making them feel audited. So it
   borrows AlliedTech's own world: a commissioning readout on an instrument
   panel. Deep navy band, hairline rules, IBM Plex Mono for anything that is a
   reading (station labels, references, amounts, dates).

   The signature is ONE element: the gauge — a measured rail with tick marks and
   four station markers, the live one ringed in signal teal. Everything else
   stays quiet so the gauge is what the client remembers.

   Namespaced .pf-* so nothing leaks into the rest of the site.
   ========================================================================== */

:root {
  --pf-ink:      #0B1F3A;
  --pf-ink-deep: #071528;
  --pf-blue:     #1B66D6;
  --pf-signal:   #57D9BC;
  --pf-paper:    #F3F6FB;
  --pf-card:     #FFFFFF;
  --pf-rule:     #E4EAF2;
  --pf-slate:    #5C6C85;
  --pf-mute:     #93A1B8;
  --pf-amber:    #C5761F;
  --pf-amber-bg: #FFF8EC;
  --pf-green:    #0E9F6E;
  --pf-green-bg: #EDFBF5;
  --pf-red:      #C0392B;
  --pf-red-bg:   #FDF1EF;
  --pf-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pf-display: 'Archivo', system-ui, sans-serif;
}

.pf { font-family: 'Inter', system-ui, sans-serif; color: var(--pf-slate); }
.pf-wrap { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---- readings: anything the client could quote back to us on the phone ---- */
.pf-read {
  font-family: var(--pf-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ---- the status band ------------------------------------------------------ */
.pf-band {
  position: relative; overflow: hidden;
  background: var(--pf-ink-deep);
  border-radius: 18px; padding: 2rem 2.1rem 1.6rem; color: #fff;
  box-shadow: 0 24px 50px -30px rgba(7, 21, 40, .85);
}
/* blueprint grid — the only decoration, and it earns its place: this is a
   commissioning sheet, and commissioning sheets are drawn on grid paper. */
.pf-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(87, 217, 188, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 217, 188, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 82% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 82% 0%, #000 0%, transparent 72%);
}
.pf-band > * { position: relative; }
.pf-band-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.pf-band-top .pf-read { color: rgba(127, 216, 198, .82); }
.pf-band h1 {
  font-family: var(--pf-display); font-weight: 800; color: #fff;
  font-size: clamp(1.6rem, 4.4vw, 2.3rem); line-height: 1.12;
  letter-spacing: -.02em; margin: .5rem 0 .35rem;
}
.pf-band .pf-line { color: #B9C9E0; font-size: .95rem; max-width: 34rem; margin: 0; }
.pf-band .pf-line b { color: var(--pf-signal); font-weight: 600; }

/* ---- the gauge (signature) ------------------------------------------------ */
.pf-gauge { margin-top: 1.9rem; }
.pf-ticks {
  height: 9px; margin-bottom: .55rem; opacity: .34;
  background-image: repeating-linear-gradient(90deg, #7FD8C6 0 1px, transparent 1px 12px);
  background-size: 12px 100%;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pf-rail { position: relative; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); }
.pf-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--pf-blue), var(--pf-signal));
  transform-origin: left center; transform: scaleX(0);
  animation: pf-fill .72s cubic-bezier(.22,.8,.3,1) .14s forwards;
}
@keyframes pf-fill { to { transform: scaleX(1); } }

.pf-stations { display: flex; justify-content: space-between; margin-top: -7px; }
.pf-station { display: flex; flex-direction: column; align-items: center; gap: .55rem; flex: 1; text-align: center; }
.pf-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--pf-ink-deep); border: 2px solid rgba(255,255,255,.3);
  transform-origin: center; animation: pf-pop .22s cubic-bezier(.22,.8,.3,1) both;
}
.pf-station:nth-child(1) .pf-dot { animation-delay: .20s }
.pf-station:nth-child(2) .pf-dot { animation-delay: .28s }
.pf-station:nth-child(3) .pf-dot { animation-delay: .36s }
.pf-station:nth-child(4) .pf-dot { animation-delay: .44s }
@keyframes pf-pop { from { transform: scale(.2); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.pf-station.is-done .pf-dot { background: var(--pf-signal); border-color: var(--pf-signal); }
.pf-station.is-live .pf-dot {
  background: #fff; border-color: var(--pf-signal);
  box-shadow: 0 0 0 4px rgba(87, 217, 188, .22);
}
.pf-station .pf-read { font-size: .58rem; letter-spacing: .1em; color: rgba(185, 201, 224, .62); }
.pf-station.is-done .pf-read,
.pf-station.is-live .pf-read { color: #fff; }

/* ---- gate cards ----------------------------------------------------------- */
.pf-gate {
  background: var(--pf-card); border: 1px solid var(--pf-rule); border-radius: 14px;
  padding: 1.6rem 1.7rem; margin-top: 1rem;
  transition: transform .16s ease-out, box-shadow .16s ease-out, border-color .16s ease-out;
}
.pf-gate:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -24px rgba(11, 31, 58, .42); border-color: #D3DEEC; }
.pf-gate.is-locked { background: #FAFBFD; }
.pf-gate.is-locked:hover { transform: none; box-shadow: none; border-color: var(--pf-rule); }
.pf-gate.is-live { border-color: rgba(27, 102, 214, .42); box-shadow: 0 0 0 3px rgba(27, 102, 214, .07); }

.pf-gate-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pf-gate-head .pf-read { color: var(--pf-mute); }
.pf-gate h2 {
  font-family: var(--pf-display); font-weight: 700; color: var(--pf-ink);
  font-size: 1.12rem; letter-spacing: -.01em; margin: .3rem 0 .35rem;
}
.pf-gate p { margin: 0; font-size: .9rem; line-height: 1.6; }
.pf-gate p + p { margin-top: .55rem; }

/* ---- chips ---------------------------------------------------------------- */
.pf-chip {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-family: var(--pf-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px; border: 1px solid transparent;
}
.pf-chip-ok   { background: var(--pf-green-bg); color: var(--pf-green); border-color: #BBEFDA; }
.pf-chip-wait { background: var(--pf-amber-bg); color: var(--pf-amber); border-color: #F5DFBC; }
.pf-chip-no   { background: var(--pf-red-bg);   color: var(--pf-red);   border-color: #F4CFC9; }
.pf-chip-lock { background: #EEF2F8; color: var(--pf-mute); border-color: #DEE5EF; }
.pf-chip-live { background: rgba(27,102,214,.08); color: var(--pf-blue); border-color: rgba(27,102,214,.22); }

/* ---- document lines ------------------------------------------------------- */
/* Every cell is placed explicitly. Auto-placement put the action column before the label,
   so the upload buttons landed to the LEFT of the document they belonged to. */
.pf-doc {
  display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .2rem 1rem;
  align-items: center; padding: 1rem 0; border-top: 1px solid #EFF3F8;
}
.pf-doc:first-of-type { border-top: 0; }
.pf-doc-mark {
  grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: .15rem;
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: #F1F5FA; color: var(--pf-mute); border: 1px solid var(--pf-rule);
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.pf-doc.is-in  .pf-doc-mark { background: var(--pf-green-bg); color: var(--pf-green); border-color: #BBEFDA; }
.pf-doc.is-bad .pf-doc-mark { background: var(--pf-red-bg);   color: var(--pf-red);   border-color: #F4CFC9; }
/* grid items default to min-width:auto, so a wide file input pushes the 1fr column past the
   viewport on a phone. Every cell opts out. */
.pf-doc-name, .pf-doc-hint, .pf-doc-have, .pf-doc-act { min-width: 0; }
.pf-doc-act form { flex-wrap: wrap; min-width: 0; }
.pf-doc-name { grid-column: 2; grid-row: 1; color: var(--pf-ink); font-weight: 600; font-size: .9rem; }
.pf-doc-name .pf-req { color: var(--pf-blue); font-weight: 500; }
.pf-doc-hint { grid-column: 2; grid-row: 2; font-size: .78rem; line-height: 1.5; color: var(--pf-slate); }
.pf-doc-have { grid-column: 2; grid-row: 3; font-size: .74rem; margin-top: .3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pf-doc-have a { color: var(--pf-blue); text-decoration: none; }
.pf-doc-have a:hover { text-decoration: underline; }
.pf-doc-act { grid-column: 3; grid-row: 1 / span 3; align-self: center; display: flex; align-items: center; gap: .5rem; }
.pf-file { font-size: .74rem; max-width: 9.5rem; color: var(--pf-slate); }
.pf-file::file-selector-button {
  font: inherit; font-size: .72rem; font-weight: 600; margin-right: .5rem;
  padding: .35rem .7rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--pf-rule); background: #F7F9FC; color: var(--pf-ink);
  transition: background-color .16s ease-out, border-color .16s ease-out;
}
.pf-file::file-selector-button:hover { background: #EDF2F9; border-color: #D3DEEC; }

@media (max-width: 640px) {
  .pf-doc { grid-template-columns: 1.6rem 1fr; }
  .pf-doc-mark { grid-row: 1 / span 4; }
  .pf-doc-act { grid-column: 2; grid-row: 4; justify-content: flex-start; margin-top: .55rem; width: 100%; }
  .pf-doc-act form { width: 100%; }
  .pf-file { max-width: 100%; width: 100%; flex: 1 1 8rem; }
}

/* ---- buttons -------------------------------------------------------------- */
.pf-btn {
  font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
  padding: .62rem 1.2rem; border-radius: 9px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  transition: transform .16s ease-out, box-shadow .16s ease-out, background-color .16s ease-out;
}
.pf-btn-p { background: var(--pf-blue); color: #fff; box-shadow: 0 10px 22px -12px rgba(27,102,214,.85); }
.pf-btn-p:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(27,102,214,.95); }
.pf-btn-o { background: #fff; color: var(--pf-ink); border-color: var(--pf-rule); }
.pf-btn-o:hover { background: #F7F9FC; border-color: #D3DEEC; transform: translateY(-1px); }
.pf-btn-g { background: var(--pf-signal); color: #06342B; box-shadow: 0 10px 22px -12px rgba(87,217,188,.9); }
.pf-btn-g:hover { transform: translateY(-1px); }
.pf-btn-lg { padding: .82rem 1.5rem; font-size: .92rem; }
.pf:focus-visible, .pf a:focus-visible, .pf button:focus-visible, .pf input:focus-visible, .pf select:focus-visible {
  outline: 2px solid var(--pf-blue); outline-offset: 2px; border-radius: 6px;
}

/* ---- the amount plate ----------------------------------------------------- */
/* Text inputs — the portal had buttons but no field style until the client was given
   details of their own to correct (name/company before signing). */
.pf-inp {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit;
  font-size: .92rem;
  color: var(--pf-ink);
  background: #fff;
  border: 1px solid var(--pf-rule);
  border-radius: 10px;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.pf-inp::placeholder { color: var(--pf-mute); }
.pf-inp:hover { border-color: #CBD6E6; }
.pf-inp:focus {
  outline: none;
  border-color: var(--pf-blue);
  box-shadow: 0 0 0 3px rgba(27,102,214,.14);
}
.pf-inp:disabled { background: #F7F9FC; color: var(--pf-mute); }

.pf-plate {
  margin-top: 1.2rem; border-radius: 12px; padding: 1.3rem 1.5rem;
  background: var(--pf-ink); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem;
}
.pf-plate .pf-read { color: rgba(127,216,198,.8); }
.pf-plate .pf-amt {
  font-family: var(--pf-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 5vw, 2.15rem); margin-top: .15rem; color: inherit;
}
.pf-plate .pf-sub { color: #9FB3CE; font-size: .78rem; margin-top: .2rem; }

/* ---- notes ---------------------------------------------------------------- */
.pf-note { border-radius: 11px; padding: .9rem 1.1rem; font-size: .85rem; line-height: 1.6; }
.pf-note-ok   { background: var(--pf-green-bg); border: 1px solid #BBEFDA; color: #056B4A; }
.pf-note-err  { background: var(--pf-red-bg);   border: 1px solid #F4CFC9; color: #922C20; }
.pf-note-info { background: #F0F5FC; border: 1px solid #D5E3F7; color: #1B3F6E; }
.pf-note-warn { background: var(--pf-amber-bg); border: 1px solid #F5DFBC; color: #8A5314; }

/* ---- switchboard: the product tabs when a client owns more than one -------- */
.pf-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.pf-tab {
  font-family: var(--pf-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--pf-rule); background: #fff; color: var(--pf-slate);
  transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out;
}
.pf-tab:hover { border-color: #C6D5E8; }
.pf-tab.is-on { background: var(--pf-ink); border-color: var(--pf-ink); color: #fff; }

/* ---- entrance: quiet, and only once --------------------------------------- */
.pf-in { animation: pf-rise .3s ease-out both; }
.pf-in-1 { animation-delay: .04s } .pf-in-2 { animation-delay: .10s }
.pf-in-3 { animation-delay: .16s } .pf-in-4 { animation-delay: .22s }
@keyframes pf-rise { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } }

/* Four station labels have to share a phone's width without colliding. */
@media (max-width: 560px) {
  .pf-band { padding: 1.6rem 1.3rem 1.4rem; border-radius: 15px; }
  .pf-station .pf-read { font-size: .5rem; letter-spacing: .04em; }
  .pf-stations { gap: .2rem; }
  .pf-gate { padding: 1.3rem 1.25rem; }
  .pf-plate { padding: 1.1rem 1.2rem; }
}
@media (max-width: 380px) {
  .pf-station .pf-read { font-size: .46rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pf *, .pf *::before, .pf *::after { animation: none !important; transition: none !important; }
  .pf-fill { transform: scaleX(1) !important; }
  .pf-dot { opacity: 1 !important; transform: none !important; }
  .pf-in { opacity: 1 !important; transform: none !important; }
}

/* ---- milestone celebration ----------------------------------------------------------------
   Fired on the three moments worth celebrating: documents complete, agreement signed, payment
   received. The canvas is decorative and inert; the panel carries the actual message. */
.at-celebrate-canvas {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  transition: opacity .4s ease-out;
}
.at-celebrate-panel {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  padding: 1.25rem; background: rgba(7, 21, 40, .55);
  opacity: 0; transition: opacity .24s ease-out;
}
.at-celebrate-panel.is-in { opacity: 1; }
.at-celebrate-panel.is-out { opacity: 0; }
.at-celebrate-card {
  background: #fff; border-radius: 18px; padding: 2.1rem 2.2rem 1.7rem; text-align: center;
  max-width: 24rem; width: 100%; box-shadow: 0 30px 70px -28px rgba(7, 21, 40, .7);
  transform: translateY(12px) scale(.97); transition: transform .26s cubic-bezier(.22,.8,.3,1);
}
.at-celebrate-panel.is-in .at-celebrate-card { transform: none; }
.at-celebrate-tick {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #0E9F6E, #57D9BC);
  box-shadow: 0 0 0 8px rgba(87, 217, 188, .16);
}
.at-celebrate-tick svg { width: 1.8rem; height: 1.8rem; }
.at-celebrate-title {
  font-family: var(--pf-display, 'Archivo', system-ui, sans-serif);
  font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; color: #0B1F3A; margin-bottom: .35rem;
}
.at-celebrate-line { color: #5C6C85; font-size: .93rem; line-height: 1.55; }
.at-celebrate-close {
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; margin-top: 1.4rem;
  padding: .7rem 1.6rem; border-radius: 10px; border: 0; background: #1B66D6; color: #fff;
  transition: transform .16s ease-out, background-color .16s ease-out;
}
.at-celebrate-close:hover { transform: translateY(-1px); background: #1557B8; }
.at-celebrate-close:focus-visible { outline: 2px solid #0B1F3A; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .at-celebrate-panel, .at-celebrate-card, .at-celebrate-close { transition: none !important; }
  .at-celebrate-card { transform: none !important; }
}

/* the in-between moment: a toast, not a modal */
.at-toast {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 9999; max-width: 20rem;
  display: flex; gap: .8rem; align-items: flex-start; flex-wrap: wrap;
  background: #0B1F3A; color: #fff; border-radius: 14px; padding: .95rem 1.1rem;
  box-shadow: 0 22px 50px -22px rgba(7, 21, 40, .8);
  opacity: 0; transform: translateY(14px);
  transition: opacity .26s ease-out, transform .26s ease-out;
}
.at-toast.is-in { opacity: 1; transform: none; }
.at-toast-ring {
  width: 1.9rem; height: 1.9rem; border-radius: 999px; flex: none; display: grid; place-items: center;
  background: rgba(87, 217, 188, .18);
}
.at-toast-ring span { width: .65rem; height: .65rem; border-radius: 999px; background: #57D9BC; display: block; }
.at-toast-title { font-weight: 700; font-size: .92rem; letter-spacing: -.01em; }
.at-toast-line { color: #B9C9E0; font-size: .82rem; line-height: 1.5; margin-top: .1rem; }
.at-toast-bar { width: 100%; height: 4px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; margin-top: .2rem; }
.at-toast-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1B66D6, #57D9BC); width: 0; transition: width .5s cubic-bezier(.22,.8,.3,1); }
@media (max-width: 480px) { .at-toast { left: 1.1rem; right: 1.1rem; max-width: none; } }
@media (prefers-reduced-motion: reduce) {
  .at-toast { transition: none !important; opacity: 1; transform: none; }
  .at-toast-bar i { transition: none !important; }
}

/* checklist progress, in the documents gate */
.pf-docbar { height: 6px; border-radius: 4px; background: #EEF2F8; overflow: hidden; margin: .1rem 0 1rem; }
.pf-docbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pf-blue), var(--pf-signal)); transition: width .55s cubic-bezier(.22,.8,.3,1); }
@media (prefers-reduced-motion: reduce) { .pf-docbar i { transition: none !important; } }