/* GSUK customer portal — Cinematic Studio theme.
   Built on the variable scaffold defined in sandbox.css (--ink, --panel, --accent,
   --fg, --line, --f-display, --f-text, --r, --ease ...). Static layout only — no
   scroll-reveal, so it renders identically with reduced motion. */

.portal-body{
  background:var(--ink);
  color:var(--fg);
  font-family:var(--f-text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.pwrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:var(--pad);}

/* ── Top nav ─────────────────────────────────────────────── */
.pn{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.pn__inner{
  max-width:1140px;margin-inline:auto;padding:.7rem var(--pad);
  display:flex;align-items:center;gap:1.5rem;
}
.pn__logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:none;}
.pn__logo img{display:block;}
.pn__logo-tag{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);border:1px solid var(--line);border-radius:100px;padding:.2em .6em;
}
.pn__nav{display:flex;align-items:center;gap:.35rem;margin-right:auto;}
.pn__nav a{
  color:var(--fg-dim);text-decoration:none;font-weight:500;font-size:.95rem;
  padding:.5em .85em;border-radius:100px;transition:color .2s var(--ease),background .2s var(--ease);
}
.pn__nav a:hover{color:var(--fg);background:rgba(255,255,255,.05);}
.pn__nav a.is-active{color:var(--fg);background:var(--accent-soft);}
.pn__right{display:flex;align-items:center;gap:.6rem;margin-left:auto;}

.pn__user{position:relative;display:flex;align-items:center;gap:.55rem;cursor:pointer;
  padding:.35em .6em;border-radius:100px;border:1px solid transparent;outline:none;}
.pn__user:hover,.pn__user:focus-visible{border-color:var(--line);background:rgba(255,255,255,.03);}
.pn__avatar{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:.85rem;color:#0A0A12;
  background:var(--grad);
}
.pn__uname{font-size:.9rem;color:var(--fg);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pn__chev{color:var(--fg-faint);font-size:.7rem;}
.pn__menu{
  position:absolute;top:calc(100% + .5rem);right:0;min-width:200px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  padding:.4rem;box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.pn__user.is-open .pn__menu{opacity:1;visibility:visible;transform:none;}
.pn__menu a,.pn__menu button{
  display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  color:var(--fg-dim);text-decoration:none;font-family:var(--f-text);font-size:.9rem;
  padding:.6em .75em;border-radius:9px;transition:background .15s,color .15s;
}
.pn__menu a:hover,.pn__menu button:hover{background:rgba(255,255,255,.05);color:var(--fg);}
.pn__menu form{margin:0;border-top:1px solid var(--line);margin-top:.3rem;padding-top:.3rem;}
.pn__menu button{color:var(--pink);}

.pn__burger{display:none;flex-direction:column;gap:5px;width:40px;height:36px;
  align-items:center;justify-content:center;background:none;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;}
.pn__burger span{width:18px;height:2px;background:var(--fg);border-radius:2px;transition:transform .2s var(--ease);}

.pn-drawer{
  position:fixed;inset:0 0 0 auto;width:min(82vw,320px);z-index:60;
  background:var(--panel);border-left:1px solid var(--line);
  padding:5rem 1.4rem 2rem;display:flex;flex-direction:column;gap:.3rem;
  transform:translateX(100%);transition:transform .3s var(--ease);
}
.pn-drawer.is-open{transform:none;}
.pn-drawer a{color:var(--fg);text-decoration:none;font-size:1.05rem;padding:.7em .4em;border-radius:10px;}
.pn-drawer a:hover{background:rgba(255,255,255,.05);}
.pn-drawer form{margin-top:1rem;}

/* ── Main / page header ──────────────────────────────────── */
.pmain{flex:1;padding-block:2.4rem 4rem;}
.phead{margin-bottom:2rem;}
.phead__eyebrow{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem;
}
.phead h1{font-family:var(--f-display);font-weight:600;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.04;letter-spacing:-.01em;}
.phead p{color:var(--fg-dim);margin-top:.6rem;max-width:60ch;line-height:1.55;}
.pback{display:inline-flex;align-items:center;gap:.4rem;color:var(--fg-dim);text-decoration:none;font-size:.9rem;margin-bottom:1rem;}
.pback:hover{color:var(--fg);}

.psection{margin-top:2.6rem;}
.psection__title{font-family:var(--f-display);font-weight:600;font-size:1.3rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;}

/* ── Cards / grids ───────────────────────────────────────── */
.pgrid{display:grid;gap:1.1rem;}
.pgrid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.pgrid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.pgrid--4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

.pcard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem;transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.pcard--link{text-decoration:none;color:inherit;display:block;}
.pcard--link:hover{border-color:rgba(255,255,255,.28);transform:translateY(-2px);}
.pcard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.5rem;}
.pcard__title{font-family:var(--f-display);font-weight:600;font-size:1.1rem;}
.pcard__meta{color:var(--fg-dim);font-size:.88rem;line-height:1.5;}
.pcard__icon{font-size:1.5rem;margin-bottom:.6rem;display:block;}

/* stat tiles */
.pstat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;}
.pstat__k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);}
.pstat__v{font-family:var(--f-display);font-weight:600;font-size:1.9rem;margin-top:.35rem;line-height:1;}
.pstat__sub{color:var(--fg-dim);font-size:.84rem;margin-top:.4rem;}

/* ── Status pills ────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-mono);font-size:.7rem;
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:.32em .7em;border-radius:100px;border:1px solid transparent;white-space:nowrap;}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill--success{color:#5ee0a6;background:rgba(94,224,166,.12);border-color:rgba(94,224,166,.25);}
.pill--info{color:var(--accent);background:var(--accent-soft);border-color:rgba(169,139,255,.3);}
.pill--warn{color:#ffc56b;background:rgba(255,197,107,.12);border-color:rgba(255,197,107,.28);}
.pill--danger{color:#ff8a9b;background:rgba(255,138,155,.12);border-color:rgba(255,138,155,.28);}
.pill--neutral{color:var(--fg-dim);background:rgba(255,255,255,.05);border-color:var(--line);}

/* ── Tables ──────────────────────────────────────────────── */
.ptable-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);}
.ptable{width:100%;border-collapse:collapse;font-size:.92rem;}
.ptable th{
  text-align:left;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:500;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
}
.ptable td{padding:.95rem 1.1rem;border-bottom:1px solid var(--line-2);color:var(--fg);vertical-align:middle;}
.ptable tr:last-child td{border-bottom:none;}
.ptable tr.is-row-link{cursor:pointer;transition:background .15s;}
.ptable tr.is-row-link:hover{background:rgba(255,255,255,.03);}
.ptable a{color:var(--accent);text-decoration:none;}
.ptable a:hover{text-decoration:underline;}
.ptable__muted{color:var(--fg-dim);}

/* ── Forms ───────────────────────────────────────────────── */
.pform{display:flex;flex-direction:column;gap:1.1rem;}
.pfield{display:flex;flex-direction:column;gap:.4rem;}
.pfield > label{font-size:.85rem;font-weight:500;color:var(--fg-dim);}
.pfield .hint{font-size:.78rem;color:var(--fg-faint);}
.pinput,.pselect,.ptextarea{
  width:100%;font-family:var(--f-text);font-size:.95rem;color:var(--fg);
  background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:.8em .9em;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.pinput::placeholder,.ptextarea::placeholder{color:var(--fg-faint);}
.pinput:focus,.pselect:focus,.ptextarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.ptextarea{min-height:140px;resize:vertical;line-height:1.55;}
.pselect{appearance:none;-webkit-appearance:none;padding-right:2.6em;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-dim) 50%),linear-gradient(135deg,var(--fg-dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 1.25em,calc(100% - 13px) 1.25em;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
/* Native option lists default to OS colours (light-on-white in our dark theme = invisible).
   Force readable dark options. */
.pselect option,.pselect optgroup{background:#160F36;color:#EFECFA;}
.pfield-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.pform__actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:.4rem;}

/* ── Buttons (extends sandbox .btn) ──────────────────────── */
.btn--sm{font-size:.85rem;padding:.6em 1.1em;}
.btn--block{display:flex;width:100%;justify-content:center;}
.btn--danger{border-color:rgba(255,138,155,.4);color:#ff8a9b;background:rgba(255,138,155,.06);}
.btn--danger:hover{background:rgba(255,138,155,.12);border-color:rgba(255,138,155,.6);}
.btn--soft{background:var(--accent-soft);color:var(--fg);border-color:rgba(169,139,255,.3);}
.btn--soft:hover{background:rgba(169,139,255,.2);}

/* ── Auth (centred) ──────────────────────────────────────── */
.pauth{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:3rem var(--pad);}
.pauth__card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:2.4rem clamp(1.5rem,4vw,2.4rem);box-shadow:0 40px 120px -50px rgba(0,0,0,.8);}
.pauth__logo{display:block;margin:0 auto 1.6rem;}
.pauth h1{font-family:var(--f-display);font-weight:600;font-size:1.7rem;text-align:center;letter-spacing:-.01em;}
.pauth__sub{color:var(--fg-dim);text-align:center;margin-top:.5rem;margin-bottom:1.8rem;font-size:.95rem;}
.pauth__foot{text-align:center;margin-top:1.6rem;color:var(--fg-dim);font-size:.9rem;}
.pauth__foot a{color:var(--accent);text-decoration:none;}
.pauth__foot a:hover{text-decoration:underline;}
.pauth .pform__actions{margin-top:.6rem;}
.pauth .btn--primary{width:100%;justify-content:center;}

/* ── Ticket thread ───────────────────────────────────────── */
.thread{display:flex;flex-direction:column;gap:1rem;}
.msg{border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;max-width:80%;}
.msg__meta{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--fg-faint);margin-bottom:.5rem;}
.msg__who{font-weight:600;color:var(--fg-dim);}
.msg__body{color:var(--fg);line-height:1.6;white-space:pre-wrap;word-break:break-word;}
.msg--customer{align-self:flex-end;background:var(--accent-soft);border-color:rgba(169,139,255,.3);}
.msg--admin{align-self:flex-start;background:var(--panel);}
.msg--ai{align-self:flex-start;background:rgba(255,255,255,.02);border-style:dashed;}

/* ── Empty state / misc ──────────────────────────────────── */
.pempty{text-align:center;border:1px dashed var(--line);border-radius:var(--r);padding:3rem 1.5rem;color:var(--fg-dim);background:rgba(255,255,255,.01);}
.pempty__icon{font-size:2rem;display:block;margin-bottom:.8rem;}
.pempty p{margin-bottom:1.2rem;}

.pnote{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1.05rem;border-radius:12px;font-size:.88rem;line-height:1.5;
  background:var(--accent-soft);border:1px solid rgba(169,139,255,.25);color:var(--fg);}
.pnote--warn{background:rgba(255,197,107,.1);border-color:rgba(255,197,107,.28);}
.pnote--danger{background:rgba(255,138,155,.1);border-color:rgba(255,138,155,.28);}

.prow{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.pmono{font-family:var(--f-mono);}
.pmuted{color:var(--fg-dim);}
.pbig{font-family:var(--f-display);font-weight:600;}
.pspacer{flex:1;}
.pdivider{height:1px;background:var(--line);border:none;margin:1.4rem 0;}
.pchips{display:flex;flex-wrap:wrap;gap:.5rem;}

/* provisioning spinner (dashboard) */
.pspin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:pspin .8s linear infinite;flex:none;}
@keyframes pspin{to{transform:rotate(360deg);}}

/* ── Flash toasts ────────────────────────────────────────── */
.pflash{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.6rem;}
.ptoast{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.1rem;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);font-size:.92rem;}
.ptoast span{flex:1;}
.ptoast__x{background:none;border:none;color:var(--fg-faint);font-size:1.2rem;cursor:pointer;line-height:1;}
.ptoast__x:hover{color:var(--fg);}
.ptoast--success{border-color:rgba(94,224,166,.35);background:rgba(94,224,166,.08);}
.ptoast--error,.ptoast--danger{border-color:rgba(255,138,155,.35);background:rgba(255,138,155,.08);}
.ptoast--warning,.ptoast--warn{border-color:rgba(255,197,107,.35);background:rgba(255,197,107,.08);}
.ptoast--info{border-color:rgba(169,139,255,.35);background:var(--accent-soft);}

/* ── Footer ──────────────────────────────────────────────── */
.pfoot{border-top:1px solid var(--line);padding-block:1.4rem;color:var(--fg-faint);font-size:.84rem;}
.pfoot__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.pfoot__links{display:flex;gap:1.1rem;flex-wrap:wrap;}
.pfoot__links a{color:var(--fg-dim);text-decoration:none;}
.pfoot__links a:hover{color:var(--fg);}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:760px){
  .pn__nav{display:none;}
  .pn__uname{display:none;}
  .pn__burger{display:flex;}
  .pfield-row{grid-template-columns:1fr;}
  .msg{max-width:100%;}
  .ptable-wrap{overflow-x:auto;}
  .ptable{min-width:560px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .pspin{animation:pspin .8s linear infinite;}  /* keep the only meaningful spinner */
}