/* QA and fidelity rounds (2026-11-06). Loaded after delight.css. */

/* Round 1: Overview product grid (bento), number weight, focus states, skip link */
.launch{border-top:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.launch-row,.launch-row:hover{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;align-items:start;gap:20px 12px;padding:22px 22px 18px;border:1px solid var(--line);border-radius:20px;background-color:var(--paper);min-height:196px}
.launch-row:hover{border-color:#d4d4ce;box-shadow:0 20px 44px -26px rgba(0,0,0,.3)}
.launch-main{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:16px}
.launch-name{flex-wrap:wrap;row-gap:4px}
.launch-row .open-link{grid-column:2;grid-row:1;background:var(--off)}
.launch-row .open-link:hover{background:var(--accent)}
.launch-row .row-stat{grid-column:1/-1;grid-row:2;flex-direction:row;align-items:flex-end;gap:10px;padding:14px 0 0;border-top:1px solid var(--line);min-height:44px}
.launch-row .row-stat:empty{border-top:0}
.launch-row .row-stat strong{font-size:28px;font-weight:400;line-height:1;letter-spacing:-.02em}
.launch:first-of-type .launch-row:nth-child(even):last-child{grid-column:1/-1}
.launch-row .row-stat span{padding-bottom:3px}
.launch-row .row-stat .spark{margin:0 0 2px auto}
/* Feature tile: the first product spans the row in ink */
.launch:first-of-type .launch-row:first-child{grid-column:1/-1;background-color:var(--ink);border-color:var(--ink);color:#fff;min-height:0}
.launch:first-of-type .launch-row:first-child .launch-tag,.launch:first-of-type .launch-row:first-child .row-stat span{color:rgba(255,255,255,.62)}
.launch:first-of-type .launch-row:first-child .row-stat{border-top-color:rgba(255,255,255,.14)}
.launch:first-of-type .launch-row:first-child .open-link{background:var(--accent);color:var(--ink)}
.launch:first-of-type .launch-row:first-child .spark polyline{stroke:var(--accent)}
.launch:first-of-type .launch-row:first-child .launch-tag{max-width:520px}
.launch:first-of-type .launch-row:first-child:hover{box-shadow:0 24px 50px -24px rgba(0,0,0,.55)}
.launch:first-of-type .launch-row:first-child .status,.launch:first-of-type .launch-row:first-child .hpill{color:#fff}

.sev-cell strong,.health-summary strong,.recon-summary strong,.ops-summary strong{font-weight:400}

a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.launch:first-of-type .launch-row:first-child a:focus-visible{outline-color:var(--accent)}
.skip{position:absolute;left:12px;top:-60px;z-index:90;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:500;transition:top .15s}
.skip:focus{top:12px}

@media (max-width:900px){
  .launch{grid-template-columns:minmax(0,1fr)}
  .launch-row,.launch-row:hover{min-height:0;padding:18px}
  .launch-row .row-stat{grid-column:1/-1;padding-left:0;flex-direction:row;align-items:flex-end}
  .launch-row .row-stat strong{font-size:24px}
  .launch-row .open-link{grid-row:1;grid-column:2}
}

/* Round 2: product page tabs, health rings, issue close motion */
.p-tabs{position:relative;scroll-margin-top:88px;display:flex;gap:4px;margin:48px 0 32px;border-bottom:1px solid var(--line)}
.p-tabs button{position:relative;background:none;border:0;font:inherit;font-size:16px;font-weight:500;color:var(--gray);padding:12px 14px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:10px 10px 0 0;transition:color .15s,background .15s}
.p-tabs button:hover{color:var(--ink);background:var(--off)}
.p-tabs button.on{color:var(--ink)}
.tab-count{font-size:12px;font-weight:600;min-width:20px;height:20px;padding:0 6px;border-radius:100px;background:var(--off);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.p-tabs button.on .tab-count{background:var(--accent)}
.tab-ink{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink);border-radius:2px;transition:transform .32s var(--ease-out),width .32s var(--ease-out)}
[data-panel][hidden]{display:none !important}
[data-panel].two-col,[data-panel].editorial,[data-panel].access-strip{margin-top:0}
[data-panel].access-strip{border-top:0;padding-top:0}
.tab-in{animation:rise .38s var(--ease-out) both}

.avatar.ring{position:relative;--rc:var(--gray-light)}
.avatar.ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(var(--rc) calc(var(--s) * 1%),var(--line) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));animation:ring-in 1s var(--ease-out) both}
.avatar.ring[data-band="healthy"]{--rc:var(--pos)}.avatar.ring[data-band="watch"]{--rc:#d97706}.avatar.ring[data-band="risk"]{--rc:var(--neg)}
.client-row .avatar.ring::after{inset:-4px}
@keyframes ring-in{from{opacity:0;transform:rotate(-90deg) scale(.9)}}

.issue.leaving{overflow:hidden;animation:leave .32s var(--ease-out) forwards}
@keyframes leave{40%{opacity:.4;transform:translateX(40px)}100%{opacity:0;transform:translateX(60px);height:0;padding-top:0;padding-bottom:0;margin:0;border-width:0}}

@media (max-width:900px){.p-tabs{margin:32px -16px 24px;padding:0 8px;overflow-x:auto;scrollbar-width:none}.p-tabs button{white-space:nowrap;padding:12px 12px 14px}}

/* Round 3: calm all-clear states, friendly empty states, disclosure rows, revenue chart focus, consistent section headings */
.ops-clear,.empty{display:flex;align-items:center;gap:14px;margin:24px 0 8px;padding:16px 20px;border-radius:16px;font-size:16px;color:var(--ink);max-width:640px}
.ops-clear{background:#f4fbd6}
.empty{background:var(--off)}
.ops-clear::before,.empty-ico{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;animation:pop .5s var(--ease-spring) .15s both}
.empty-ico{background-color:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.empty span{color:var(--gray)}
.empty strong{font-weight:500;margin-right:6px}

details.recon-more > summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);user-select:none}
details.recon-more > summary::-webkit-details-marker{display:none}
details.recon-more > summary::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--off) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s var(--ease-spring),background-color .15s}
details.recon-more > summary:hover::before{background-color:var(--accent)}
details.recon-more[open] > summary::before{transform:rotate(45deg)}
details.recon-more[open] > :not(summary){animation:rise .35s var(--ease-out) both}

.rc-col:not(.last) .rc-bar{opacity:.3;transition:opacity .2s}
.rc-col:hover .rc-bar{opacity:1}
.rc-col .rc-val{transition:color .2s}
.rc-col:hover .rc-val{color:var(--ink)}
.rc-bar{border-radius:10px 10px 4px 4px}

.view-revenue section > h2.label{font-size:24px;font-weight:400;margin-bottom:6px}

/* Round 4: mobile drawer with a real scrim, profile header wrap, profile form on phones, access meter celebration */
.scrim{position:fixed;inset:0;z-index:39;background:rgba(10,10,10,.38);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
body.drawer-open{overflow:hidden}
@media (max-width:900px){
  .side{transition:transform .32s var(--ease-out)}
  .side.open{box-shadow:24px 0 60px -20px rgba(0,0,0,.35)}
  .side .drawer-close{display:inline-flex}
  .profile-head{align-items:flex-start;gap:16px}
  .profile-head > div{min-width:0}
  .profile-head p{flex-wrap:wrap;row-gap:2px;overflow-wrap:anywhere}
  #prof-form .inline-row{flex-wrap:wrap}
  #prof-form .inline-row input{flex:1 1 100%}
  .avatar{width:60px;height:60px;font-size:26px}
}
.drawer-close{display:none;position:absolute;top:22px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);align-items:center;justify-content:center;cursor:pointer}
.drawer-close::before,.drawer-close::after{content:"";position:absolute;width:14px;height:1.6px;background:var(--ink);border-radius:2px;transform:rotate(45deg)}
.drawer-close::after{transform:rotate(-45deg)}
.meter span{animation:grow 1s var(--ease-out) .2s both;transform-origin:left}
.access-meter-done{animation:meter-glow 1.6s var(--ease-out) .4s both}
@keyframes meter-glow{0%{box-shadow:0 0 0 0 rgba(231,250,72,.9)}100%{box-shadow:0 0 0 14px rgba(231,250,72,0)}}

/* Round 5: search palette, bottom-sheet dialogs on phones, sign-in glow */
.palette{animation:pop .28s var(--ease-spring)}
.palette li{transition:background .12s}
.palette li.sel{background:var(--off);box-shadow:inset 3px 0 0 var(--accent)}
.palette li.pal-empty{display:block;padding:22px 14px;text-align:center}
.palette li.pal-empty.sel{box-shadow:none;background:transparent}
.palette input{caret-color:var(--ink)}
.auth{position:relative;overflow:hidden;isolation:isolate}
.auth::before,.auth::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none}
.auth::before{width:520px;height:520px;left:50%;top:44%;margin:-260px 0 0 -420px;background:radial-gradient(circle,rgba(231,250,72,.32),transparent 70%);animation:drift 26s ease-in-out infinite alternate}
.auth::after{width:420px;height:420px;left:50%;top:56%;margin:-210px 0 0 -20px;background:radial-gradient(circle,rgba(196,181,253,.22),transparent 70%);animation:drift 32s ease-in-out infinite alternate-reverse}
.auth-card{animation:pop .5s var(--ease-spring) both}
@media (max-width:600px){
  .modal:not(.palette-wrap){align-items:flex-end;padding:0}
  .modal:not(.palette-wrap) .card{max-width:none;border-radius:22px 22px 0 0;max-height:88vh;padding:28px 20px calc(24px + env(safe-area-inset-bottom));animation:sheet .34s var(--ease-out)}
  .modal:not(.palette-wrap) .card::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line);margin:-14px auto 18px}
  .palette-wrap{padding:12px}
}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}

/* Cursor light follows the mouse while hovering again (2026-11-06). The hover rules in hub.css, hub-v3.css and
   dark.css set the background shorthand, which reset background-image, so the light vanished on hover and only
   reappeared, frozen, where the mouse left. Urgent waiting rows had the same reset. This keeps the gradient on. */
:root[data-theme] :is(.rcard,.client-health,.ops-setup,.wait-row,.launch-row,.client-row,.check-row):is(:hover,.urgent){background-image:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),rgba(231,250,72,.22),transparent 65%)}

/* "Opens in a new tab" mark that replaces the diagonal arrows (2026-11-06, Haydn's pick): a small solid triangle
   pointing up in the link's own color. On hover it tips over to point right and turns lime. No underline effect. */
.ext-mark{display:inline-block;flex:none;width:9px;height:8px;margin-left:8px;vertical-align:0;background:currentColor;opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 0l9 16H0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 0l9 16H0z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .4s var(--ease-spring),background-color .2s,opacity .2s}
.ext-mark i{display:none}
.has-ext:hover .ext-mark,.has-ext:focus-visible .ext-mark{transform:rotate(90deg);background-color:var(--accent);opacity:1}
/* Buttons and Open pills turn lime themselves on hover, so there the triangle flips but stays ink. */
.btn.has-ext:hover .ext-mark,.open-link.has-ext:hover .ext-mark,.launch:first-of-type .launch-row:first-child .open-link .ext-mark{background-color:currentColor}
/* On white the lime needs a dark edge to read. A mask can't carry a stroke, so in light mode the hovered triangle
   swaps the mask for a drawn lime triangle with an ink outline (still tipping right). Dark and ink surfaces keep the plain lime. */
:root:not([data-theme=dark]) .has-ext:not(.btn):not(.open-link):hover .ext-mark,:root:not([data-theme=dark]) .has-ext:not(.btn):not(.open-link):focus-visible .ext-mark{-webkit-mask:none;mask:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 1.3l7.7 13.6H1.3z' fill='%23e7fa48' stroke='%23111111' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.ext-mark{transition:background-color .2s}.has-ext:hover .ext-mark{transform:none}}

/* "Linked as you@..." read "Linkedas": the access line is a flex row, which drops the space after the status word. */
.access-line .acc{margin-right:.32em}

/* Brand lockup (2026-11-06): the 2POINT wordmark, a hairline, then the AI Hub's own icon (the 2x2 grid with one lime
   tile, the same mark the other apps use on their AI Hub button), as in Client Daily Updates' header. */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.side .brand{margin:0 10px}
.side .brand .logo{margin:0}
.brand-sep{width:1px;height:22px;background:rgba(17,17,17,.2);flex:none}
[data-theme=dark] .brand-sep{background:rgba(255,255,255,.22)}
.hub-icon{width:28px;height:28px;flex:none;transition:transform .35s var(--ease-spring)}
.hub-icon .lime{transition:transform .35s var(--ease-spring);transform-origin:30.75px 30.75px}
.brand:hover .hub-icon{transform:rotate(-6deg)}
.brand:hover .hub-icon .lime{transform:scale(1.15)}
.topbar .hub-icon{width:24px;height:24px}
.topbar .brand-sep{height:18px}
[data-theme=dark] .hub-icon .tile{stroke:rgba(255,255,255,.16);stroke-width:2}
@media (prefers-reduced-motion:reduce){.hub-icon,.hub-icon .lime{transition:none}}