/* portal.css — Refinery customer portal app shell + page styles.
   Strictly scoped per repo rule: no html/body/*/a/button/input, no :root, no @font-face.
   Tokens (--black/--cream/--orange/--rule/--radius-card/--nav-h/--ok/--err) come from page inline :root. */

/* ---- App shell ---- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--orange);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200;}
.skip-link:focus{left:0;}
.pf-nav{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  height:var(--nav-h);padding:0 var(--space-xl);background:var(--black);border-bottom:1px solid var(--rule);
  view-transition-name:refinery-nav;}  /* nav holds still across page transitions */
.pf-wordmark{font-size:22px;color:var(--cream);font-weight:400;}
.pf-wordmark .dot{color:#C94A1A;}
.pf-links{display:flex;gap:6px;justify-self:start;}
.pf-links a{padding:8px 14px;border-radius:999px;font-size:14px;color:var(--cream-mid);transition:background 140ms ease,color 140ms ease;}
.pf-links a:hover{color:var(--cream);background:rgba(201,74,26,0.08);}
.pf-links a.pf-active{color:var(--cream);background:rgba(201,74,26,0.12);}
.pf-tools{display:flex;align-items:center;gap:12px;justify-self:end;}
.pf-cta{padding:9px 18px;border-radius:999px;border:1px solid rgba(201,74,26,0.32);color:#C94A1A;font-size:14px;font-weight:600;transition:background 140ms ease;}
.pf-cta:hover{background:rgba(201,74,26,0.08);}
.pf-account{position:relative;}
.pf-account-btn{display:flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--rule);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;color:var(--cream);}
.pf-avatar{width:28px;height:28px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px;}
.pf-account-name{font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-account-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;background:var(--black);border:1px solid var(--rule);border-radius:var(--radius-card);padding:6px;box-shadow:0 12px 32px rgba(0,0,0,0.18);}
.pf-account-menu a,.pf-account-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;background:transparent;border:0;color:var(--cream);font-size:14px;cursor:pointer;}
.pf-account-menu a:hover,.pf-account-menu button:hover{background:rgba(201,74,26,0.08);}
.pf-hamburger{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:8px;}
.pf-hamburger span{width:22px;height:2px;background:var(--cream);border-radius:2px;}
.pf-drawer{display:none;flex-direction:column;gap:4px;padding:12px var(--space-xl);background:var(--black);border-bottom:1px solid var(--rule);}
.pf-drawer.open{display:flex;}
.pf-drawer a,.pf-drawer button{padding:12px 6px;border-radius:8px;color:var(--cream);background:transparent;border:0;text-align:left;font-size:16px;cursor:pointer;}

/* ---- Layout ---- */
.pf-wrap{max-width:1100px;margin:0 auto;padding:48px var(--space-xl) 96px;position:relative;z-index:1;}
/* full-page WebGL accent field — fixed behind ALL content (sits above the body
   background, below nav/content). The canvas is inserted into .pf-bg by hero-field.js. */
.pf-bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
.pf-bg .hf-canvas{position:fixed;inset:0;width:100%;height:100%;}
/* hero band — just GSAP entrance + layout now (field is full-page, not boxed here) */
.pf-hero{position:relative;padding:8px 0 20px;margin-bottom:8px;}
.pf-hero > *{position:relative;z-index:1;}
.pf-h1{font-size:clamp(32px,5vw,48px);color:var(--cream);letter-spacing:-0.02em;margin-bottom:8px;}
.pf-lead{color:var(--cream-mid);font-size:16px;line-height:1.6;margin-bottom:32px;max-width:56ch;}
.pf-card{background:var(--steel-mid);border:1px solid var(--rule);border-radius:var(--radius-card);padding:24px;}

/* ---- Auth pages (narrow, centered) ---- */
.pf-auth{max-width:420px;margin:0 auto;}
.pf-field{margin-bottom:14px;}
.pf-field label{display:block;font-size:13px;color:var(--cream-mid);margin-bottom:6px;}
.pf-input{width:100%;background:var(--black);border:1px solid var(--rule);border-radius:10px;padding:13px 14px;color:var(--cream);font-size:15px;font-family:inherit;}
.pf-input:focus{outline:2px solid var(--orange);outline-offset:1px;}
.pf-btn{width:100%;background:var(--orange);color:#fff;border:0;border-radius:999px;padding:14px 22px;font-size:15px;font-weight:600;cursor:pointer;transition:filter 140ms ease;}
.pf-btn:hover{filter:brightness(1.06);}
.pf-btn:disabled{opacity:.6;cursor:default;}
.pf-btn-secondary{width:100%;background:transparent;color:var(--cream);border:1px solid var(--rule);border-radius:999px;padding:13px 22px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;}
.pf-btn-secondary:hover{background:rgba(201,74,26,0.06);}
.pf-altlink{margin-top:18px;font-size:14px;color:var(--cream-mid);}
.pf-altlink a{color:var(--orange);font-weight:600;}
.pf-msg{font-size:13px;margin-top:12px;min-height:1.2em;}
.pf-msg.ok{color:var(--ok);}
.pf-msg.err{color:var(--err);}

/* ---- Option / plan grids (top-up packages & subscribe plans) ---- */
.pf-option-grid{display:grid;gap:14px;margin-bottom:24px;}
.pf-option-grid.cols3{grid-template-columns:repeat(3,1fr);}
.pf-option{position:relative;display:block;border:1px solid var(--rule);border-radius:var(--radius-card);padding:18px 18px 18px 46px;cursor:pointer;background:var(--steel-mid);transition:border-color 140ms ease,box-shadow 140ms ease;}
.pf-option input{position:absolute;left:16px;top:20px;accent-color:var(--orange);}
.pf-option:has(input:checked){border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);}
.pf-option .pf-opt-title{display:block;font-weight:600;color:var(--cream);font-size:16px;}
.pf-option .pf-opt-sub{display:block;color:var(--cream-mid);font-size:14px;margin-top:4px;}

/* ---- Segmented control (Card / PromptPay) ---- */
.pf-seg{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:4px;margin-bottom:18px;}
.pf-seg-btn{background:transparent;border:0;border-radius:999px;padding:8px 18px;font-size:14px;color:var(--cream-mid);cursor:pointer;}
.pf-seg-btn.active{background:var(--orange);color:#fff;}

/* ---- Card form (payment) ---- */
.pf-cardform{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:480px;}
.pf-cardform .col-2{grid-column:1 / -1;}
.pf-promptpay{max-width:340px;text-align:center;}
.pf-qr{width:200px;height:200px;margin:14px auto;border-radius:12px;background:
  linear-gradient(45deg,var(--rule) 25%,transparent 25%,transparent 75%,var(--rule) 75%),
  linear-gradient(45deg,var(--rule) 25%,var(--steel-mid) 25%,var(--steel-mid) 75%,var(--rule) 75%);
  background-size:20px 20px;background-position:0 0,10px 10px;border:1px solid var(--rule);display:grid;place-items:center;color:var(--cream-dim);font-size:12px;}

/* ---- Dashboard ---- */
.pf-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;}
.pf-balance .n{font-size:clamp(40px,7vw,64px);color:var(--cream);letter-spacing:-0.02em;line-height:1;}
.pf-balance .u{color:var(--orange);font-weight:600;font-size:18px;margin-left:8px;}
.pf-idcard{background:linear-gradient(135deg,#C94A1A,#7a2c0f);color:#fff;border-radius:var(--radius-card);padding:22px;border:0;}
.pf-idcard .pf-id-name{font-size:20px;font-weight:600;}
.pf-idcard .pf-id-num{font-family:ui-monospace,Menlo,monospace;letter-spacing:0.12em;margin-top:6px;opacity:.92;}
.pf-idcard .pf-id-badge{display:inline-block;margin-top:14px;background:rgba(255,255,255,0.18);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;}
.pf-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.pf-product{display:flex;flex-direction:column;gap:8px;border:1px solid var(--rule);border-radius:var(--radius-card);padding:16px;background:var(--steel-mid);}
.pf-product .name{font-weight:600;color:var(--cream);}
.pf-product .state{font-size:13px;color:var(--cream-mid);}
.pf-product .launch{margin-top:auto;font-size:13px;font-weight:600;color:var(--orange);}
.pf-activity{width:100%;border-collapse:collapse;}
.pf-activity th,.pf-activity td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--rule);font-size:14px;}
.pf-activity th{color:var(--cream-dim);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.08em;}
.pf-activity td.amt-pos{color:var(--ok);}
.pf-activity td.amt-neg{color:var(--cream-mid);}
.pf-section-title{font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:var(--cream-dim);margin:36px 0 14px;}

/* ---- Footer ---- */
.pf-foot{border-top:1px solid var(--rule);padding:28px var(--space-xl);text-align:center;color:var(--cream-dim);font-size:12px;position:relative;z-index:1;}

/* ---- Responsive ---- */
@media (max-width:860px){
  .pf-grid{grid-template-columns:1fr;}
  .pf-option-grid.cols3{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .pf-nav{grid-template-columns:1fr auto;}
  .pf-links{display:none;}
  .pf-tools{display:none;}
  .pf-hamburger{display:flex;}
  .pf-account-name{display:none;}
}
@media (max-width:360px){
  .pf-nav{padding-left:16px;padding-right:16px;}
}
@media (max-width:520px){
  .pf-cardform{grid-template-columns:1fr;}
  .pf-wrap{padding-top:32px;}
}