/* Report access lightbox (all pages) and its stand-alone pages (/subscribe/, /subscribe/confirm/).
   A compact white card floats in the centre; the page behind is tinted and blurred. Square corners, 2px blue rule on top. */

/* ---------- Dialog ---------- */
.lightbox{padding:0;border:0;margin:auto;background:transparent;max-width:none;max-height:none;overflow:visible}
.lightbox::backdrop{background:rgba(35,31,32,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lightbox[open]{animation:lightbox-in 300ms var(--ease)}
.lightbox[open]::backdrop{animation:lightbox-fade 300ms var(--ease)}
@keyframes lightbox-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lightbox-fade{from{opacity:0}to{opacity:1}}
html:has(.lightbox[open]){overflow:hidden}

/* ---------- Card ---------- */
.sub-card{position:relative;width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;background:#fff;color:var(--ctc-black);padding:30px 40px 26px;border-top:2px solid var(--ctc-blue)}
.sub-card--small{width:min(560px,calc(100vw - 32px))}
.sub-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.sub-card__title{font-size:26px;line-height:30px}            /* headline token: Nexa XBold 26/30 */
.sub-card__intro{margin-top:10px;font-size:15px;line-height:22px;font-weight:300}
.sub-card .prose{margin-top:16px}
.sub-card__close{all:unset;position:relative;flex-shrink:0;padding:4px 0;font:700 15px/20px var(--font-sans);color:var(--ctc-black);cursor:pointer;transition:color var(--t-colour) var(--ease)}
.sub-card__close::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ctc-blue);transform:scaleX(0);transform-origin:right center;transition:transform var(--t-underline) var(--ease)}
.sub-card__close:hover,.sub-card__close:focus-visible{color:var(--ctc-blue)}
.sub-card__close:hover::after,.sub-card__close:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.sub-card__close:focus-visible{outline:2px solid var(--ctc-blue);outline-offset:4px}

/* ---------- Form (brief §5). Compact: 44px fields, two columns ---------- */
.sub-form{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.sub-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.field{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px}
.field--half{grid-column:auto}
.field label,.consent legend{font-weight:700;font-size:14px;line-height:18px}
.field input{height:44px;border:1px solid var(--ctc-rule-strong);border-radius:0;background:#fff;color:var(--ctc-black);padding:0 14px;font:16px var(--font-sans);transition:box-shadow var(--t-colour) var(--ease)}
.field input:focus-visible{outline:2px solid var(--ctc-blue);outline-offset:3px}
.field input[aria-invalid="true"]{border-color:var(--ctc-blue);box-shadow:inset 0 0 0 1px var(--ctc-blue)}
.field__error{font-weight:700;font-size:13px;line-height:18px;color:var(--ctc-blue)}
.field__error:empty{display:none}
.consent{margin:0;padding:16px 0 0;border:0;border-top:1px solid var(--ctc-rule);display:flex;flex-direction:column;gap:8px}
.consent legend{float:left;width:100%;padding:0;margin-bottom:10px}
.check{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer;align-self:flex-start}
.check input{width:18px;height:18px;margin:0;accent-color:var(--ctc-blue);border-radius:0}
.check input:focus-visible{outline:2px solid var(--ctc-blue);outline-offset:4px}
.consent__text{font-size:12px;line-height:17px;color:var(--ctc-text-muted)}  /* caption token */
.consent__text .ctc-link{color:var(--ctc-text-muted)}
.consent__text .ctc-link:hover,.consent__text .ctc-link:focus-visible{color:var(--ctc-blue)}
.sub-form__hp{position:absolute;left:-5000px}
.sub-form__foot{display:flex;align-items:center;gap:20px}
.sub-form__note{font-size:13px;line-height:18px;color:var(--ctc-text-muted)}

/* ---------- Stand-alone pages: the card over a blurred, tinted photo ---------- */
body.lightbox-page main{padding-top:78px}
.lightbox-stage{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 78px);display:flex;align-items:center;justify-content:center;padding:16px 0}
.lightbox-stage::before{content:"";position:absolute;inset:-40px;z-index:-2;background:var(--ctc-black) url(/assets/images/oil-platform.jpg) center/cover;filter:blur(14px)}
.lightbox-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(35,31,32,.45)}
.lightbox-page .sub-card{max-height:none}

/* ---------- Phone: the card fills the screen and scrolls inside ---------- */
@media (max-width: 760px){
  .sub-card{width:100vw;max-height:100dvh;min-height:100dvh;padding:24px 20px 28px;border-top:0}
  .lightbox-page .sub-card{min-height:0;width:calc(100vw - 32px);border-top:2px solid var(--ctc-blue)}
  .sub-card__title{font-size:24px;line-height:28px}
  .sub-form__grid{gap:12px 12px}                 /* names and company/title stay paired, so it fits a phone screen */
  .sub-form__foot{gap:14px}
}