/* The portal's signed-in layer (assets/access.js): admin sign-in, session
   headers, and the Access view. Same visual language as portal.css: 1px
   frames, 5px radii, the theme's font, SolFence orange for selection.
   Layout follows docs/design/access-mockups.html. Dialogs are appended to
   <body>, outside the portal, so they carry their own tokens. */
.solfence-portal-shell,.solfence-backdrop{--sf-ink:#1f2933;--sf-sub:#5f6368;--sf-line:#e0e0e0;--sf-soft:#f8f9fa;--sf-head:#f1f3f4;--sf-accent:#e65100;--sf-ok:#1d6b4e;--sf-warn:#8a5a00;--sf-bad:#b32d2e;--sf-radius:5px}

/* --- Shared bits ---------------------------------------------------------- */
.solfence-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.5em .9em;border:1px solid #000;border-radius:var(--sf-radius);background:#fff;color:var(--sf-ink);font:inherit;font-size:.9rem;line-height:1.2;cursor:pointer;white-space:nowrap;text-decoration:none}
.solfence-btn:hover{background:#f3f4f6}
.solfence-btn:focus-visible,.solfence-link:focus-visible,.solfence-choice:focus-visible{outline:2px solid var(--sf-accent);outline-offset:2px}
.solfence-btn:disabled{opacity:.55;cursor:default}
.solfence-btn-small{font-size:.8rem;padding:.35em .65em}
.solfence-btn-dark{background:#000;color:#fff;border-color:#000}
.solfence-btn-dark:hover{background:#333}
.solfence-btn-danger{color:#fff;background:var(--sf-bad);border-color:var(--sf-bad)}
.solfence-btn-ghost{border-color:transparent;background:transparent}
.solfence-btn-primary{cursor:pointer}
.solfence-btn-primary:disabled{opacity:.6;cursor:default}
.solfence-wide{width:100%;justify-content:center}
.solfence-link{background:none;border:0;padding:0;color:inherit;font:inherit;font-size:.88rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* hidden wins over a class's own display. Without this, .solfence-input and
   .solfence-checks showed the sheet's date box beside "90 days" and the Custom
   checklist under every preset. */
.solfence-access [hidden],.solfence-backdrop [hidden]{display:none!important}
.solfence-label{display:block;margin:0 0 6px;font-size:.75rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--sf-sub)}
.solfence-input{display:block;box-sizing:border-box;width:100%;padding:10px 12px;background:#fff!important;color:var(--sf-ink)!important;border:1px solid #94a3b8!important;border-radius:var(--sf-radius);font:inherit;font-size:1rem}
.solfence-input:focus{outline:0;border-color:var(--sf-accent)!important;box-shadow:0 0 0 3px rgba(230,81,0,.15)}
.solfence-input:disabled{background:var(--sf-soft)!important;color:var(--sf-sub)!important}
/* The !important above, on the sign-in fields below, and in portal.css's
   "Frames that survive GoDaddy": GoDaddy injects a rule on staging and live
   that wipes every input's frame and background inside .wp-site-blocks. And
   should another of its rules lean on the colours that rule assumes, they
   resolve here to white and black. Not on .solfence-portal: the 3D viewer's
   own controls sit there, and its explode slider would get a box. */
.solfence-pin-gate,.solfence-access,.solfence-backdrop{--wp--preset--color--base:#fff;--wp--preset--color--contrast:#000}
.solfence-field{margin:0 0 14px}
.solfence-help{margin:6px 0 0;font-size:.82rem;color:var(--sf-sub)}
.solfence-center{text-align:center}
.solfence-status{margin:4px 0 10px;min-height:1.2em;font-size:.88rem;color:var(--sf-sub)}
.solfence-status:empty{margin:0;min-height:0}
.solfence-status.is-error{color:var(--sf-bad)}
.solfence-notice{margin:3px 0 0;font-size:.8rem;color:var(--sf-warn)}
.solfence-quiet{color:var(--sf-sub)}
.solfence-sub{margin-top:2px;font-size:.8rem;color:var(--sf-sub)}
.solfence-soon{color:var(--sf-warn);font-weight:600}
.solfence-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.solfence-row+.solfence-label{margin-top:16px}
.solfence-spread{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.solfence-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.solfence-pill{display:inline-block;padding:1px 7px;border:1px solid currentColor;border-radius:var(--sf-radius);font-size:.75rem;font-weight:600;white-space:nowrap}
.solfence-pill.is-active{color:var(--sf-ok)}.solfence-pill.is-expiring{color:var(--sf-warn)}.solfence-pill.is-expired{color:#7b8187}.solfence-pill.is-revoked{color:var(--sf-bad)}
.solfence-check{display:flex;gap:8px;align-items:center;margin:0 0 12px;font-size:.92rem;cursor:pointer}

/* --- PIN panel: show/hide, Forgot PIN?, and the way in for admins -------- */
.solfence-pin-gate .solfence-reveal{position:relative;display:block;width:80%;margin:20px auto}
.solfence-pin-gate .solfence-reveal input{width:100%;margin:0;padding-left:52px;padding-right:52px}
.solfence-reveal{position:relative;display:block}
.solfence-reveal__toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;padding:6px;color:var(--sf-sub);font:inherit;font-size:.78rem;cursor:pointer}
/* Well clear of Open Viewer: "a line or two lower". */
.solfence-admin-entry{margin-top:28px;text-align:center}
/* Under Open Viewer; "or Log in as Admin" keeps its own space below it. */
.solfence-forgot{margin:14px auto 0;text-align:center}
.solfence-forgot__text{max-width:30em;margin:6px auto 0;font-size:.88rem;line-height:1.45;color:var(--sf-sub)}
.solfence-wp-signin{margin-top:10px}
.solfence-wp-signin a{color:inherit;text-underline-offset:3px}
/* The panel's quiet links (Forgot PIN?, Log in as Admin, Back to PIN login, Site
   administrator?), its help lines and the Forgot PIN? answer take its size and
   weight, as "Enter PIN" does, so Portal Appearance's text size reaches them.
   In rem they ignored it: 14px beside live's 12px "Enter PIN", and the
   theme made the WordPress link bold. On phones they keep 44px by height. */
.solfence-pin-gate .solfence-link,.solfence-pin-gate .solfence-help,.solfence-pin-gate .solfence-wp-signin a,.solfence-pin-gate .solfence-forgot__text{font-size:inherit;font-weight:inherit}

/* Admin mode swaps the panel's contents in place. */
.solfence-pin-gate.is-admin-mode>*:not(.solfence-admin-signin){display:none!important}
.solfence-admin-signin .solfence-form{text-align:left}
.solfence-admin-signin h2{text-align:center}
.solfence-admin-signin .solfence-pin-message{text-align:center;margin-bottom:18px}
/* portal.css styles every input in the PIN panel as the big centred PIN box. */
.solfence-pin-gate .solfence-admin-signin input{display:block;width:100%;margin:0;padding:10px 12px;border:1px solid #94a3b8!important;font-size:1rem;letter-spacing:normal;text-align:left;box-shadow:none}
.solfence-pin-gate .solfence-admin-signin .solfence-reveal{width:100%;margin:0}
.solfence-pin-gate .solfence-admin-signin .solfence-reveal input{padding-left:12px;padding-right:52px}
.solfence-pin-gate .solfence-admin-signin input.solfence-code{font-size:1.35rem;letter-spacing:6px;text-align:center;font-variant-numeric:tabular-nums}
.solfence-pin-gate .solfence-admin-signin input:focus{border-color:var(--sf-accent)!important;box-shadow:0 0 0 3px rgba(230,81,0,.15)}
/* Two-step sign-in (B5): setting it up, and the backup codes. On a phone the
   app opens from a link and a QR code is no use; elsewhere the QR code (when
   drawn) is scanned. The key to type is always there. */
.solfence-pin-gate .solfence-admin-signin input[type=checkbox]{display:inline-block;width:auto;padding:0;margin:0}
.solfence-setup__steps{margin:6px 0 14px;padding-left:22px;text-align:left}
.solfence-setup__steps>li{margin:0 0 16px}
.solfence-setup__steps>li>b,.solfence-setup__steps label b{display:block;margin:0 0 6px}
.solfence-setup__touch{display:none;margin:0 0 10px}
.solfence-setup__open{margin-top:4px;box-sizing:border-box}
.solfence-setup__qr:empty{display:none}
.solfence-setup__qr svg{display:block;width:180px;height:180px;margin:4px 0 10px;padding:8px;background:#fff;border:1px solid var(--sf-line);border-radius:var(--sf-radius)}
.solfence-setup__key .solfence-spread{margin:4px 0}
.solfence-setup__key .solfence-spread{flex-wrap:wrap}
.solfence-setup__keytext{font-size:1.05rem;letter-spacing:1px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media (pointer:coarse){
  .solfence-setup__touch{display:block}
  .solfence-setup__qr{display:none}
}
.solfence-codes__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:12px 0 14px;padding-left:24px;text-align:left}
.solfence-codes__list code{font-size:1.05rem;letter-spacing:1px;font-variant-numeric:tabular-nums}
.solfence-codes .solfence-row{margin:0 0 14px}
.solfence-codes .solfence-check{margin:0 0 14px}
.solfence-flash{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;padding:8px 12px;font-size:.88rem;border:1px solid var(--sf-warn);border-radius:var(--sf-radius);background:#fff8e6}
@media print{
  html.solfence-printing-codes body *{visibility:hidden}
  html.solfence-printing-codes .solfence-codes,html.solfence-printing-codes .solfence-codes *{visibility:visible}
  html.solfence-printing-codes .solfence-codes{position:absolute;left:0;top:0;width:100%}
  html.solfence-printing-codes .solfence-codes button,html.solfence-printing-codes .solfence-codes a,html.solfence-printing-codes .solfence-codes .solfence-check{display:none}
}

/* --- Session headers ------------------------------------------------------ */
.solfence-portal__logout.has-session{justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.solfence-session{display:flex;flex-direction:column;gap:2px;min-width:0}
.solfence-session__who{font-weight:600}
.solfence-session__ends{font-size:.85rem;color:var(--sf-sub)}
.solfence-session__ends.is-soon{color:var(--sf-warn);font-weight:600}
/* Signed in: Admin (outline) beside Log out (solid), top right. */
.solfence-adminbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;margin:0 0 16px}

/* --- The Access view ------------------------------------------------------ */
.solfence-access{container-type:inline-size;color:var(--sf-ink)}
.solfence-panel{background:#fff;border:1px solid var(--sf-line);border-radius:8px;padding:20px;margin:0 0 16px}
.solfence-panel__head{margin:0 0 12px}
.solfence-panel__head h3{margin:0;font-size:1.05rem}
.solfence-loading{padding:20px;text-align:center;color:var(--sf-sub)}
.solfence-list{width:100%;border-collapse:collapse}
.solfence-list th{text-align:left;padding:9px 10px;font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--sf-sub);background:var(--sf-head);border-bottom:1px solid var(--sf-line)}
.solfence-list td{padding:11px 10px;border-bottom:1px solid var(--sf-line);vertical-align:top;font-size:.9rem}
.solfence-list tr.is-dim td{color:#8a9096}
.solfence-list__name{font-weight:600}
.solfence-list__actions{text-align:right;white-space:nowrap}
.solfence-actions-wide{display:inline-flex;gap:6px;align-items:flex-start}
.solfence-actions-narrow{display:none}
.solfence-reveal-row td{background:var(--sf-soft)}
.solfence-pin{font-size:1.25rem;letter-spacing:4px;font-variant-numeric:tabular-nums;color:var(--sf-ink)}
.solfence-pin.is-big{margin:12px 0;padding:18px 8px;font-size:2.2rem;letter-spacing:6px;text-align:center;border:1px solid #000;border-radius:var(--sf-radius);background:var(--sf-soft)}
.solfence-menu{position:relative;display:inline-block;text-align:left}
.solfence-menu>summary{list-style:none}
.solfence-menu>summary::-webkit-details-marker{display:none}
.solfence-menu__list{position:absolute;right:0;z-index:20;display:flex;flex-direction:column;min-width:170px;margin-top:4px;padding:4px;background:#fff;border:1px solid #000;border-radius:var(--sf-radius);box-shadow:0 6px 18px rgba(15,23,42,.14)}
.solfence-menu__list button{border:0;background:none;padding:8px 10px;text-align:left;font:inherit;font-size:.88rem;color:var(--sf-ink);border-radius:4px;cursor:pointer}
.solfence-menu__list button:hover,.solfence-menu__list button:focus-visible{background:var(--sf-head)}
.solfence-menu__list button.is-danger{color:var(--sf-bad)}
@container (max-width:600px){
  .solfence-panel{padding:16px}
  .solfence-list thead{display:none}
  .solfence-list,.solfence-list tbody,.solfence-list tr,.solfence-list td{display:block;width:100%}
  .solfence-list tr{padding:12px 0;border-bottom:1px solid var(--sf-line)}
  .solfence-list td{border:0;padding:2px 0}
  .solfence-list td[data-label]{font-size:.85rem}
  .solfence-list td[data-label]::before{content:attr(data-label) " ";color:var(--sf-sub)}
  .solfence-list td[data-label] .solfence-sub{display:inline;margin-left:4px}
  .solfence-list__actions{text-align:left;margin-top:8px}
  .solfence-actions-wide{display:none}
  .solfence-actions-narrow{display:inline-block}
  .solfence-menu__list{left:0;right:auto}
}
/* Browsers without container queries (Safari before 16) stack by the
   screen width instead. Keep in step with the block above. */
@supports not (container-type:inline-size){
@media (max-width:600px){
  .solfence-panel{padding:16px}
  .solfence-list thead{display:none}
  .solfence-list,.solfence-list tbody,.solfence-list tr,.solfence-list td{display:block;width:100%}
  .solfence-list tr{padding:12px 0;border-bottom:1px solid var(--sf-line)}
  .solfence-list td{border:0;padding:2px 0}
  .solfence-list td[data-label]{font-size:.85rem}
  .solfence-list td[data-label]::before{content:attr(data-label) " ";color:var(--sf-sub)}
  .solfence-list td[data-label] .solfence-sub{display:inline;margin-left:4px}
  .solfence-list__actions{text-align:left;margin-top:8px}
  .solfence-actions-wide{display:none}
  .solfence-actions-narrow{display:inline-block}
  .solfence-menu__list{left:0;right:auto}
}
}

/* --- Preview -------------------------------------------------------------- */
.solfence-preview-banner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 14px;padding:10px 12px;border:1px solid var(--sf-accent);border-radius:var(--sf-radius);background:rgba(230,81,0,.10);font-size:.9rem}

/* --- Dialogs and the sheet ------------------------------------------------ */
.solfence-dialog-open,.solfence-dialog-open body{overflow:hidden}
.solfence-backdrop{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;background:rgba(15,23,42,.35);overflow:auto;color:var(--sf-ink);font-size:15px;line-height:1.45}
.solfence-backdrop.is-top{z-index:100001}
.solfence-dialog{box-sizing:border-box;width:100%;max-width:420px;padding:20px;background:#fff;border:1px solid #000;border-radius:8px;box-shadow:0 10px 32px rgba(15,23,42,.22)}
.solfence-dialog.is-sheet{max-width:640px;padding:0;overflow:hidden}
.solfence-dialog__title{margin:0 0 6px;font-size:1.05rem}
.solfence-dialog__body{margin:0 0 16px;color:var(--sf-sub)}
.solfence-dialog__actions{display:flex;justify-content:flex-end;gap:8px}
.solfence-sheet__head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--sf-line)}
.solfence-sheet__head h3{margin:0;font-size:1.05rem}
.solfence-sheet__body{padding:18px}
.solfence-sheet__foot{display:flex;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid var(--sf-line)}
.solfence-steps{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:10px 18px;list-style:none;background:var(--sf-soft);border-bottom:1px solid var(--sf-line)}
.solfence-steps li{padding:3px 8px;font-size:.75rem;color:var(--sf-sub);background:#fff;border:1px solid var(--sf-line);border-radius:var(--sf-radius)}
.solfence-steps li.is-on{color:#000;font-weight:700;border-color:#000}
.solfence-steps li.is-done{color:var(--sf-ok);border-color:#b7d7c9}
.solfence-results{margin:8px 0 0}
.solfence-results__item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;font-size:.88rem;border:1px solid var(--sf-line);border-top:0}
.solfence-results__item:first-child{border-top:1px solid var(--sf-line);border-radius:var(--sf-radius) var(--sf-radius) 0 0}
.solfence-results__item:last-child{border-radius:0 0 var(--sf-radius) var(--sf-radius)}
.solfence-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.solfence-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 8px;font-size:.82rem;background:#fff;border:1px solid #000;border-radius:var(--sf-radius)}
.solfence-chip small{color:var(--sf-sub)}
.solfence-chip.is-retired{border-style:dashed;color:#7b8187}
.solfence-chip__x{border:0;background:none;padding:0 4px;font-size:1rem;line-height:1;color:var(--sf-sub);cursor:pointer}
.solfence-choice{display:block;box-sizing:border-box;width:100%;margin:0 0 8px;padding:12px;text-align:left;font:inherit;color:var(--sf-ink);background:#fff;border:1px solid var(--sf-line);border-radius:var(--sf-radius);cursor:pointer}
.solfence-choice b{display:block}
.solfence-choice span{display:block;font-size:.82rem;color:var(--sf-sub)}
.solfence-choice.is-on{border-color:#000;box-shadow:inset 3px 0 0 var(--sf-accent)}
.solfence-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin:10px 0 0}
.solfence-checks .solfence-check{margin:0 0 6px}
.solfence-new{margin-left:4px;padding:0 5px;font-size:.7rem;font-weight:700;color:var(--sf-accent);border:1px solid var(--sf-accent);border-radius:var(--sf-radius)}
.solfence-seg{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.solfence-seg .solfence-btn[aria-pressed="true"]{background:#000;color:#fff}
.solfence-date{max-width:220px}
.solfence-sentence{margin:0;padding:4px 0 4px 12px;font-size:1.05rem;line-height:1.55;border-left:3px solid var(--sf-accent)}
.solfence-share{padding:10px 12px;font-size:.82rem;white-space:pre-line;background:var(--sf-soft);border:1px solid var(--sf-line);border-radius:var(--sf-radius)}
@media (max-width:600px){
  .solfence-backdrop{padding:0;align-items:stretch}
  .solfence-dialog{max-width:none;min-height:100%;border-radius:0;border:0}
  .solfence-dialog:not(.is-sheet){min-height:0;margin:auto 12px;border:1px solid #000;border-radius:8px}
  .solfence-checks{grid-template-columns:1fr}
}
/* --- Touch: 44px tap targets. With a mouse the look stays as above. ------ */
@media (pointer:coarse),(max-width:600px){
  .solfence-btn,.solfence-btn-primary,.solfence-menu__list button{min-width:44px;min-height:44px}
  .solfence-link,.solfence-wp-signin a{display:inline-flex;align-items:center;min-height:44px}
  .solfence-reveal__toggle{min-width:44px;min-height:44px}
  .solfence-chip{min-height:44px;padding-top:0;padding-bottom:0}
  .solfence-chip__x{align-self:stretch;min-width:44px}
  .solfence-check{min-height:44px;margin:0}
  .solfence-checks .solfence-check{margin:0}
}