/* triage-profile-v3.css — Ali's Triage Profile mockup v3 (5 Oct 2026), built into the /c/ /m/ /p/ page.
   EVERY selector sits under html.tr-v3, which triage-route.html sets only on a profile route (never /o/), and the two views named below.
   The card markup it styles is drawn by triage-card.js renderTriage(..., { layout: 'profile-v3' }). Two more pages set
   html.tr-v3, each only while its own profile view is open: /landing (after-drop.js, after a photo drop) and /pm-queue
   (a signed-in manager's Triage Profile of one of their jobs, 6 Oct 2026). Every other page that renders the card
   (/, /enterprise, the repair pages, the embed) never gets that layout or this class, so nothing here can reach them.
   Her tokens, sizes and chip styles are copied from the mockup's own <style> blocks. Fonts are the self-hosted files in
   /landing/fonts (Inter 400/500/600, Archivo 500/800, JetBrains Mono 400/500 — /landing/fonts.css plus Archivo 800 below);
   no Google Fonts link. Weights 700/800 of Inter and 700 of JetBrains Mono are not in the repo, so the browser draws
   them from the nearest weight. No blur on any result content. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/landing/fonts/archivo-800-latin.woff2) format('woff2')}

html.tr-v3{
  --void:#000000;--panel:#0A0A0B;--panel-2:#101012;--panel-3:#16161A;--hair:#1F1F23;--hair-lit:#2E2E34;
  --ink:#F2F2F2;--dim:#8A8A90;--faint:#5E5E66;
  --green:#3DD6A0;--green-deep:#00B27E;--mint:#B8F5DC;
  --green-edge:rgba(0,178,126,.38);--green-edge-hi:rgba(0,178,126,.66);--green-wash:rgba(61,214,160,.08);
  --icon-line:#E9E9EC;
  --v3-display:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --v3-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --v3-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
html.tr-v3,html.tr-v3 body{background:var(--void)!important;color:var(--ink)}
html.tr-v3 body{font-family:var(--v3-body)!important;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.tr-v3 :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}

/* the page column: her .wrap (760 / 20px, 32px from 900px) */
html.tr-v3 #triage-share{max-width:760px!important;padding:0 20px 8px!important;margin:0 auto!important;box-sizing:border-box}
html.tr-v3 #triage-route-fallback{max-width:760px!important}
/* the line triage-share.js prints above the card ("fixRAgent · shared Triage Profile"): her pill says it in the hero */
html.tr-v3 #triage-share > div:not([id]):first-child,
html.tr-v3 #tc-sample-banner + div:not([id]){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.tr-v3 #tc-sample-banner{margin:28px 0 0!important;border-radius:14px!important;background:rgba(255,107,0,.06);color:var(--ink)!important}

/* the card itself is not a box on this page: its sections are */
html.tr-v3 .tc-card.tc-v3{max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0;color:var(--ink);font-family:var(--v3-body)}
html.tr-v3 .tc-v3 p{margin:0}
html.tr-v3 .tc-v3 .tc-failed{margin-top:24px;background:rgba(255,178,58,.08);border-color:rgba(255,178,58,.4);color:#FFE2B0}

/* hero */
html.tr-v3 .tc-v3 .v3-hero{padding:44px 0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
html.tr-v3 .tc-v3 .v3-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--hair-lit);background:rgba(255,255,255,.03);font-size:12.5px;color:var(--dim)}
html.tr-v3 .tc-v3 .v3-pill i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
html.tr-v3 .tc-v3 .v3-h1{margin:0;font:500 40px/1.06 var(--v3-display);letter-spacing:-1.2px;text-wrap:balance;color:var(--ink);overflow-wrap:anywhere}
html.tr-v3 .tc-v3 .v3-grad{background:linear-gradient(90deg,var(--green-deep),var(--green) 45%,var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
html.tr-v3 .tc-v3 .v3-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
html.tr-v3 .tc-v3 .v3-trade{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgba(10,10,11,.72);border:1px solid rgba(255,255,255,.18);font:600 13px var(--v3-body);color:var(--ink)}
html.tr-v3 .tc-v3 .v3-trade svg{color:var(--dim);flex:none}
html.tr-v3 .tc-v3 .v3-caption{margin:-6px 0 0;font:12px/1.55 var(--v3-mono);color:var(--dim)}
html.tr-v3 .tc-v3 .v3-lede{margin:0 0 4px;font-size:16.5px;line-height:1.6;color:#B4B4BA;max-width:56ch}
html.tr-v3 .tc-v3 .v3-prose{font-size:14px;line-height:1.6;color:#A3A3AA;max-width:56ch}
html.tr-v3 .tc-v3 .v3-plain{padding:14px 16px;border-radius:14px;border:1px solid var(--hair-lit);background:var(--panel-2);font-size:14px;line-height:1.6;color:#A3A3AA}

/* the urgency chip: v3 status light (her handoff 2:57 PM). Not a control: no pointer, no hover, not selectable. */
html.tr-v3 .tc-v3 .v3-u{--lit:#5AA8FF;--deep:#1A5BB0;display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 8px;border-radius:999px;
  font:800 13px var(--v3-body);letter-spacing:.6px;color:#fff;white-space:nowrap;text-transform:uppercase;cursor:default;user-select:none;-webkit-user-select:none;
  border:2.5px solid transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 55%) padding-box,linear-gradient(#0e0e10,#0e0e10) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--lit) 70%,#fff) 0%,var(--lit) 30%,var(--deep) 100%) border-box;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.55),0 3px 8px -3px rgba(0,0,0,.8)}
html.tr-v3 .tc-v3 .v3-u::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff 0 8%,var(--lit) 30%,var(--deep) 90%);
  box-shadow:0 0 0 1.5px #0a0a0a,0 0 0 2.5px #55575d,0 0 10px 1px var(--lit)}
html.tr-v3 .tc-v3 .v3-u-e{--lit:#FF5A4E;--deep:#B8241C}
html.tr-v3 .tc-v3 .v3-u-t{--lit:#FFB23A;--deep:#9A5A00}
html.tr-v3 .tc-v3 .v3-u-w{--lit:#5AA8FF;--deep:#1A5BB0}
html.tr-v3 .tc-v3 .v3-u-h{--lit:#3EDB86;--deep:#0F7A42}

/* the answer rows */
html.tr-v3 .tc-v3 .v3-answers{margin-top:30px;display:flex;flex-direction:column;gap:12px}
html.tr-v3 .tc-v3 .v3-ans{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;padding:18px;border-radius:16px;border:1px solid var(--hair);background:linear-gradient(180deg,#141418,#0c0c0e 80%)}
html.tr-v3 .tc-v3 .v3-ans-body{display:flex;flex-direction:column;gap:8px;min-width:0}
html.tr-v3 .tc-v3 .v3-ans-body p{margin:0;color:#A3A3AA;font-size:14.5px;line-height:1.55}
html.tr-v3 .tc-v3 .v3-big{font:600 19px/1.3 var(--v3-body);color:var(--ink)}
html.tr-v3 .tc-v3 .v3-kick{font:700 10.5px var(--v3-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--dim)}
html.tr-v3 .tc-v3 .v3-kick-g{color:var(--green)}
html.tr-v3 .tc-v3 .v3-glass{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;position:relative;color:var(--icon-line);background:radial-gradient(120% 120% at 30% 20%,#2a2a31 0%,#121215 55%,#0b0b0d 100%);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -18px rgba(61,214,160,.35)}
/* her glow under the icon tile (a soft ellipse; decoration, not result content) */
html.tr-v3 .tc-v3 .v3-glass::after{content:"";position:absolute;inset:auto 14px 8px;height:10px;border-radius:50%;background:radial-gradient(ellipse,rgba(61,214,160,.32),transparent 70%)}
html.tr-v3 .tc-v3 .v3-glass svg{position:relative;z-index:1}
html.tr-v3 .tc-v3 .v3-glass-sm{width:48px;height:48px;border-radius:13px;box-shadow:0 12px 26px -14px rgba(61,214,160,.4)}
html.tr-v3 .tc-v3 .v3-glass-sm::after{inset:auto 10px 5px;height:7px}
html.tr-v3 .tc-v3 .v3-note{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;margin:0;border:1px solid var(--hair-lit);border-radius:14px;background:var(--panel-2);padding:14px 16px;color:var(--dim);font-size:14px;line-height:1.6}
html.tr-v3 .tc-v3 .v3-note b{color:var(--ink);font-weight:600}
html.tr-v3 .tc-v3 .v3-note svg{margin-top:2px}
html.tr-v3 .tc-v3 .v3-note-red{border-color:rgba(255,123,114,.35)}
html.tr-v3 .tc-v3 .v3-note-red svg{color:#FF7B72}
html.tr-v3 .tc-v3 .v3-note-amber{border-color:rgba(255,178,58,.38)}
html.tr-v3 .tc-v3 .v3-note-amber svg{color:#FFB23A}
html.tr-v3 .tc-v3 .tc-unsettled.v3-note{display:block;color:#FFE2B0;background:rgba(255,178,58,.06)}
html.tr-v3 .tc-v3 .v3-sure3{display:flex;gap:8px}
html.tr-v3 .tc-v3 .v3-sure3 i{width:28px;height:28px;border-radius:999px;border:1px solid var(--hair-lit);background:transparent;display:block}
html.tr-v3 .tc-v3 .v3-sure3 i.on{border-color:rgba(61,214,160,.45);background:var(--green-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DD6A0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/16px no-repeat}
html.tr-v3 .tc-v3 .v3-ans-body .v3-sure-word{color:#A3A3AA;font-weight:400}
html.tr-v3 .tc-v3 .v3-ans-body .v3-mono{font:11.5px/1.6 var(--v3-mono);color:var(--faint);padding:0;border:0;background:none;border-radius:0}
html.tr-v3 .tc-v3 .tc-gate-lead{color:var(--ink)}

/* homeowner buttons and capture, if a surface ever draws them here */
html.tr-v3 .tc-v3 .v3-acts{margin-top:16px}
html.tr-v3 .tc-v3 .v3-acts .tc-btn,html.tr-v3 .tc-v3 .v3-capture .tc-btn{border-radius:999px;border:1px solid var(--green-edge);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));color:var(--ink);font:600 14.5px var(--v3-body)}
html.tr-v3 .tc-v3 .v3-capture .tc-capture{background:var(--panel-2);border-color:var(--hair);color:var(--ink)}

/* sections: her seam and centred head */
html.tr-v3 .tc-v3 .v3-sec{padding-top:72px}
html.tr-v3 .v3-seam{position:relative;border-top:1px solid var(--hair);margin:0 0 40px}
html.tr-v3 .v3-seam::before{content:"";position:absolute;left:50%;top:-1px;width:min(520px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(61,214,160,.55),transparent)}
html.tr-v3 .v3-seam::after{content:"";position:absolute;left:50%;top:0;width:min(520px,80%);height:90px;transform:translateX(-50%);background:radial-gradient(ellipse at top,rgba(61,214,160,.10),transparent 70%);pointer-events:none}
html.tr-v3 .tc-v3 .v3-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:720px;margin:0 auto 28px}
html.tr-v3 .tc-v3 .v3-head h2{margin:0;font:500 30px/1.12 var(--v3-display);letter-spacing:-.6px;text-wrap:balance;color:var(--ink)}
html.tr-v3 .tc-v3 .v3-head p{margin:0;font-size:16px;line-height:1.6;color:var(--dim);max-width:56ch}

/* what to say: her two tab buttons, the bubble, Copy */
html.tr-v3 .tc-v3 .v3-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 18px}
html.tr-v3 .tc-v3 .v3-tabs .v3-t2{flex:0 1 auto;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--dim);font:600 13.5px var(--v3-body);cursor:pointer}
html.tr-v3 .tc-v3 .v3-tabs .v3-t2[aria-pressed="true"]{color:var(--ink);border-color:var(--green-edge-hi);background:var(--green-wash)}
html.tr-v3 .tc-v3 .v3-bubble-wrap{display:flex;flex-direction:column;gap:10px}
html.tr-v3 .tc-v3 .v3-bubble{border-radius:20px 20px 20px 6px;background:linear-gradient(180deg,#1b2622,#121a17);border:1px solid rgba(61,214,160,.28);padding:18px}
html.tr-v3 .tc-v3 .v3-bubble .tc-say{margin:0;padding:0;border:0;border-radius:0;background:none;font:400 17px/1.6 var(--v3-body);color:#F4FBF8}
html.tr-v3 .tc-v3 .v3-bubble-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font:11.5px var(--v3-mono);color:var(--dim)}
html.tr-v3 .tc-v3 .v3-copy{flex:none;background:none;border:1px solid var(--hair-lit);border-radius:999px;color:var(--ink);font:600 13px var(--v3-body);padding:8px 16px;min-height:40px;cursor:pointer}

/* share + was this right? */
html.tr-v3 .tc-v3 .v3-share{margin:0;border:1px solid var(--hair);border-radius:16px;background:linear-gradient(180deg,#141418,#0c0c0e 80%);padding:20px;display:flex;flex-direction:column;gap:14px}
html.tr-v3 .tc-v3 .v3-share-top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
html.tr-v3 .tc-v3 .v3-share-text{display:flex;flex-direction:column;gap:14px;min-width:0}
html.tr-v3 .tc-v3 .v3-share h3{margin:0;font:600 16px var(--v3-body);color:var(--ink)}
html.tr-v3 .tc-v3 .v3-share p{margin:0;color:var(--dim);font-size:14px}
html.tr-v3 .tc-v3 .v3-qr{flex:0 0 auto;width:88px;max-width:28vw;padding:5px;border-radius:10px;border:0;background:#fff}
html.tr-v3 .tc-v3 .v3-linkbox{display:flex;align-items:center;gap:10px;border:1px solid var(--hair-lit);border-radius:14px;background:var(--panel-3);padding:6px 6px 6px 14px}
html.tr-v3 .tc-v3 .v3-linkbox .tc-link{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal;font:13px var(--v3-mono);color:var(--ink)}
html.tr-v3 .tc-v3 .v3-fb{margin:0;padding-top:14px;border-top:1px solid var(--hair)}
html.tr-v3 .tc-v3 .v3-fb .tc-grade-ask{gap:10px}
html.tr-v3 .tc-v3 .v3-fb .tc-grade-q{font:600 14.5px var(--v3-body);color:var(--ink);margin-right:4px}
html.tr-v3 .tc-v3 .v3-fb .tc-grade-btn{min-height:44px;min-width:0;padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));color:var(--ink);font:600 14px var(--v3-body);cursor:pointer}
html.tr-v3 .tc-v3 .v3-fb .tc-grade-btn:disabled{opacity:.55;cursor:default}
html.tr-v3 .tc-v3 .v3-fb .tc-grade-thanks{color:var(--ink)}

/* "Send this to your landlord or manager" (triage-route.html), after Share, in her share-box look */
html.tr-v3 #tr-send{max-width:none;margin:12px 0 0;padding:20px;border:1px solid var(--hair);border-radius:16px;background:linear-gradient(180deg,#141418,#0c0c0e 80%);display:flex;flex-direction:column;gap:6px}
html.tr-v3 #tr-send .tr-send-q{margin:0;font:600 16px/1.35 var(--v3-body);color:var(--ink)}
html.tr-v3 #tr-send .tr-send-sub{margin:0 0 8px;font-size:14px;color:var(--dim)}
html.tr-v3 #tr-send .tr-send-btn{min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));color:var(--ink);font:600 14px var(--v3-body)}

/* the doors triage-share.js draws under the profile (recruit / portfolio), in her section look */
html.tr-v3 #triage-share .rc,html.tr-v3 #triage-share .pmd{margin:72px 0 0;padding-top:40px;border-top:1px solid var(--hair)}
html.tr-v3 #triage-share .rc-h,html.tr-v3 #triage-share .pmd-h{font:500 24px/1.2 var(--v3-display);letter-spacing:-.4px;color:var(--ink)}
html.tr-v3 #triage-share .rc-p,html.tr-v3 #triage-share .pmd-p{font-size:15px;color:var(--dim)}
html.tr-v3 #triage-share .rc-cta a,html.tr-v3 #triage-share .pmd-btn{border-radius:999px!important;font:600 15px var(--v3-body)}
html.tr-v3 #triage-share .rc-cta .rc-big,html.tr-v3 #triage-share .pmd-btn{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))!important;border:1px solid var(--green-edge)!important;box-shadow:none!important;color:var(--ink)!important}
html.tr-v3 #triage-share .rc-cta .rc-api{background:transparent;border:1px solid rgba(255,255,255,.16)}

/* closing: "Triage the photo. Route the fix." */
html.tr-v3 .v3-close{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;padding:72px 0 40px}
html.tr-v3 .v3-close h2{margin:0;font:500 38px/1.04 var(--v3-display);letter-spacing:-1px;color:var(--ink)}
html.tr-v3 .v3-close .v3-soft{color:var(--dim)}
html.tr-v3 .v3-btns{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}
html.tr-v3 .v3-btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;border:1px solid var(--green-edge);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));color:var(--ink);font:600 14.5px var(--v3-body);text-decoration:none;cursor:pointer}
html.tr-v3 .v3-btn2:hover{border-color:var(--green-edge-hi)}
html.tr-v3 .v3-tlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--dim);font:500 14.5px var(--v3-body);text-decoration:none}
html.tr-v3 .v3-tlink::after{content:"\203A";font-size:17px;line-height:1}
html.tr-v3 .v3-tlink:hover{color:var(--ink)}
/* the fine print triage-share.js ends with */
html.tr-v3 #triage-share > p:last-child{margin:0 auto!important;padding:0 0 40px;text-align:center;font-size:12.5px!important;line-height:1.55!important;color:var(--dim)!important;max-width:60ch}

/* the strip under the site bar ("Triaged by fixRAgent", and its two links on a consumer card) */
html.tr-v3 #tr-top{background:var(--void)!important;border-bottom:1px solid var(--hair)!important;color:var(--dim)!important;font:500 12.5px var(--v3-body)!important;padding:10px 14px!important}
html.tr-v3 #tr-top .tr-top-by{flex:1 1 100%;font-size:12.5px!important;color:var(--dim)!important}
html.tr-v3 #tr-top a{min-height:44px!important;padding:0 18px!important;border-radius:999px!important;font:600 14px var(--v3-body)!important}
html.tr-v3 #tr-top a.tr-top-big{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))!important;border:1px solid var(--green-edge)!important;box-shadow:none!important;color:var(--ink)!important}
html.tr-v3 #tr-top a.tr-top-api{background:transparent!important;border:1px solid rgba(255,255,255,.16)!important}

@media (min-width:900px){
  html.tr-v3 #triage-share{padding:0 32px 8px!important}
  html.tr-v3 .tc-v3 .v3-h1{font-size:56px}
  html.tr-v3 .tc-v3 .v3-hero{padding-top:72px}
  html.tr-v3 .tc-v3 .v3-head h2{font-size:44px}
  html.tr-v3 .tc-v3 .v3-sec{padding-top:128px}
  html.tr-v3 .v3-close h2{font-size:64px}
  html.tr-v3 .v3-btns{flex-direction:row;align-items:center;gap:18px}
  html.tr-v3 .tc-v3 .v3-glass{width:84px;height:84px;border-radius:22px}
  html.tr-v3 .tc-v3 .v3-glass.v3-glass-sm{width:48px;height:48px;border-radius:13px}
  html.tr-v3 #triage-share .rc,html.tr-v3 #triage-share .pmd{margin-top:128px}
}
@media (max-width:420px){
  html.tr-v3 .tc-v3 .v3-ans{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 14px}
  html.tr-v3 .tc-v3 .v3-glass-sm{width:40px;height:40px;border-radius:11px}
  html.tr-v3 .tc-v3 .v3-u{font-size:12.5px;letter-spacing:.4px}
}
@media (prefers-reduced-motion:reduce){html.tr-v3 *{transition:none!important;animation:none!important}}
