/* Customer portal: the portal-specific pieces only.
   Tokens, type scale, .btn, .card, .field, header and footer all come from the
   site's own stylesheet, inlined in the page like every other page on
   hefestus-cannabis.com. Do not redefine brand tokens here.

   Contrast measured against the WORST-CASE composited backdrop: the hero's
   lightest gradient stop plus its mid-blue radial highlight plus the card's
   white veil, rgb(73,85,111). Two consequences:

   1. The site's usual on-dark secondary text, rgba(223,224,220,.72), only
      reaches 3.8:1 there, so secondary text is solid --pale (5.6:1) and
      hierarchy is carried by size and weight instead of opacity.
   2. The brand Light Blue --mint #73A6CE measures 2.9:1 there and fails AA for
      text. Decorative use of mint elsewhere on the site is left alone, but
      every FUNCTIONAL accent here (links, card affordances, status tags) uses
      --pt-accent, a lightened step of the same hue at 4.8:1. Links also carry
      an underline, so the affordance never depends on colour alone. */

:root{ --pt-accent:#B3D2E9; }

/* Fixes a live AA failure that yesterday's own aria-current fix created.
   On /portal/ the My account link is BOTH the current page and the filled
   primary button, so two page rules collide:

     .navlinks a[aria-current="page"]{color:#fff}      (0,2,1)
     .navlinks .btn-primary{color:var(--forest-black)} (0,2,0)

   The first wins on specificity, so the label rendered white on the orange
   button: measured 1.55:1 against a 4.5:1 floor at 0.92rem. The intended
   forest-black on orange is 13.16:1.

   Marking the current page is correct and stays. Only the colour is wrong, so
   this restores it with (0,3,0), which beats (0,2,1) on class count. Lives here
   rather than in the page's inline block because portal.css loads after it and
   only the portal has this collision. */
.navlinks .btn-primary[aria-current="page"]{color:var(--forest-black)}

[hidden]{display:none!important}

.pt-panel{max-width:640px}
.pt-panel:hover{transform:none;box-shadow:none;border-color:var(--line)}
.pt-panel h3{margin-bottom:.4rem}
.pt-note{font-size:.95rem;color:var(--pale);max-width:56ch}
.pt-link{color:var(--pt-accent);text-decoration:underline;text-underline-offset:2px}
.pt-link:hover{color:#fff}

/* a button that reads as a link, without losing button semantics */
.pt-linkbtn{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--pt-accent);text-decoration:underline;text-underline-offset:2px;
}
.pt-linkbtn:hover{color:#fff}

.pt-row{display:flex;gap:.7rem;align-items:stretch}
.pt-row input{flex:1;min-width:0}
.pt-row .btn{flex-shrink:0}

/* Status line. Meaning is carried by the wording and the accent rule, never by
   colour alone: a tinted salmon measured 3.6:1 on the worst-case backdrop. */
.pt-alert{
  margin-top:.9rem;font-size:.95rem;color:var(--pale);font-weight:500;
  border-left:2px solid var(--orange);padding-left:.8rem;
}
.pt-alert-ok{border-left-color:var(--mint)}

.pt-loading{
  color:var(--pale);font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;
  padding:2rem 0;
}
.pt-loading::after{content:"";animation:pt-dots 1.2s steps(4,end) infinite}
@keyframes pt-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.pt-loading::after{content:"...";animation:none}}

/* ---------- machines ---------- */
.pt-machines{display:grid;gap:.7rem;margin-top:1.2rem}
.pt-machine{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:3px;padding:.85rem 1.1rem;
}
.pt-machine-model{font-weight:600;color:#fff}
.pt-machine-serial{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9rem;color:var(--pale);letter-spacing:.02em;
}
.pt-machine-meta{font-size:.85rem;color:var(--pale)}

/* ---------- service cards ---------- */
.pt-cards{align-items:stretch}
.pt-card{display:flex;flex-direction:column;gap:.5rem}
.pt-card h3{margin:0}

/* Card icons. Each service gets a glyph so the five cards are scannable by
   shape before anyone reads a word: headset for support, screen and play for
   the video library, two figures for the account team, gauge for dashboards,
   package for parts.

   Decorative, not informational. Every icon sits next to an h3 that already
   names the service in words, so they carry aria-hidden="true" and
   focusable="false" (the latter because IE and some older Edge builds put
   inline SVG in the tab order otherwise). A screen reader hears the heading
   and nothing extra. Adding alt text here would just make every card
   announce itself twice.

   Colour is var(--pt-accent), the portal's documented 4.8:1 step, not a new
   value. Stroke rather than fill so a single currentColor swap on hover is
   the whole hover state. */
.pt-card-icon{color:var(--pt-accent);display:block;margin-bottom:.45rem}
/* 38px, up from 26px. stroke-width drops to 1.25 to compensate: rendered
   thickness is stroke-width x (38/24), so holding the 1.6 attribute would have
   taken the line from 1.7px to 2.5px and made the glyphs look chunky rather
   than larger. 1.25 lands at ~2.0px, marginally bolder than before, which is
   what a bigger glyph wants. CSS wins over the SVG presentation attribute, so
   this one rule governs every icon. */
.pt-card-icon svg{width:38px;height:38px;display:block;stroke-width:1.25}
.pt-card:hover .pt-card-icon{color:#fff}
@media(prefers-reduced-motion:no-preference){
  .pt-card-icon{transition:color .18s ease}
}
.pt-card p{flex:1}
.on-dark .pt-card p{color:var(--pale)}

.pt-card-tag{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pt-accent);
}
.pt-card-tag-soon{color:var(--pale)}

.pt-card-go{font-weight:600;color:var(--pt-accent);display:inline-flex;gap:.5rem;align-items:center}
.pt-card:hover .arw{transform:translateX(4px)}
.arw{transition:transform .18s ease}

/* A card with nothing to click must not pretend to be clickable.
   Deliberately NOT opacity: dimming the whole card dims its text too, which
   drags it back under 4.5:1 on the worst-case backdrop. The dashed border and
   the "Coming soon" tag carry the distinction instead, at full legibility. */
.pt-card-soon{background:transparent;border-style:dashed}
.pt-card-soon:hover{transform:none;box-shadow:none;border-color:var(--line)}

@media(max-width:600px){
  .pt-row{flex-direction:column}
  .pt-row .btn{justify-content:center}
}

/* ---------- video library ---------- */
/* A card now, not a thin row: title, what it shows, what it answers, then
   the action. The whole card is still the tap target, not just the button
   inside it, since on a phone on a production floor "tap the card you're
   already looking at" beats "find the one small word that works." The
   button stays a real <button> for keyboard and screen-reader users; the
   card-level click is added in JS, this just makes the card look tappable. */
.pt-video-row{
  cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:3px;padding:1rem 1.1rem;
}
.pt-video-row:hover,.pt-video-row:focus-within{background:rgba(255,255,255,.09);border-color:var(--pt-accent)}
.pt-video-row.pt-video-row-empty{cursor:default}
/* Same reasoning as .pt-video-row-empty: a multi-angle card has no
   whole-row click, so it must not offer a hand cursor for a click that does
   nothing. Its buttons keep their own pointer. */
.pt-video-row.pt-video-multi{cursor:default}
.pt-video-row.pt-video-row-empty:hover{background:rgba(255,255,255,.05);border-color:var(--line)}

.pt-video-title{font-weight:600;color:#fff;font-size:1rem}
.pt-video-desc{font-size:.9rem;color:var(--pale);margin-top:.4rem;line-height:1.5}

.pt-video-questions{margin-top:.7rem}
.pt-video-questions-label{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pt-accent);margin-bottom:.3rem;
}
.pt-video-questions-list{list-style:none;display:grid;gap:.25rem}
.pt-video-questions-list li{
  font-size:.85rem;color:var(--pale);padding-left:1rem;position:relative;
}
.pt-video-questions-list li::before{content:"?";position:absolute;left:0;color:var(--pt-accent);font-weight:600}

.pt-video-footer{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1rem}

/* A page whose entire job is "pick a video, watch it" needs its main,
   repeated action to read as a real control, not the fine-print link style
   .pt-linkbtn uses everywhere else for one-off secondary actions. Minimum
   44px tall, per WCAG 2.5.5's comfortable touch-target guidance, since the
   realistic device here is a phone or tablet, not a mouse. */
.pt-video-watch{
  display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0;
  min-height:44px;padding:.5rem 1.1rem .5rem .9rem;border-radius:3px;
  background:transparent;border:1px solid var(--pt-accent);color:var(--pt-accent);
  font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.pt-video-watch::before{
  content:"";width:0;height:0;flex-shrink:0;
  border-style:solid;border-width:6px 0 6px 9px;
  border-color:transparent transparent transparent currentColor;
}
/* Row hover fills the watch button, because on a single-action card hovering
   anywhere is a fair signal of what you are about to click. A multi-angle card
   is different: it has two buttons and no whole-row click, so filling both on
   row hover makes neither read as the one about to fire. Excluded by class,
   which the JS adds only to multi-angle rows. Direct button hover still works
   on every card. */
.pt-video-row:not(.pt-video-multi):hover .pt-video-watch,.pt-video-watch:hover{background:var(--pt-accent);color:var(--forest-black)}
.pt-video-row.pt-video-open .pt-video-watch::before{
  border-width:0 6px 9px 6px;border-color:transparent transparent currentColor transparent;
}

.pt-video-frame-wrap{
  position:relative;width:100%;aspect-ratio:16/9;
  background:var(--forest-black);border-radius:3px;overflow:hidden;margin-top:-.2rem;
}
.pt-video-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media(max-width:600px){
  .pt-video-footer{flex-direction:column;align-items:stretch}
  .pt-video-watch{justify-content:center}
}