of prose. It said which of four routes it had taken, how many fields it found and what to do next, all in a sentence, and when it hit the one failure a person can actually fix — a PDF whose field names it does not recognise — it printed the names to the browser console and asked them to press F12. So the useful part of the output was not on the page at all, and the rest was a paragraph to re-read every time. What follows is that same information as things on screen: which stage the read is at, what came out of the file, and what did not. */ .acord-progress{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .acord-step{ display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px; border:0.5px solid var(--border2);background:var(--glass-card); font-size:10px;font-weight:600;color:var(--text3);white-space:nowrap; } .acord-step i{font-size:12px} .acord-step.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .acord-step.done{color:var(--success);border-color:var(--success)} .acord-step.skipped{opacity:.45} /* The spinner only ever rides on the active step, so it is scoped to it — a stopped page with a spinning icon reads as still working. */ .acord-step.active i.ti-loader-2{animation:acord-spin 1s linear infinite} @keyframes acord-spin{to{transform:rotate(360deg)}} .acord-result{margin-top:12px;display:flex;flex-direction:column;gap:10px} .acord-res-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .acord-badge{ display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px; font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; background:var(--accent-soft);color:var(--accent);border:0.5px solid var(--border2); } .acord-badge.ai{background:rgba(160,95,208,0.14);color:var(--pal-purple);border-color:rgba(160,95,208,0.3)} .acord-badge.warn{background:rgba(235,148,71,0.14);color:var(--pal-orange);border-color:rgba(235,148,71,0.3)} .acord-res-file{font-size:11px;color:var(--text3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acord-res-count{margin-left:auto;font-size:11px;color:var(--text2);font-weight:600;white-space:nowrap} .acord-group{border:0.5px solid var(--border2);border-radius:12px;overflow:hidden;background:var(--glass-card)} .acord-group-t{ padding:7px 12px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--text3);border-bottom:0.5px solid var(--border3); } /* Two columns where there is room, one where there is not. A label and its value must never be split across a wrap, which is why the pair is the grid item rather than each of them being one. */ .acord-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border3)} .acord-kv > div{background:var(--glass-card);padding:8px 12px;min-width:0} .acord-k{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3)} .acord-v{font-size:12px;color:var(--text);margin-top:2px;word-break:break-word} .acord-v.empty{color:var(--text3);font-style:italic} .acord-tbl{width:100%;border-collapse:collapse;font-size:11px} .acord-tbl th{ text-align:left;padding:6px 10px;font-size:9px;font-weight:700;text-transform:uppercase; letter-spacing:.05em;color:var(--text3);border-bottom:0.5px solid var(--border3);white-space:nowrap; } .acord-tbl td{padding:6px 10px;border-bottom:0.5px solid var(--border3);color:var(--text2)} .acord-tbl tr:last-child td{border-bottom:none} .acord-tbl-wrap{overflow-x:auto} /* The list of field names this app did not recognise. It is the one failure a person can act on without AI — send the names and the matcher gets taught — so it belongs on the page with a button that copies it, not in the console behind a keyboard shortcut most people do not know. */ .acord-unknown{border:0.5px solid rgba(235,148,71,0.35);border-radius:12px;overflow:hidden;background:rgba(235,148,71,0.06)} /* The teaching table. The value column is what makes this answerable: the field name is meaningless by design, and the value beside it is the whole reason a person can say what the box is without opening the PDF. It gets the room, and it truncates rather than wrapping so a long nature-of-business cannot push the picker off the edge — the full text is on the title. */ .acord-map-wrap{max-height:340px;overflow:auto} .acord-map-tbl{width:100%;border-collapse:collapse;font-size:11px} .acord-map-tbl th{ position:sticky;top:0;z-index:1;background:var(--glass-solid,var(--bg)); text-align:left;padding:6px 10px;font-size:9px;font-weight:700;text-transform:uppercase; letter-spacing:.05em;color:var(--text3);border-bottom:0.5px solid var(--border3);white-space:nowrap; } .acord-map-tbl td{padding:5px 10px;border-bottom:0.5px solid var(--border3);vertical-align:middle} .acord-map-tbl tr:last-child td{border-bottom:none} .acord-map-tbl code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--text2);white-space:nowrap} .acord-map-val{ color:var(--text);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .acord-map-pick{ font-size:11px;padding:4px 7px;border-radius:6px;border:0.5px solid var(--border); background:var(--input-bg);color:var(--text);font-family:inherit;outline:none;min-width:150px;max-width:100%; } .acord-map-pick:focus{border-color:var(--accent)} .acord-res-actions{display:flex;gap:8px;flex-wrap:wrap} /* Full-size lightbox: the manual's screenshots, and the rules / backup panels */ .tut-zoom-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.82);display:none;align-items:center;justify-content:center;padding:40px;cursor:zoom-out;backdrop-filter:blur(4px)} .tut-zoom-overlay.open{display:flex} .tut-zoom-overlay img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.5)} .tut-zoom-close{position:absolute;top:20px;right:24px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer} .wm-topbar-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.02em;flex:1} .wm-action-btn{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:0.5px solid var(--border2);border-radius:var(--r-lg);padding:5px 12px;cursor:pointer;font-family:inherit;transition:all .15s} .wm-action-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .wm-action-btn.primary{color:#fff;background:var(--accent);border-color:transparent} .wm-action-btn.primary:hover{filter:brightness(1.12)} .wm-search{display:flex;align-items:center;gap:8px;background:var(--glass3);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:6px 12px;font-size:12px;color:var(--text);min-width:200px} .wm-search input{background:none;border:none;outline:none;font-size:12px;color:var(--text);font-family:inherit;width:100%} .wm-search input::placeholder{color:var(--text3)} /* ── (v5.0.9.4) Weekly Notes toolbar: expand-all + language switch ── */ .wm-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto} .wm-tool-btn{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700; padding:5px 10px;border-radius:var(--r-lg);cursor:pointer;font-family:inherit;white-space:nowrap; background:var(--glass3);color:var(--text2);border:0.5px solid var(--border2);transition:all .15s} .wm-tool-btn:hover{border-color:var(--accent);color:var(--accent)} .wm-lang{display:inline-flex;background:var(--glass3);border:0.5px solid var(--border2);border-radius:var(--r-lg);overflow:hidden} .wm-lang-btn{font-size:10px;font-weight:700;padding:5px 10px;border:none;cursor:pointer; font-family:inherit;background:transparent;color:var(--text3);transition:all .15s} .wm-lang-btn:hover{color:var(--accent)} .wm-lang-btn.active{background:var(--accent);color:#fff} @media (max-width:760px){ .wm-tools{width:100%;justify-content:flex-end} } .wm-search-count{flex:0 0 auto;font-size:10px;font-weight:700;color:var(--accent);white-space:nowrap;padding-left:2px} mark.wm-hl{background:rgba(255,204,0,0.45);color:inherit;border-radius:3px;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone} .wm-filters{display:flex;flex-direction:column;gap:0;border-bottom:0.5px solid var(--border3);background:rgba(130,182,242,0.04)} .wm-filter-row{display:flex;align-items:center;gap:10px;padding:9px 20px;flex-wrap:wrap;border-bottom:0.5px solid var(--border3)} .wm-filter-row:last-child{border-bottom:none} .wm-filter-row+.wm-filter-row{border-top:0.5px solid var(--border3)} .wm-filter-trigger{display:flex;align-items:center;gap:8px;padding:10px 20px;cursor:pointer;user-select:none;transition:background .12s} .wm-filter-trigger:hover{background:rgba(130,182,242,0.07)} .wm-filter-label{font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;min-width:76px;display:flex;align-items:center;gap:4px} .wm-filter-summary{font-size:10px;font-weight:600;color:var(--accent);background:rgba(var(--brand-blue-rgb),0.08);border:0.5px solid rgba(var(--brand-blue-rgb),0.20);border-radius:var(--r-lg);padding:2px 9px;margin-left:4px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wm-filter-summary.neutral{color:var(--text3);background:rgba(130,182,242,0.09);border-color:var(--border)} .wm-filter-spacer{flex:1} .wm-filter-caret{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--text3);flex-shrink:0} .wm-filter-caret .ti{font-size:11px;transition:transform .28s var(--ease-out);display:block} .wm-filter-caret.open .ti{transform:rotate(-180deg)} .wm-filter-body{overflow:hidden;transition:max-height .32s var(--ease-out),opacity .22s ease} .wm-filter-chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:4px 20px 12px} .wm-chip{font-size:10px;font-weight:700;padding:4px 10px;border-radius:var(--r-lg);cursor:pointer;border:0.5px solid var(--border);background:rgba(130,182,242,0.08);color:var(--text3);transition:all .15s;letter-spacing:.02em;text-transform:uppercase} .wm-chip:hover{background:rgba(130,182,242,0.18);color:var(--text)} .wm-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)} .wm-body{max-width:var(--col-std);margin:0 auto;padding:22px 20px 40px;display:flex;flex-direction:column;gap:14px} .wm-entry{background:var(--glass-card);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:0.5px solid var(--border);border-radius:18px;padding:0;overflow:hidden;transition:opacity .2s} .wm-entry.hidden{display:none} .wm-entry-head{display:flex;align-items:center;gap:13px;padding:16px 20px;cursor:pointer;user-select:none} .wm-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:-.3px;box-shadow:0 0 0 3px var(--glass2)} .wm-person-info{flex:1;min-width:0} .wm-person-name{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.01em} .wm-date{font-size:11px;color:var(--text3);margin-top:2px;font-weight:500} .wm-expand-btn{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);border:0.5px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--accent);transition:transform .26s,background .12s;flex-shrink:0} .wm-entry-head:hover .wm-expand-btn{background:rgba(130,182,242,0.24)} .wm-expand-btn .ti{font-size:12px;transition:transform .26s var(--ease-out)} .wm-entry.open .wm-expand-btn .ti{transform:rotate(-180deg)} .wm-body-inner{display:none;padding:2px 20px 18px;flex-direction:column;gap:10px} .wm-entry.open .wm-body-inner{display:flex} .wm-entry.open .wm-entry-head{border-bottom:0.5px solid var(--border3);padding-bottom:14px} .wm-section{ border-radius:14px; overflow:hidden; position:relative; background:var(--glass-card); backdrop-filter:var(--blur2); -webkit-backdrop-filter:var(--blur2); border:0.5px solid var(--border); box-shadow:var(--shadow); transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out); } .wm-section::before{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(77,143,230,0.08) 0%,rgba(0,100,200,0.03) 40%,transparent 80%);pointer-events:none} .wm-section > *{position:relative} .wm-section:hover{border-color:rgba(77,143,230,0.35);box-shadow:var(--shadow-lg)} .wm-section-head{display:flex;align-items:center;gap:9px;padding:10px 13px} .wm-tag{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-lg);color:#fff;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,0.18)} .wm-tag[style*="--tag"]{background:color-mix(in srgb,var(--tag) 16%,transparent);color:var(--tag);border:0.5px solid color-mix(in srgb,var(--tag) 42%,transparent);box-shadow:none} .wm-section-title{font-size:12px;font-weight:700;color:var(--text);flex:1} .wm-section-body{padding:0 13px 12px} .wm-section-body p{font-size:12px;color:var(--text2);line-height:1.7;margin-bottom:6px} .wm-section-body p:last-child{margin-bottom:0} .wm-section-body ul{margin:2px 0 4px 16px} .wm-section-body li{font-size:12px;color:var(--text2);line-height:1.7;margin-bottom:4px} .wm-section-body strong{color:var(--text);font-weight:700} .wm-section-body code{font-size:11px;background:rgba(130,182,242,0.16);color:var(--accent);padding:1px 6px;border-radius:5px;font-family:var(--font-mono)} .wm-tag-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 20px 14px} .wm-tag-chips .wm-tag{opacity:.9;transition:opacity .15s} .wm-entry:hover .wm-tag-chips .wm-tag{opacity:1} .sec-head{display:flex;align-items:center;gap:8px;margin:28px 0 12px;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--text2);text-transform:uppercase;cursor:pointer;user-select:none} .sec-head > i{font-size:14px;color:var(--accent);flex-shrink:0} .sec-head-txt{white-space:nowrap} .sec-head-line{flex:1;height:0.5px;background:linear-gradient(90deg,var(--border),transparent);align-self:center;min-width:12px} .sec-caret{width:22px;height:22px;border-radius:50%;background:rgba(130,182,242,0.10);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);transition:background .15s,color .15s,transform var(--dur-fast) var(--ease-out);flex-shrink:0;padding:0;font-family:inherit;outline:none} .sec-caret:hover{background:rgba(130,182,242,0.22);color:var(--text)} .sec-caret .ti{font-size:12px;transition:transform .32s var(--ease-out);display:block;line-height:1} .sec-caret.open .ti{transform:rotate(-180deg)} .sec-body{overflow:hidden;transition:max-height .38s var(--ease-out),opacity .26s ease} /* ── CARD ── */ .avp-card{ background:var(--glass-card); backdrop-filter:var(--blur2);-webkit-backdrop-filter:var(--blur2); border:0.5px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--avp-shadow); padding:16px 18px;margin-bottom:8px; transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out),transform .25s var(--ease-out); position:relative;overflow:hidden; } .avp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(77,143,230,0.08) 0%,rgba(0,100,200,0.03) 40%,transparent 80%);pointer-events:none} .avp-card:hover,.avp-card:focus-within{border-color:rgba(77,143,230,0.45);box-shadow:var(--avp-shadow-lg);transform:translateY(-1px)} @media(prefers-reduced-motion:reduce){.avp-card{transition:border-color .15s,box-shadow .15s}.avp-card:hover,.avp-card:focus-within{transform:none}} /* The "needs attention" ring is drawn inside the card, not spread outside it. An outward spread on an element that also has backdrop-filter paints as a rectangle in Chromium: the amber ran straight across the corner instead of following it, so Risk Description, Experience Mod, Yes/No and Loss History — the four sections that start incomplete — each showed a square edge cutting their rounded corner. An inset shadow is clipped to the padding box and cannot escape the radius. */ .avp-card.incomplete{ border-color:var(--warn-border)!important; box-shadow:inset 0 0 0 2px var(--warn-soft),var(--avp-shadow)!important; } .avp-card.joes-active{background:var(--warn-soft)!important;border-color:var(--warn-border)!important} /* ── FIELD ── */ .avp-field{display:flex;flex-direction:column;gap:6px} /* Real spacing between top-level questions in a card, not the accidental 8-18px a note or sub-field happening to be open used to leave behind (and the ~0px a plain field without one got). Scoped to direct children only — a nested .avp-field like #amandaikari-field already gets its own margin from .avp-sub-field and must not double up on this one too. */ .avp-card>.avp-field:not(:last-child){margin-bottom:16px} .avp-field label{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:5px} .req-dot{width:4px;height:4px;border-radius:50%;background:var(--danger);flex-shrink:0} .avp-field input,.avp-field select,.avp-field textarea{ font-size:13px;padding:9px 12px; border:0.5px solid var(--border2);border-radius:var(--r-sm); background:var(--input-bg); color:var(--text); width:100%;outline:none;font-family:inherit; transition:border-color .2s var(--ease-out),background .2s var(--ease-out),box-shadow .2s var(--ease-out); min-height:44px; box-shadow:inset 0 1px 3px rgba(0,0,0,0.08); } .avp-field input::placeholder,.avp-field textarea::placeholder{color:var(--text3)} .avp-field input:focus,.avp-field select:focus,.avp-field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft),inset 0 1px 3px rgba(0,0,0,0.08); } /* Rounded to match .contact-toggle (the Yes/No pill used throughout this same form) rather than the sharper 10px every other input/textarea uses — selects sat visibly more square than the toggle buttons next to them. */ .avp-field select{cursor:pointer;appearance:none;border-radius:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23163a66' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;background-color:var(--input-bg)} [data-theme="dark"] .avp-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234d8fe6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")} .avp-field select option{background:var(--select-opt-bg);color:var(--text)} select option{background:var(--select-opt-bg);color:var(--text)} .avp-field textarea{resize:vertical;min-height:72px} /* ── GRID (mobile-first: 1 col; ≥640px: multi-col) ── */ .g2{display:grid;grid-template-columns:1fr;gap:12px} .g3{display:grid;grid-template-columns:1fr;gap:10px} .g4{display:grid;grid-template-columns:1fr;gap:10px} @media(min-width:640px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:1fr 1fr 1fr} .g4{grid-template-columns:2fr 1fr 1fr 1fr} } /* ── The address row ────────────────────────────────────────────────────── ZIP, City, State used to share .g3's three equal thirds, and a box sized for five digits took the same width as a box holding "Fort Lauderdale". The empty space read as a field somebody had forgotten to finish. Sized to what each one holds instead: ZIP is exactly five characters and State is two, so both are given a fixed track and City takes what is left. Not .g3's business — that grid is shared with the contact row, where Name, Phone and Email really are three comparable things. */ /* Flex, not grid, because the city is the one box here that should be as wide as what is in it — and a grid track cannot be sized by an input's value. cityFit() measures the text in the face actually rendering it and writes --city-w; the track is whatever that says. Stacked below 640px, where every box is full width and none of this applies. */ .addr-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start} .addr-grid > *{flex:1 1 100%;min-width:0} .addr-grid .city-box{width:100%} @media(min-width:640px){ .addr-grid > *{flex:0 0 auto} /* A ZIP is five digits and a spinner. It had 120px once — wider than the state select beside it and wide enough for a sentence. */ .addr-zip-wrap{width:96px} /* Fits "State", which is the widest thing it ever shows: the two-letter codes it holds afterwards are narrower than its own placeholder. */ .addr-grid select{width:96px} .addr-grid .city-box{ width:var(--city-w,150px); transition:width .16s var(--ease-out); } } @media(prefers-reduced-motion:reduce){.addr-grid .city-box{transition:none}} /* Grows with the address rather than scrolling it out of sight. A street address is the one field here with no predictable length — a suite, a building name and a road can run past any single line — and the old input scrolled horizontally, so the beginning of what you had just typed disappeared as you typed the end of it. Capped so one pasted block cannot push the rest of the form off the screen. Empty, it is exactly as tall as the ZIP, city and state boxes under it: min-height is the same 44px every control in this form stands at, and the padding is opened from 9px to 11px so the single line sits on their centre line. It was 37px before — auto-grown from a min-height of 0 — which left the row below it visibly taller than the box above it. Equalised upward, not down: 44px is the app's control height everywhere and the floor of a comfortable touch target, so the three boxes were not the ones to change. 11 and not 12, because the 0.5px border is used as 1px a side: at 12 the grown height came to 45 and overshot the row by the pixel it was supposed to match. */ .avp-field textarea.addr-street{ resize:none;min-height:44px;line-height:1.45; padding-top:11px;padding-bottom:11px; max-height:132px;overflow-y:auto} /* ── TOGGLE ── */ .avp-toggle{display:flex;border:0.5px solid var(--border);border-radius:var(--r-sm);overflow:hidden;width:fit-content;background:rgba(130,182,242,0.12)} .avp-tog{padding:5px 14px;font-size:11px;font-weight:500;cursor:pointer;background:transparent;color:var(--text2);border:none;font-family:inherit;letter-spacing:.01em;min-height:32px} .avp-tog:not(:last-child){border-right:0.5px solid var(--border)} @keyframes togSettle{0%{transform:scale(.92)}60%{transform:scale(1.03)}100%{transform:scale(1)}} @media(prefers-reduced-motion:reduce){.avp-tog.yes.active,.avp-tog.no.active{animation:none}} /* ── Contact section: enhanced Yes/No toggle ── */ .contact-toggle{ border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,0.10); } .contact-tog{ position:relative;overflow:hidden; padding:8px 22px;font-size:12px;font-weight:600; display:inline-flex;align-items:center;gap:6px; } /* Ripple element */ .contact-ripple{ position:absolute;border-radius:50%;pointer-events:none; transform:scale(0);animation:contact-ripple-anim .5s ease-out forwards; } @keyframes contact-ripple-anim{ to{transform:scale(4);opacity:0} } /* ── NOTE ── */ .avp-note{ font-size:12px;color:#7a4700; background:rgba(200,110,0,0.12); border-radius:var(--r-sm);padding:8px 12px;margin-top:8px; border-left:2.5px solid #c97800;display:none; } [data-theme="dark"] .avp-note{ color:var(--warn); background:var(--warn-soft); border-left-color:var(--warn); } /* Visual-only: these still get their text filled in and their state tracked exactly as before (Joe's submission/Amanda Ikari still block Jencap and the rest, Taylor Mensik still blocks Insurate, New venture's own rules are untouched) — they just never render, overriding the inline display:block tog()/sh() still sets on them. */ #joes-note,#amandaikari-note,#taylormensik-note,#newventure-note{display:none!important} .avp-note.danger{color:var(--danger);background:var(--danger-soft);border-color:var(--danger)} .avp-note.info{color:var(--accent);background:var(--accent-soft);border-color:var(--accent)} .avp-note.incomplete-msg{ color:#7a4700;background:rgba(200,110,0,0.12); border-left:2.5px solid #c97800;font-size:12px;padding:8px 12px; border-radius:var(--r-sm);margin-top:6px;display:none; } [data-theme="dark"] .avp-note.incomplete-msg{ color:var(--warn);background:var(--warn-soft);border-left-color:var(--warn); } .avp-sub-field{margin-top:12px} /* Account detail sections expand */ #acct-expanded{animation:acctSlideIn .28s var(--ease-out)} @keyframes acctSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} /* ── Quick Analysis mode — hides paperwork/identity fields that no market rule ever reads (account name, FEIN, corporation type, street address, years in business & effective date, contact info, owners, additional named insured, and the ACORD 130 upload — which has nothing to fill in once those fields are gone). States/payroll, risk description, mod & premium, the Yes/No questions (including Joe's submission and New Venture) and loss history/runs stay on screen and are read for real — every one of them can change which markets fit, same as full mode, so hiding them made Quick Analysis less accurate, not just shorter. Value Loss Runs Date is the one exception inside that section: no market rule reads it (it only drives its own note), so unlike the policy-period table it sits in, it hides in Quick mode — nobody is filling per-period valuation dates in for a quick pass, and notes() swaps in a single generic reminder to check the LR reports directly instead of the per-period "missing date" note that field would otherwise produce. */ body.quick-mode #sec-head-acord, body.quick-mode #card-acord, body.quick-mode #sec-head-acct, body.quick-mode #card-acct, body.quick-mode #sec-head-fein, body.quick-mode #card-fein, body.quick-mode #addr-field-label, body.quick-mode #addr-yn-row, body.quick-mode #addr-note, body.quick-mode #addr1-caption, body.quick-mode #addr-street, body.quick-mode #additional-addresses, body.quick-mode #addr-add-btn, body.quick-mode #card-vlr, body.quick-mode #sec-head-dates, body.quick-mode #card-dates, body.quick-mode #sec-head-contact, body.quick-mode #card-contact, body.quick-mode #sec-head-owners, body.quick-mode #card-owners, body.quick-mode #sec-head-ani, body.quick-mode #sb-ani, body.quick-mode #card-vlr, body.quick-mode #corptype-field{display:none !important} .quick-toggle-row{display:flex;align-items:center;gap:10px;margin:10px 0 4px;flex-wrap:wrap} .quick-toggle-btn{ display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-lg); border:0.5px solid var(--border2);background:var(--glass-card);color:var(--text2); font-size:12px;font-weight:600;cursor:pointer;transition:all .15s; } .quick-toggle-btn:hover{border-color:var(--accent)} .quick-toggle-btn.active{background:var(--accent);border-color:var(--accent);color:#fff} .quick-toggle-btn .qt-dot{width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0} .quick-toggle-btn.active .qt-dot{background:#fff} /* ── BUTTONS ── */ .avp-btn{ padding:7px 15px;font-size:12px;font-weight:600; border:1px solid var(--border);border-radius:var(--r-sm); cursor:pointer;background:var(--glass); backdrop-filter:blur(8px);color:var(--text2); display:inline-flex;align-items:center;gap:6px; font-family:inherit;transition:all .15s; box-shadow:var(--shadow); min-height:44px;/* iPad tap target */ } .avp-btn:hover{background:var(--glass2);border-color:var(--border2);color:var(--text)} .avp-btn.add{color:var(--accent);border-color:var(--border2);background:var(--accent-soft);margin-top:8px;transition:all .18s var(--ease-out)} .avp-btn.add .ti{transition:transform .18s var(--ease-out)} .avp-btn.add:hover{background:rgba(77,143,230,0.18);transform:translateY(-1px);box-shadow:0 4px 14px rgba(77,143,230,0.22)} .avp-btn.add:hover .ti{transform:rotate(90deg)} .avp-btn.add:active{transform:translateY(0)} @media(prefers-reduced-motion:reduce){.avp-btn.add,.avp-btn.add .ti{transition:background .15s}.avp-btn.add:hover{transform:none}.avp-btn.add:hover .ti{transform:none}} .avp-btn.danger{color:var(--danger);border-color:var(--danger-border);background:transparent;padding:5px 9px} .avp-btn.danger:hover{background:var(--danger-soft)} .avp-btn.primary{ background:linear-gradient(135deg,rgba(77,143,230,0.18),rgba(33,150,243,0.22)); color:var(--text);border-color:var(--border2);font-size:13px;padding:10px 28px; box-shadow:0 6px 20px var(--blue-glow2); } .avp-btn.primary:hover{box-shadow:0 8px 28px var(--blue-glow);transform:translateY(-1px)} .avp-btn.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-border)} .avp-btn-row{display:flex;gap:8px;margin-top:1.5rem;flex-wrap:wrap} /* ── DIVIDER ── */ .avp-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);margin:1.5rem 0;opacity:.6} /* ── DYNAMIC ROWS ── */ .col-hdr{font-size:10px;color:var(--text3);font-weight:700;letter-spacing:.04em} .hdr-grid{display:grid;gap:6px;padding:0 10px;margin-bottom:6px} .avp-drow{ display:grid;gap:6px;align-items:center;padding:8px 10px; background:var(--glass3); border-radius:var(--r-sm);margin-bottom:5px; border:1px solid var(--border3);transition:background .15s,border-color .15s; } .avp-drow:hover{background:var(--accent-soft);border-color:var(--border2)} .avp-drow input,.avp-drow select{ font-size:12px;padding:6px 8px; border:0.5px solid var(--border);border-radius:6px; background:var(--input-bg); color:var(--text); width:100%;outline:none;font-family:inherit;transition:border-color .15s; min-height:36px; } .avp-drow input::placeholder{color:var(--text3)} .avp-drow input:focus,.avp-drow select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .avp-drow select option{background:var(--select-opt-bg);color:var(--text)} /* ── TOTALS ── */ .avp-totals{background:var(--accent-soft);border:1px solid var(--border2);border-radius:var(--r-sm);padding:10px 16px;margin-top:10px;display:flex;gap:28px;flex-wrap:wrap} .avp-totals span{color:var(--text3);font-size:10px;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:2px;font-weight:700} .avp-totals strong{color:var(--accent);font-size:16px;font-variant-numeric:tabular-nums;font-family:inherit;font-weight:600} /* ── MINI TOGGLE ── */ /* Matched to .contact-toggle/.contact-tog (the toggle every main Yes/No question uses) rather than kept as its own flatter skin — radius, padding, hover and active glow all follow the same values, and the label above it gets the same 6px gap .avp-field label already uses instead of its own hardcoded 4/10px margins. */ .mini-label{font-size:10px;color:var(--text3);margin-top:16px;margin-bottom:6px;font-weight:700;text-transform:uppercase;letter-spacing:.08em} .mini-toggle{display:flex;border:1px solid var(--border);border-radius:14px;overflow:hidden;width:fit-content;background:var(--glass3);box-shadow:0 2px 12px rgba(0,0,0,0.10)} .mini-btn{position:relative;overflow:hidden;padding:8px 22px;font-size:11px;font-weight:600;cursor:pointer;background:transparent;color:var(--text2);border:none;font-family:inherit;min-height:36px} .mini-btn:not(:last-child){border-right:1px solid var(--border)} /* ── Every Yes/No behaves the same ── Two families had grown apart while asking the identical question. .avp-tog settled with a spring when picked but did nothing under the pointer and rounded to 8px; .mini-btn lifted on hover, appeared with no animation at all and rounded to 12px. Which one a question wore was a matter of where in the form it happened to sit. One rule for both, and it is the union rather than a compromise: the hover .mini-btn had, the settle .avp-tog had, the same 12px on the chosen answer and the same 14px shell around the pair. Sizes stay as they are — a question in a dense row is still smaller than one in a card; it is the behaviour and the corners that had to agree. */ /* .contact-tog is listed too, and not for tidiness: it carried its own `transition:all .2s`, which beat the four properties named here and animated the corner radius along with them — the chosen answer's corners eased in on Contact and snapped everywhere else. Naming the properties in one place is what makes "identical animation" true rather than nearly. */ .avp-tog,.mini-btn,.contact-tog{ transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out); } /* Hover, press, the settle and the corners live below the app-wide control recipe (search ".avp-btn, .avp-tog, .mini-btn"), because that recipe gives every control a 1px lift and a Yes/No answer is meant to pop instead — equal specificity, so the one that comes later is the one that holds. */ /* ── The answer's own colour: green for Yes, red for No, once ── Three families each declared this for themselves, and they had drifted: .avp-tog painted a flat --success-soft while the other two used a gradient with a glow, so the same answer looked like two different controls depending on which screen asked the question. One pair of rules for all three, so a Yes cannot be green in one place and a paler green in another. */ .avp-tog.yes.active,.mini-btn.yes.active,.contact-tog.yes.active{ background:linear-gradient(135deg,rgba(52,199,89,0.28),rgba(52,199,89,0.14)); color:var(--success); box-shadow:0 0 16px rgba(52,199,89,0.30),0 2px 6px rgba(0,0,0,0.10); } .avp-tog.no.active,.mini-btn.no.active,.contact-tog.no.active{ background:linear-gradient(135deg,rgba(255,59,48,0.24),rgba(255,59,48,0.12)); color:var(--danger); box-shadow:0 0 16px rgba(255,59,48,0.28),0 2px 6px rgba(0,0,0,0.10); } /* "Missing info?" on the Additional ACORD 130 questions sits beside the answer instead of under it, at a smaller size — it is a footnote on the paperwork, not a second question of equal weight, and it is asked of every one of those three questions rather than only the ones answered Yes. */ .avp-q-row{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap} .acord-miss{display:flex;align-items:center;gap:7px;margin-left:auto} .acord-miss-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);white-space:nowrap} /* The footnote-sized pair keeps the same 14px as every other Yes/No — its buttons are shorter, so that reads as a fuller round, which is what a smaller control of the same design should look like. */ .acord-miss-toggle{border-radius:14px} .acord-miss-toggle .mini-btn{padding:4px 11px;font-size:10px;min-height:26px} .acord-miss-toggle .mini-btn i{font-size:10px;margin-right:3px} .acord-miss-toggle .mini-btn.yes.active,.acord-miss-toggle .mini-btn.no.active{border-radius:9px} @media(max-width:560px){.acord-miss{margin-left:0}} /* ── LOSS RUN TABLE ── */ .avp-lr-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border)} .avp-lr-table th{background:var(--accent-soft);font-size:10px;font-weight:700;color:var(--text3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.08em} .avp-lr-table th.ctr,.avp-lr-table td.ctr{text-align:center} .avp-lr-table td{padding:6px 9px;border-bottom:1px solid var(--border3);vertical-align:middle;color:var(--text);background:var(--glass3)} .avp-lr-table tr:last-child td{border-bottom:none} .lr-have{display:flex;gap:3px;justify-content:center} .lr-have button{padding:3px 10px;font-size:11px;font-weight:600;border:1px solid var(--border);border-radius:5px;cursor:pointer;background:var(--glass3);color:var(--text2);font-family:inherit;transition:all .15s;min-height:36px} .lr-have button.yes.active{background:var(--success-soft);border-color:var(--success-border);color:var(--success)} .lr-have button.no.active{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger)} .lr-miss{font-size:11px;color:#7a4700;background:rgba(200,110,0,0.14);border-radius:6px;padding:5px 9px;border-left:2px solid #c97800;display:none;margin-top:3px} [data-theme="dark"] .lr-miss{color:var(--warn);background:var(--warn-soft);border-left-color:var(--warn)} .stat-pill{display:inline-block;padding:5px 12px;font-size:11px;border-radius:8px;border:1px solid var(--border);font-variant-numeric:tabular-nums;background:var(--glass3);font-family:var(--font-mono)} /* ── FILTER BAR ── */ .filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap} .filter-bar select,.filter-bar input{font-size:12px;padding:6px 10px;border:0.5px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--text);outline:none;font-family:inherit;min-height:36px} .filter-bar select:focus,.filter-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .filter-bar select option{background:var(--select-opt-bg);color:var(--text)} .filter-label{font-size:11px;color:var(--text3);font-weight:600} /* ── SUMMARY PANEL ── */ .avp-summary{background:var(--glass);backdrop-filter:var(--blur2);-webkit-backdrop-filter:var(--blur2);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow),var(--inner);padding:14px 16px;margin-bottom:8px} .avp-summary.has-alerts{background:var(--warn-soft)!important;border-color:var(--warn-border)!important} .avp-summary-empty{font-size:12px;color:var(--text3);font-style:italic} .avp-alert-item{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--warn-soft)} .avp-alert-item:last-child{border-bottom:none} .avp-alert-dot{width:5px;height:5px;border-radius:50%;background:var(--warn);flex-shrink:0;margin-top:4px} .avp-alert-item span{font-size:12px;color:var(--warn);line-height:1.5} /* ── FEIN ERROR ── */ .avp-fein-err{font-size:11px;color:var(--danger);display:none;margin-top:3px} /* ── ZIP SPINNER ── *//* ── MARKET FIT ── */ /* ── Segmented market-fit progress bar (donut replacement) ── */ #mkt-progress-bar{display:none;height:8px;border-radius:99px;overflow:hidden; background:var(--glass3);margin:10px 0 4px;box-shadow:inset 0 0 0 0.5px var(--border)} #mkt-progress-bar .seg{height:100%;float:left;transition:width .5s var(--ease-out)} #mkt-progress-bar .seg.fit{background:var(--success)} #mkt-progress-bar .seg.warn{background:var(--warn)} #mkt-progress-bar .seg.bad{background:var(--danger)} #mkt-progress-bar .seg.blocked{background:var(--text3)} /* ── Compact result rows: flag-count chip shown when a panel is collapsed ── */ .fit-flag-count{display:inline-flex;align-items:center;margin-left:8px;font-size:9px;font-weight:700; letter-spacing:.03em;border-radius:99px;padding:1px 8px;text-transform:none} .fit-flag-count.red{background:var(--danger-soft);color:var(--danger);border:0.5px solid var(--danger-border)} .fit-flag-count.gray{background:var(--glass3);color:var(--text3);border:0.5px solid var(--border)} .fit-panel.open .fit-flag-count{display:none!important} /* chip only matters while collapsed */ /* ── Market notes: clamp long ones to 2 lines, expandable ── */ .mkt-note{margin-top:4px;color:var(--accent);font-size:10px;line-height:1.55;overflow-wrap:anywhere; border-top:1px solid rgba(79,195,247,0.15);padding-top:4px} /* Clamped by whole rows, not by height. A 3.4em cap over 15.5px line boxes cut the third line 19% of the way through it, and the fade that was there to hide the stump smeared the second line as well — every card showed a band of half-legible text under its notes. Two rows, each itself capped at two lines so one long sentence cannot take the card over: both cuts land on a line boundary, and "See more" says there is more rather than a blur implying it. */ .mkt-note.clamped .mkt-note-row:nth-child(n+3){display:none} /* The line cap goes on the value, not on the row. Putting -webkit-box on the row replaced its flex layout and took the gap between the label and the value with it — "NY:no 5 boroughs" instead of "NY: no 5 boroughs". */ .mkt-note.clamped .mnr-val{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .mkt-note-toggle{background:none;border:none;color:var(--accent);font-size:10px;font-weight:700; padding:3px 0 0;font-family:inherit;letter-spacing:.02em;text-decoration:underline;text-underline-offset:2px} /* ── Preferred-fit badge: a positive signal, kept visually distinct from the informational (accent-blue) market notes above via the success-green token ── */ .mkt-preferred{margin-top:4px;display:flex;align-items:center;gap:5px;color:var(--success); font-size:10px;font-weight:700;letter-spacing:.02em;background:var(--success-soft); border:0.5px solid var(--success-border);border-radius:6px;padding:3px 7px} .mkt-preferred i{font-size:12px} /* ── PEO/PayGo low-premium notice — glass card, warn accent ── */ #peo-low-prem-notice{ display:flex;align-items:flex-start;gap:11px; background:var(--glass);backdrop-filter:var(--blur2);-webkit-backdrop-filter:var(--blur2); border:1px solid var(--warn-border);border-radius:12px; box-shadow:var(--shadow),var(--inner); padding:12px 14px;margin-bottom:10px; animation:riseIn .5s cubic-bezier(.22,.68,.26,1) backwards; } #peo-low-prem-notice>i{color:var(--warn);font-size:16px;flex-shrink:0;margin-top:1px} #peo-low-prem-notice .plpn-title{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--warn);margin-bottom:2px; } #peo-low-prem-notice .plpn-msg{font-size:12px;color:var(--text2);line-height:1.5} /* ── Count-up number animation cue ── */ /* ── Unified empty-state pattern (Calendar, Directory, Tracker, etc.) ── */ @keyframes emptyFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .empty-state{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;padding:36px 20px;color:var(--text3); animation:emptyFadeIn .35s var(--ease-out); } .empty-state-icon{ width:52px;height:52px;border-radius:var(--r);display:flex;align-items:center;justify-content:center; background:var(--glass3);border:0.5px solid var(--border);font-size:22px;color:var(--text3); } .empty-state-title{font-size:13px;font-weight:600;color:var(--text2)} .empty-state-sub{font-size:11px;color:var(--text3);text-align:center;max-width:280px;line-height:1.5} .count-up{transition:color .3s} /* One market per row, stacked top to bottom. Two columns split the results into two parallel sequences, and the order the markets are sorted into — fits first, blocked last — only reads as an order down a single list. So the grid stays one column at every width; the card heights that the old two-column layout had to reconcile (hence align-items:stretch and the note pushed to the foot of the card) are each their own row now, and a card is as tall as its own content. */ .fit-panel-wrap{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:8px;align-items:stretch} .fit-panel[data-status="fit"].fit-hidden{display:none!important} /* ── Consolidated markets accordion (Market Fit Results) ── */ .mkt-accordion{background:var(--glass-card);backdrop-filter:var(--blur2);-webkit-backdrop-filter:var(--blur2); border:0.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow),var(--inner); overflow:hidden;margin-bottom:14px;position:relative; transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)} /* The same sheen the analyzer's own cards carry — a light source above the card rather than a flat panel. One pixel tall, so it reads as an edge catching the light instead of a border. */ .mkt-accordion::before,.gt-sent-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.16),transparent); } .mkt-accordion:not(.open):hover{transform:translateY(-1px);box-shadow:var(--shadow-lg),var(--inner)} /* Not while open: lifting a panel somebody is reading moves the text under their eyes. */ .gt-sent-card{ position:relative; transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out); box-shadow:var(--shadow),var(--inner); } .gt-sent-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg),var(--inner)} .mkt-accordion-head{width:100%;display:flex;align-items:center;gap:10px;padding:14px 16px; background:transparent;border:none;cursor:pointer;font-family:inherit;text-align:left; font-size:12px;font-weight:700;color:var(--text2);transition:background .15s,transform var(--dur-fast) var(--ease-out)} .mkt-accordion-head:hover{background:var(--glass3)} .mkt-accordion-head i.ti-list-details{font-size:14px;color:var(--text3);flex-shrink:0} .mkt-accordion-title{flex:1;min-width:0} .mkt-accordion-count{font-size:10px;font-weight:700;background:var(--glass3);border:0.5px solid var(--border); border-radius:99px;padding:2px 10px;color:var(--text3);flex-shrink:0} .mkt-accordion-caret{color:var(--text3);font-size:14px;transition:transform .22s;flex-shrink:0} .mkt-accordion.open .mkt-accordion-caret{transform:rotate(180deg)} .mkt-accordion-body{max-height:0;opacity:0;overflow:hidden;padding:0 16px; transition:max-height .3s var(--ease-out),opacity .22s,padding .3s} .mkt-accordion.open .mkt-accordion-body{max-height:20000px;opacity:1;padding:0 16px 16px} .mkt-show-fit-toggle{display:none;align-items:center;gap:6px;margin:2px 0 4px;padding:8px 14px; background:var(--glass3);border:0.5px solid var(--border);border-radius:99px;cursor:pointer; font-family:inherit;font-size:11px;font-weight:600;color:var(--text2);transition:all .15s} .mkt-show-fit-toggle:hover{background:var(--accent-soft);color:var(--accent)} .fit-panel{background:var(--glass);backdrop-filter:var(--blur2);-webkit-backdrop-filter:var(--blur2);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow),var(--inner);padding:0;display:flex;flex-direction:column;overflow:hidden;min-width:0} /* Whole-card color coding by result status. The order of #fit-panel-wrap is set in JS by _mktSortByStatus() (fit → referral → notfit → blocked, confidence within each), not here; the color is what tells one status from another once a reader is looking at a single card rather than at the run of them. */ .fit-panel[data-status="fit"]{border-color:var(--success-border);background:var(--success-soft)} .fit-panel[data-status="referral"]{border-color:var(--warn-border);background:var(--warn-soft)} .fit-panel[data-status="notfit"]{border-color:var(--danger-border);background:var(--danger-soft)} .fit-panel.open>div[id^="fit-"]{max-height:420px;padding:0 11px 11px;opacity:1; flex:1;display:flex;flex-direction:column} /* The notes sit at the foot of the card, so the flags of two cards side by side line up at the top and the extra height of the taller one does not push its notes out of step with its neighbour's. */ .fit-panel .mkt-note-wrap{margin-top:auto;padding:6px 0 0} .fit-panel:not(.open)>div[id^="fit-"]{max-height:0;padding:0 11px;opacity:0;pointer-events:none} .fit-panel>div[id^="fit-"]{transition:max-height .28s var(--ease-out),opacity .2s,padding .28s} .fit-panel-caret{margin-left:auto;transition:transform .22s;color:var(--text3);font-size:13px} .fit-panel.open .fit-panel-caret{transform:rotate(180deg)} .fit-panel-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:10px 11px;display:flex;align-items:center;gap:8px;flex-shrink:0;cursor:pointer;user-select:none;min-height:40px} .fit-panel-head .fit-name{flex:1;min-width:0;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .fit-panel-head .fit-panel-caret{margin-left:auto;flex-shrink:0} .fit-panel-head .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--text3)} /* Scrollable item list — prevents a market with many flags from stretching the whole page */ .fit-panel>div[id^="fit-"]{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;min-width:0;padding-right:4px;margin-right:-4px} .fit-panel>div[id^="fit-"]::-webkit-scrollbar{width:4px} .fit-panel>div[id^="fit-"]::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px} .fit-item{font-size:11px;line-height:1.45;padding:5px 7px;border-radius:8px;margin-bottom:4px;display:flex;align-items:flex-start;gap:6px;min-width:0} .fit-item:last-child{margin-bottom:0} .fit-item.notfit{background:var(--danger-soft);border:1px solid var(--danger-border)} .fit-item.possible{background:var(--success-soft);border:1px solid var(--success-border)} .fit-item.blocked{background:var(--glass3);border:1px solid var(--border3)} .fit-item i{font-size:13px;flex-shrink:0;margin-top:1px} .fit-item.notfit i{color:var(--danger)}.fit-item.possible i{color:var(--success)}.fit-item.blocked i{color:var(--text3)} .fit-label{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .fl-title{font-size:11px;font-weight:600;color:var(--text);overflow-wrap:anywhere} .fl-type{font-size:10px;font-weight:700;color:var(--danger);letter-spacing:.04em} .fl-type.green{color:var(--success)}.fl-type.gray{color:var(--text3)} .fl-detail{font-size:11px;color:var(--text2);margin-top:2px;line-height:1.5;overflow-wrap:anywhere} /* ── MARKET FEEDBACK BAR ── */ .fit-empty{font-size:12px;color:var(--text3);font-style:italic} /* ── ANALYZE WRAP ── */ .analyze-wrap{ display:flex;align-items:center;gap:14px;margin-top:1.5rem; padding:18px 20px; background:var(--accent-soft);border:1px solid var(--border2); border-radius:var(--r-lg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:var(--inner); } .analyze-wrap p{font-size:12px;color:var(--text2);line-height:1.5} .analyze-wrap .avp-btn.primary{white-space:nowrap;flex-shrink:0} /* ── CHARTS ── */ .chart-wrap{background:var(--glass);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow),var(--inner);position:relative;overflow:hidden} .chart-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent)} .chart-title{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px} /* ── Payroll chart ── */ .pchart-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px} .pchart-title{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em} .pchart-total{font-size:26px;font-weight:200;color:var(--text);letter-spacing:-.03em;line-height:1;margin-top:3px} .pchart-filters{display:flex;flex-direction:column;gap:8px;padding:10px 0 12px;border-bottom:0.5px solid var(--border3);margin-bottom:12px} .pchart-filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pchart-filter-label{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;min-width:72px} .pchart-filter-select{font-size:10px;border:0.5px solid var(--border);border-radius:7px;background:rgba(130,182,242,0.08);color:var(--text);padding:3px 8px;font-family:inherit;outline:none;cursor:pointer;max-width:180px} .pchart-filter-select:focus{border-color:var(--accent)} .pchart-state-pills{display:flex;flex-wrap:wrap;gap:4px;flex:1} .psp{font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;border:0.5px solid var(--border);background:rgba(130,182,242,0.08);cursor:pointer;color:var(--text3);transition:background .14s,color .14s,border-color .14s;letter-spacing:.02em} .psp:hover{background:rgba(130,182,242,0.18);color:var(--text)} .psp.on{background:var(--accent);color:#fff;border-color:var(--accent)} .pchart-clear{font-size:9px;color:var(--accent);cursor:pointer;font-weight:600;background:none;border:none;font-family:inherit;padding:0;text-decoration:underline;white-space:nowrap} .pchart-pay-inp{font-size:10px;border:0.5px solid var(--border);border-radius:7px;background:rgba(130,182,242,0.08);color:var(--text);padding:3px 8px;font-family:inherit;outline:none;width:120px} .pchart-pay-inp:focus{border-color:var(--accent)} .pchart-meta{font-size:10px;color:var(--text3);margin-top:2px} .pchart-rows{display:flex;flex-direction:column;gap:13px} .pchart-row{display:flex;flex-direction:column;gap:5px} .pchart-row-header{display:flex;justify-content:space-between;align-items:center} .pchart-badge{font-size:10px;font-weight:700;color:#fff;border-radius:5px;padding:2px 8px;letter-spacing:.04em} .pchart-pct{font-size:10px;color:var(--text3);margin-left:6px} .pchart-amt{font-size:12px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;font-family:var(--font-mono)} .pchart-track{height:8px;background:rgba(130,182,242,.12);border-radius:4px;overflow:hidden} .pchart-fill{height:100%;border-radius:4px;transition:width .75s var(--ease-out)} /* ── Claims per Period — trend line ── */ .cchart-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px} .cchart-legend{display:flex;flex-direction:column;gap:4px;align-items:flex-end} .cchart-legend-item{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--text3)} .cchart-legend-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0} /* SVG keeps its own width/height equal to the viewBox units (not just a viewBox) so max-width:100% scales it down uniformly on narrow screens — the circular point markers stay circular instead of stretching into ellipses the way a non-uniform preserveAspectRatio="none" scale would. */ .lchart-svg{width:100%;max-width:100%;height:auto;display:block;overflow:visible} .lchart-pt{cursor:pointer} .lchart-dot{transition:r .15s var(--ease-out)} .lchart-pt:hover .lchart-dot{r:7} /* donut chart removed */ /* ── David Tracker screen ── */ .dt-stat-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600; padding:5px 14px;border-radius:var(--r-lg);background:var(--glass3);color:var(--text2); border:0.5px solid var(--border)} .dt-stat-chip span{font-size:13px;font-weight:700;color:var(--text)} .dt-stat-completed span{color:var(--success)} .dt-stat-hold span{color:var(--warn)} .dt-stat-pending span{color:#5856D6} .dt-stat-declined span{color:var(--danger)} .dt-filter-select{padding:6px 12px;border:0.5px solid var(--border2);border-radius:var(--r-lg); background:var(--glass3);color:var(--text2);font-size:11px;font-family:inherit; outline:none;cursor:pointer} /* ── Custom select popup ────────────────────────────────────────────────── Every and an render 39px, because the browser gives those two a taller intrinsic content box. Same rule, three different boxes — most visible on Invoice, where City / State / ZIP sit side by side in one grid row and the middle one stood 2px proud of its neighbours. Pinned to the tallest of the three so nothing shrinks or clips; .avp-drow's own controls already solve this the same way. */ .to-input,.to-select{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:var(--r-sm);border:0.5px solid var(--border2); background:var(--input-bg);color:var(--text);font-size:13px;font-family:inherit;min-height:39px} .to-input:focus,.to-select:focus{outline:none;border-color:var(--accent)} .to-input[readonly]{background:var(--glass3);color:var(--text2);cursor:default} /* The free-text detail field is a textarea wearing .to-input; it inherits the box but not the two things a textarea brings of its own. */ textarea.to-input{resize:vertical;min-height:56px;line-height:1.45} .to-hint{font-size:10px;color:var(--text3);margin-top:5px} .to-sub-field{margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--glass3);border:0.5px solid var(--border2)} .to-err{font-size:11px;color:var(--danger);display:none;margin-top:6px} /* Held Time Off requests, on the screen they were written on — a queue nobody can see is a queue nobody trusts. */ .to-outbox{margin-top:12px;font-size:12px;color:var(--text2); background:var(--glass-card);border:0.5px solid var(--border);border-radius:var(--r-sm); padding:10px 12px; backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)} .to-outbox-head{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--text); margin-bottom:6px} .to-outbox-head .to-export-btn{margin-left:auto} .to-outbox-row{display:flex;align-items:center;gap:6px;color:var(--text3);font-size:11px;padding:2px 0} /* The one line that says the connection is gone. Fixed, above every screen, and only on screen while it is true. */ #offline-banner{position:fixed;left:50%;top:0;transform:translate(-50%,-120%); z-index:9600;display:flex;align-items:center;gap:8px;max-width:min(680px,94vw); padding:8px 16px;border-radius:0 0 var(--r-sm) var(--r-sm); background:var(--warn-soft,rgba(255,159,10,0.16));border:0.5px solid rgba(255,159,10,0.34); border-top:none;color:var(--warn);font-size:11px;font-weight:600;line-height:1.4; backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px); box-shadow:0 6px 24px rgba(0,0,0,0.18); transition:transform var(--dur) var(--ease-out)} #offline-banner.show{transform:translate(-50%,0)} .to-submit-btn{width:100%;padding:12px;border-radius:12px;border:none;background:var(--accent);color:#fff; font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s} .to-submit-btn:hover{opacity:.9} .to-success{display:none;font-size:12px;color:var(--success);background:var(--success-soft);border:0.5px solid var(--success-border); border-radius:var(--r-sm);padding:9px 12px;margin-top:12px} /* flex, matching what the DocuHub forms set inline when they show theirs: every one of these banners is an icon followed by a line of text, and the two conventions rendered that pair differently — the icon sat on the text baseline here and centred there. */ .to-success.show{display:flex;align-items:center} .to-list-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px} .to-list-title{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase} .to-export-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:6px 13px;border-radius:var(--r-lg); cursor:pointer;font-family:inherit;background:var(--glass3);color:var(--text2);border:0.5px solid var(--border2);transition:all .15s} .to-export-btn:hover{border-color:var(--accent);color:var(--accent)} .to-table{width:100%;border-collapse:collapse;font-size:11px} .to-table th{text-align:left;padding:7px 9px;color:var(--text3);font-weight:700;border-bottom:0.5px solid var(--border2);font-size:10px;text-transform:uppercase;letter-spacing:.04em} .to-table td{padding:8px 9px;border-bottom:0.5px solid var(--border3);color:var(--text2)} .to-table tr:last-child td{border-bottom:none} .to-empty{font-size:11px;color:var(--text3);font-style:italic;padding:10px 0} .to-del-btn{background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px;padding:2px} /* Where the delete button is on every other row. A gap would read as a row that failed to render; a padlock says the row is settled and the control is gone on purpose. */ .to-del-locked{display:inline-flex;align-items:center;color:var(--text3);font-size:12px;padding:2px;cursor:help} .to-filter-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:12px} .to-filter{display:flex;flex-direction:column;gap:4px} .to-filter label{font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.05em;text-transform:uppercase} .to-filter input,.to-filter select{font-family:inherit;font-size:11px;padding:6px 9px;border-radius:8px; border:0.5px solid var(--border2);background:var(--input-bg);color:var(--text);min-width:120px} .to-filter input:focus,.to-filter select:focus{outline:none;border-color:var(--accent)} .to-sum-grid{display:flex;flex-wrap:wrap;gap:8px} .to-sum-card{flex:1 1 130px;background:var(--glass3);border:0.5px solid var(--border2);border-radius:var(--r-sm);padding:9px 12px} .to-sum-k{font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.04em;text-transform:uppercase} .to-sum-v{font-size:14px;font-weight:700;color:var(--text);margin-top:2px} .to-sum-sub{font-size:10px;color:var(--text3);margin-top:1px} /* Status reads at a glance in a long list, which is the only way a reviewer spots the pending ones among a hundred decided rows. */ .to-badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;border-radius:99px;letter-spacing:.03em;text-transform:uppercase} .to-badge.pending{background:var(--warn-soft,rgba(245,180,60,.16));color:#e0a63a} .to-badge.approved{background:var(--success-soft);color:var(--success)} .to-badge.declined{background:var(--danger-soft,rgba(242,65,91,.14));color:var(--danger)} /* 'info' is a question, not a verdict — it reads like the waiting states, not like approved or declined, because the request is still open. */ .to-badge.info{background:rgba(79,195,247,0.14);color:var(--accent)} /* Dark theme: the light-theme pair above (a near-opaque tint plus the raw Apple system color as text) turns into neon-on-black once the tint is the 12% dark-mode alpha — the pill itself all but disappears and the status reads as glaring bare text instead of a badge. A denser fill plus a slightly lifted (less saturated) text tone keeps every status legible as a pill without the glare. */ [data-theme="dark"] .to-badge.pending{background:rgba(255,159,10,0.22);color:#ffc670} [data-theme="dark"] .to-badge.approved{background:rgba(50,215,75,0.20);color:#6be08a} [data-theme="dark"] .to-badge.declined{background:rgba(255,69,58,0.20);color:#ff8f87} [data-theme="dark"] .to-badge.info{background:rgba(79,195,247,0.20);color:#8ad6ff} .to-act-btn{background:none;border:0.5px solid var(--border2);border-radius:99px;cursor:pointer;font-family:inherit; font-size:10px;font-weight:700;padding:3px 9px;margin-right:4px;color:var(--text2);transition:all .15s} .to-act-btn.ok:hover{border-color:var(--success);color:var(--success)} .to-act-btn.no:hover{border-color:var(--danger);color:var(--danger)} /* Asking for more information is not a verdict, so it takes the accent rather than the green or the red. */ .to-act-btn.info:hover{border-color:var(--accent);color:var(--accent)} /* The last button in the row has nothing to its right. */ .to-act-btn:last-of-type{margin-right:0} /* Ten columns and four actions do not fit a 760px panel: the actions cell ran past the container, and with overflow visible that put Ask and the delete button outside it — rendered, unreachable, and clipped by an ancestor with no scrollbar to say so. Making the table scroll sideways fixed the clipping and replaced it with a scrollbar that was always there, on every screen: the table asked for ~1210px inside a 686px column, so status and the review buttons sat off-screen until you dragged, and reviewers approve from exactly that part of the row. The column is wide enough for the table now (.to-body above), so the table fills it instead of setting its own width. min-width:max-content is gone — that is what forbade wrapping and pinned the width to the longest name and the longest detail on the screen. overflow-x stays as a floor for a window too narrow for any layout; it is no longer the normal case. */ #to-list-wrap{ overflow-x:auto; } #to-list-wrap > table{ width:100%; } /* Dates, IDs, durations, the status pill and the review buttons read as one token each and look broken wrapped; the three free-text columns are the ones with slack, so they are the ones that give. Headers wrap even where their column does not: "Time off/out" is wider than any duration under it, so it — not the data — was setting that column's width, and 30px of header was the difference between fitting a 1024px window and not. */ .to-table td{ white-space:nowrap; } .to-table th{ white-space:normal; } .to-table td:nth-child(4), .to-table td:nth-child(7), .to-table td:nth-child(8){ white-space:normal; } /* The row a notification was about. Arriving from "Time Off waiting for review" onto a list of forty rows and being left to find it by eye is the thing this removes, so the mark has to be plainly visible: a tinted row and a bar down the left edge, held until the next click or keypress rather than faded on a timer that expires while you are still scrolling. */ .to-table tr.to-row-focus > td{ background:var(--accent-soft); } .to-table tr.to-row-focus > td:first-child{ box-shadow:inset 3px 0 0 var(--accent); } /* The reason a request was turned down, on the row rather than in a tooltip: the person it happened to is the one who needs it, and they are not going to hover over a badge to look. */ .to-declined-why{font-size:10px;color:var(--danger);opacity:.9;margin-top:2px;max-width:220px;line-height:1.35} /* ---- bloque 5 (era linea 3733 de index.html) ---- */ /* Scoped to this screen — prefixed "pbi-" so nothing collides with the rest of the app. Mirrors the Time Off screen's chrome so the module does not look bolted on. */ #powerbi-screen{display:none;min-height:100vh;background:var(--bg);background-image:var(--bg-mesh);background-attachment:fixed; background-repeat:var(--bg-mesh-repeat);background-position:var(--bg-mesh-pos);background-size:var(--bg-mesh-size);padding:0 0 40px} .pbi-body{max-width:var(--col-wide);margin:0 auto;padding:14px 20px 20px} .pbi-card{background:var(--glass-card);backdrop-filter:var(--blur2);-webkit-backdrop-filter:var(--blur2); border:0.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden} .pbi-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:0.5px solid var(--border2)} .pbi-title{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase} .pbi-status{flex:1;font-size:11px;color:var(--text3);text-align:right;padding-right:12px} .pbi-open-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:6px 13px;border-radius:var(--r-lg); cursor:pointer;font-family:inherit;background:var(--glass3);color:var(--text2);border:0.5px solid var(--border2);transition:all .15s;text-decoration:none} .pbi-open-btn:hover{border-color:var(--accent);color:var(--accent)} @media(min-width:761px){body.nav-pinned #powerbi-screen .pbi-body{margin-left:var(--nav-w)}} /* ---- bloque 6 (era linea 3799 de index.html) ---- */ /* Scoped to the Emails screen — prefixed "eml-" so nothing collides with the rest of the app */ #emails-screen{display:none;min-height:100vh;background:var(--bg);background-image:var(--bg-mesh);background-attachment:fixed;background-repeat:var(--bg-mesh-repeat);background-position:var(--bg-mesh-pos);background-size:var(--bg-mesh-size);padding:0 0 80px} .eml-body{max-width:var(--col-narrow);margin:0 auto;padding:14px 20px 60px} .eml-card{background:var(--glass-card);backdrop-filter:var(--blur2);-webkit-backdrop-filter:var(--blur2);border:0.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px} .eml-field{margin-bottom:18px} .eml-field:last-child{margin-bottom:0} .eml-label{display:block;font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px} .eml-input,.eml-select,.eml-textarea{ width:100%;box-sizing:border-box;padding:10px 13px;border-radius:var(--r-sm); border:0.5px solid var(--border2);background:var(--input-bg);color:var(--text); font-size:13px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s; } .eml-input:focus,.eml-select:focus,.eml-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .eml-textarea{resize:vertical;min-height:76px;line-height:1.5} .eml-chip-grid{display:flex;flex-wrap:wrap;gap:6px} /* Names only — the address is on hover and in the CC line of the preview. */ .eml-chip{padding:6px 13px;border-radius:99px;border:0.5px solid var(--border2);background:var(--glass2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;user-select:none;transition:all .15s;font-family:inherit} .eml-chip:hover{border-color:var(--accent)} .eml-chip.sel{background:var(--accent);color:#fff;border-color:var(--accent)} .eml-chip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .eml-mini-link{font-size:11px;font-weight:700;color:var(--accent);cursor:pointer;background:none;border:none;font-family:inherit;padding:0} .eml-target-row{display:flex;gap:8px;flex-wrap:wrap} .eml-target-btn{flex:1;min-width:90px;padding:9px 10px;border-radius:var(--r-sm);border:0.5px solid var(--border2);background:var(--glass2);color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;text-align:center;transition:all .15s;font-family:inherit} .eml-target-btn.sel{background:var(--accent);color:#fff;border-color:var(--accent)} /* Audits tab — one row per account: name, Audit/Final Audit, policy number, remove. Wraps on narrow widths rather than the fields shrinking to unreadable widths side by side. */ .aud-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap} .aud-row .eml-input,.aud-row .eml-select{width:auto} .aud-row .aud-acct{flex:2 1 180px} .aud-row .aud-type{flex:1 1 130px} .aud-row .aud-policy{flex:1 1 140px} .aud-row-del{flex:0 0 auto;background:none;border:0.5px solid var(--border2);border-radius:var(--r-sm);color:var(--text3);cursor:pointer;padding:10px 11px;font-family:inherit;transition:all .15s} .aud-row-del:hover{border-color:var(--danger);color:var(--danger)} .eml-states-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:5px;max-height:170px;overflow-y:auto;padding:8px;border:0.5px solid var(--border);border-radius:var(--r-sm);background:var(--glass3)} .eml-state-chip{padding:6px 2px;text-align:center;border-radius:7px;background:var(--glass2);color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;user-select:none;transition:all .12s;border:none;font-family:inherit} .eml-state-chip.sel{background:var(--accent);color:#fff} .eml-gen-btn{width:100%;padding:12px;margin-top:4px;background:var(--accent);border:none;border-radius:var(--r-sm);color:#fff;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s} .eml-gen-btn:hover{filter:brightness(1.08)} .eml-preview-block{background:var(--glass2);border:0.5px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:12px} .eml-preview-market{font-size:11px;font-weight:700;color:var(--accent);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px} .eml-preview-body{white-space:pre-wrap;font-size:12px;line-height:1.65;color:var(--text);font-family:inherit;margin-bottom:10px} .eml-preview-actions{display:flex;gap:8px} .eml-preview-btn{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text2);background:var(--glass3);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:6px 12px;cursor:pointer;font-family:inherit;transition:all .15s} .eml-preview-btn:hover{border-color:var(--accent);color:var(--accent)} .eml-preview-btn.copied{background:var(--pal-green);color:#fff;border-color:var(--pal-green)} .eml-empty-hint{font-size:12px;color:var(--text3);text-align:center;padding:20px 0} /* transform is named so the press every