/* xp-chat.css — Yarnball CDS theme "XP" (Luna), conversation-surface extension.
   Ben, 2026-08-22: xp.css already covers the base window chrome, .row/.bub bubbles, the
   .box composer, .send, .starter-chip, .chat-nav-panel, .modal .mcard dialogs, bare
   tables and buttons. This file styles ONLY the conversation surfaces xp.css leaves
   untouched: message hover actions, the thinking toggle, tool-call/result trails,
   citation chips, the model lock/switch pill, memory chips, composer attachment chips,
   the dictation mic, streaming/typing indicators, error/retry/queue states, the email
   reader, and the security-path check (Settings/header lock -> SecurityPathView).

   Every real class name below was grepped out of app/chat.js, app/main.js,
   app/security-path.js and _ds_bundle.css — none are invented. Where a surface is
   already reachable through a generic rule in xp.css (bare `input`/`textarea`, bare
   `table`/`th`/`td`, `.secbox`) or is dead/unreachable code, it is deliberately skipped
   here and named in the PR notes instead of duplicated.

   Same recipe as xp.css: --xp-luna/--xp-luna-flat Luna captions, --xp-face/--xp-face-hot
   silver 3D buttons, #ECE9D8 chrome, white surfaces, #919b9c/#aca899 borders, #7F9DB9
   inset fields, #316AC5 selection blue, #0a246a ink-blue labels, square corners, 11px
   Tahoma, 2-4px paddings. Small status dots (ref-chip dot, unread dot, attestation tick)
   stay round, same as xp.css's own scrollbar thumb and .gsp-rag reference dots — only the
   larger chrome surfaces square off. */

/* ------------------------------------------------------------------ */
/* message action rows + hover controls (chat.js HoverActions/MessageActionsBar)      */
[data-theme="xp"] .msg-hoverbar{
  border:1px solid #919b9c; border-radius:0; background:#ECE9D8;
  box-shadow:1px 1px 4px rgba(0,0,0,.3); padding:2px; gap:1px;
}
[data-theme="xp"] .meta-icon-row{gap:1px}
[data-theme="xp"] .meta-icon-btn{
  border-radius:2px; border:1px solid #003c74; background:var(--xp-face);
  box-shadow:inset 1px 1px 0 #fff; color:#000;
}
[data-theme="xp"] .meta-icon-btn:hover{background:var(--xp-face-hot); border-color:#003c74; color:#000}
[data-theme="xp"] .meta-icon-btn:active{background:#d8d0c4; box-shadow:inset 1px 1px 2px rgba(0,0,0,.28)}
[data-theme="xp"] .meta-icon-btn:disabled{opacity:.5}
[data-theme="xp"] .meta-icon-btn.is-copied{background:#c1d2ee; border-color:#316ac5; color:#0a246a}
[data-theme="xp"] .msg-icon-line{gap:5px}
[data-theme="xp"] .msg-secure-lock{color:var(--trust-green); opacity:1}
[data-theme="xp"] .row.me .msg-secure-lock{color:#cdeecd}
[data-theme="xp"] .attestation-lock,
[data-theme="xp"] .attestation-lock-prominent{color:var(--trust-green)}
[data-theme="xp"] .attestation-lock:hover,
[data-theme="xp"] .attestation-lock[aria-expanded="true"],
[data-theme="xp"] .attestation-lock-prominent:hover,
[data-theme="xp"] .attestation-lock-prominent[aria-expanded="true"]{color:var(--trust-green); opacity:.75}
[data-theme="xp"] .attestation-lock-tick{background:var(--trust-green); color:#fff; box-shadow:0 0 0 2px #fff}
/* .msg-prose / .attestation-table intentionally not touched here — msg-prose's markdown
   content (a/pre/code/table/h1-h3) already inherits xp.css's .row.yarnball .bub rules and
   the bare table/th/td rules; adding a second copy here would fight, not extend, them. */

/* context + benchmark chip on the meta row (BenchChip reuses ctx-chip's own class) */
[data-theme="xp"] .ctx-chip{
  border:1px solid #aca899; border-radius:0; background:#f6f5ef; color:#4a4a4a;
  font-family:var(--mono); font-size:10px; padding:1px 6px;
}

/* ------------------------------------------------------------------ */
/* composer icon buttons — base for attach / dictation / think toggle (chat.js
   ChatComposer, DictationMic). IconButton's own root class is .clip, NOT .icbtn — xp.css's
   button rule never reaches it, so it renders as an unstyled transparent circle without
   this block. */
[data-theme="xp"] .clip{
  border-radius:2px; border:1px solid #003c74; background:var(--xp-face);
  box-shadow:inset 1px 1px 0 #fff; color:#000; transition:none;
}
[data-theme="xp"] .clip:hover{background:var(--xp-face-hot); color:#000}
[data-theme="xp"] .clip:active{background:#d8d0c4; box-shadow:inset 1px 1px 2px rgba(0,0,0,.28)}
[data-theme="xp"] .composer-icon-red{color:#000}
[data-theme="xp"] .composer-icon-red:hover{opacity:1; color:#000}

/* thinking/reasoning toggle (composer bulb, chat.js:3383-3388) — same .clip button as
   attach/mic, "on" state reads as a pressed XP button, same recipe as xp.css's .btn.active.
   No separate expanding panel exists for it (grepped app/main.js: the header's mirrored
   thinkOn state is tracked but never rendered as its own control/popover) — the tooltip
   (title attr) is the only surface, so there is nothing further to skin. */
[data-theme="xp"] .composer-icon-red.is-on{
  background:#c1d2ee; border-color:#316ac5; color:#0a246a;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.18);
}
[data-theme="xp"] .composer-icon-red.is-on:hover{background:#c1d2ee; color:#0a246a}

/* dictation mic (chat.js DictationMic) — same button, plus a live-recording ring keyed off
   the real data-dictation-state attribute the component sets (the DS's own .mic-live class
   is never reachable here: DictationMic never passes IconButton's `live` prop). */
[data-theme="xp"] .composer-icon-red[data-dictation-state="listening"]{
  background:#c1d2ee; border-color:#316ac5; color:#a32018;
  animation:xpDictationPulse 1.1s ease-in-out infinite;
}
[data-theme="xp"] .composer-icon-red[data-dictation-state="transcribing"]{opacity:.6; cursor:wait}
@keyframes xpDictationPulse{
  0%,100%{box-shadow:inset 1px 1px 2px rgba(0,0,0,.18)}
  50%{box-shadow:inset 1px 1px 2px rgba(0,0,0,.18), 0 0 0 2px rgba(163,32,24,.35)}
}
/* .hint is already handled by xp.css (the composer keyboard-hint rule) — not repeated here. */

/* ------------------------------------------------------------------ */
/* attachment chips in the composer (chat.js ChatComposer pendingFiles row) */
[data-theme="xp"] .composer-file-chip{
  border:1px solid #919b9c; border-radius:0; background:#fff; color:#000;
  font-family:var(--ui); font-size:11px;
}
[data-theme="xp"] .composer-file-chip-remove{border-radius:0; color:#7a7568}
[data-theme="xp"] .composer-file-chip-remove:hover{background:#f4c9c9; color:#a00}
/* file mentions rendered inline in a reply (fileMentionMarkup) and the "me" bubble's own
   attached-file pill share this one class. */
[data-theme="xp"] .file-mention-pill{
  border:1px solid #919b9c; border-radius:0; background:#fff; color:#0a246a;
}
[data-theme="xp"] .file-mention-pill:hover{background:#0a5bc4; color:#fff; border-color:#0a246a}
[data-theme="xp"] .upload-state-chip{border:1px solid #919b9c; border-radius:0; background:#fff; color:#4a4a4a}
[data-theme="xp"] .upload-state-uploaded{color:#0a5bc4; border-color:#0a5bc4}
[data-theme="xp"] .upload-state-error{color:#a32018; border-color:#a32018}

/* ------------------------------------------------------------------ */
/* citation / source chips — [[ref:...]] pills in reply prose, plus their right-click menu
   and hover preview (chat.js parseRefChips/LinkContextMenu/LinkHoverPreview) */
[data-theme="xp"] .ref-chip{
  border:1px solid #919b9c; border-radius:0; background:#f6f5ef; color:#000; font-family:var(--ui);
}
[data-theme="xp"] .ref-chip:hover{border-color:#316ac5; background:#eaf1fc; color:#0a246a}
[data-theme="xp"] .ref-chip-dot{background:#0a5bc4}
[data-theme="xp"] .link-context-menu{
  border:1px solid #0a246a; border-radius:0; background:#ECE9D8; box-shadow:2px 2px 6px rgba(0,0,0,.35); padding:2px;
}
[data-theme="xp"] .link-context-menu-item{border-radius:0; color:#000; font-family:var(--ui); font-size:11px}
[data-theme="xp"] .link-context-menu-item:hover{background:#316ac5; color:#fff}
[data-theme="xp"] .link-hover-preview{
  border:1px solid #919b9c; border-radius:0; background:#fff; box-shadow:2px 2px 6px rgba(0,0,0,.3);
}
[data-theme="xp"] .link-hover-preview-title{color:#0a246a; font-family:var(--ui)}
[data-theme="xp"] .link-hover-preview-host{color:#7a7568; font-family:var(--mono)}
[data-theme="xp"] .link-hover-preview-note{color:#4a4a4a}
[data-theme="xp"] .link-hover-preview-img{border-radius:0; background:#f6f5ef}
[data-theme="xp"] .link-hover-preview-title-skel{background:#e4e2d8}

/* inline yes/no + smart-option pills + the web-search consent banner (same pill language
   as the quick-reply/inline-option chips) — read as XP command buttons, not accent pills. */
[data-theme="xp"] .quick-reply-chip,
[data-theme="xp"] .inline-option-pill{
  border:1px solid #003c74; border-radius:3px; background:var(--xp-face);
  box-shadow:inset 1px 1px 0 #fff; color:#000; font-family:var(--ui); font-size:11px;
}
[data-theme="xp"] .quick-reply-chip:hover,
[data-theme="xp"] .inline-option-pill:hover{background:var(--xp-face-hot); color:#000}
[data-theme="xp"] .quick-reply-chip:disabled,
[data-theme="xp"] .inline-option-pill:disabled{opacity:.5}
[data-theme="xp"] .websearch-consent-banner{border:1px solid #b58f2a; border-radius:0; background:#f7e8b5}
[data-theme="xp"] .websearch-consent-text{color:#000}

/* ------------------------------------------------------------------ */
/* tool-call and result cards — "What Yarnball did" trail (classic + GUI result modes) */
[data-theme="xp"] .ywd-toggle{
  font-family:var(--ui); font-size:10px; letter-spacing:0; text-transform:uppercase; color:#4a4a4a;
}
[data-theme="xp"] .ywd-toggle:hover{color:#0a246a}
[data-theme="xp"] .ywd-toggle .ywd-tick{color:var(--trust-green)}
[data-theme="xp"] .ywd-list{border-left:2px solid #d8d4c8}
[data-theme="xp"] .ywd-step{color:#000}
[data-theme="xp"] .ywd-step.bad{color:#a32018}
[data-theme="xp"] .ywd-mark{color:var(--trust-green)}
[data-theme="xp"] .ywd-step.bad .ywd-mark{color:#a32018}
[data-theme="xp"] .ywd-tool{color:#7a7568}
[data-theme="xp"] .gui-markers{gap:3px}
[data-theme="xp"] .gui-marker{
  border:1px solid #919b9c; border-radius:0; background:#fff; color:#000; font-family:var(--mono); font-size:10px;
}
[data-theme="xp"] .gui-marker:hover{background:#c1d2ee; border-color:#316ac5}
[data-theme="xp"] .gui-items{border:1px solid #919b9c; border-radius:0}
[data-theme="xp"] .gui-item{background:#fff; border-bottom:1px solid #e4e2d8}
[data-theme="xp"] .gui-item-hd{color:#000}
[data-theme="xp"] .gui-item-hd:hover{background:#fff7d6}
[data-theme="xp"] .gui-item.marked{outline:2px solid #0a5bc4; outline-offset:-2px}
[data-theme="xp"] .gui-item-title{color:#000; font-weight:700; font-size:11.5px}
[data-theme="xp"] .gui-item-sub{color:#7a7568; font-family:var(--mono); font-size:9.5px}
[data-theme="xp"] .gui-item-bd{border-top:1px solid #e4e2d8}
[data-theme="xp"] .feed-item{border-bottom:1px solid #e4e2d8}
[data-theme="xp"] .feed-item-title{color:#000}
[data-theme="xp"] .feed-item-sub{color:#7a7568; font-family:var(--mono); font-size:9.5px}
/* .gui-item-note input is a bare <input> — already covered by xp.css's generic inset-field
   rule (higher specificity than the DS's Georgia-serif override), left alone on purpose. */

/* ------------------------------------------------------------------ */
/* streaming / typing indicators — live checklist while a turn streams, the escalating
   wait-tip line, and D.TypingIndicator's fallback single line */
[data-theme="xp"] .yls-mark{color:var(--trust-green); font-family:var(--mono)}
[data-theme="xp"] .yls-label{color:#000; font-family:var(--ui); font-size:11px}
[data-theme="xp"] .yls-row.yls-doing .yls-mark{color:#0a5bc4}
[data-theme="xp"] .yls-row.yls-doing .yls-label{color:#000}
[data-theme="xp"] .yls-row.yls-done .yls-mark{color:var(--trust-green)}
[data-theme="xp"] .yls-row.yls-done .yls-label{color:#4a4a4a}
[data-theme="xp"] .yls-row.yls-failed .yls-mark{color:#a32018}
[data-theme="xp"] .wait-tip{color:#4a4a4a; font-family:var(--ui); font-style:normal; font-size:11px}
[data-theme="xp"] .step{color:#4a4a4a; font-family:var(--ui); font-style:italic; font-size:11px}
[data-theme="xp"] .sync-status-chip{
  border:1px inset #d4d0c8; border-radius:0; background:#ECE9D8; color:#333; font-family:var(--ui); font-size:10px;
}
[data-theme="xp"] .sync-status-dot{background:#0a5bc4}

/* ------------------------------------------------------------------ */
/* error and retry states — ErrorText, queued turns, Send->Stop, email fail states */
[data-theme="xp"] .err{color:#a32018; font-family:var(--mono); font-size:11px}
[data-theme="xp"] .queued-row{border:1px dashed #aca899; border-radius:0; background:#f6f5ef}
[data-theme="xp"] .queued-badge{
  border:1px solid #b58f2a; border-radius:0; background:#f7e8b5; color:#5c4500; font-family:var(--mono); font-size:9px;
}
[data-theme="xp"] .queued-btn{
  border:1px solid #003c74; border-radius:3px; background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff;
  color:#000; font-family:var(--ui); font-size:10.5px;
}
[data-theme="xp"] .queued-btn:hover{background:var(--xp-face-hot)}
[data-theme="xp"] .send.send-stop{
  background:linear-gradient(180deg,#e2685f 0%,#c6362c 45%,#a32018 100%);
  color:#fff; border-color:#7a1710; box-shadow:none;
}
[data-theme="xp"] .send.send-stop:hover{background:linear-gradient(180deg,#f08b83 0%,#d4483e 45%,#b32a21 100%); color:#fff}

/* ------------------------------------------------------------------ */
/* model badge + lock indicator (main.js ModelLockBadge — real classes are
   .model-toggle-wrap / .model-lock-standalone / .model-toggle-pill/side/track/knob;
   .model-badge-lock/.trust named in the brief do not exist in this codebase). The pill
   and lock ride the Luna titlebar itself, so xp.css already skins
   .model-toggle-pill/side/side.is-current/track/knob and .model-lock-standalone(.is-ok)
   as caption-bar chrome — not repeated here. Only the model-switch modal content (a
   plain white dialog body, not caption chrome) is this file's to skin. */
[data-theme="xp"] .model-switch-choice{border:1px solid #919b9c; border-radius:0; background:#fff}
[data-theme="xp"] .model-switch-choice:hover{border-color:#316ac5; background:#eaf1fc}
[data-theme="xp"] .model-switch-choice.is-primary{border-color:#0a5bc4; background:#eaf1fc}
[data-theme="xp"] .model-switch-choice-title{color:#0a246a; font-weight:700}
[data-theme="xp"] .model-switch-choice-desc{color:#4a4a4a}

/* ------------------------------------------------------------------ */
/* memory chips + memory-save turn footer (chat.js MessageRow 'memory' kind ->
   D.MemoryChip, class .memchip; memory-space.js is a redirect shim to Settings and
   renders nothing of its own to skin). */
[data-theme="xp"] .memory-extras{margin:2px 0 14px}
[data-theme="xp"] .memchip{
  border:1px solid #919b9c; border-radius:0; background:#eaf1fc; color:#000; font-family:var(--ui); font-size:11px;
}
[data-theme="xp"] .memchip .mk{background:#0a5bc4}
[data-theme="xp"] .memchip .mx{color:#7a7568; font-family:var(--mono)}
[data-theme="xp"] .memchip .mx:hover{color:#a32018}

/* ------------------------------------------------------------------ */
/* email row surfaces (chat.js EmailRow/EmailList/EmailReplyBox — the structured inbox
   list a reply renders above its prose) */
[data-theme="xp"] .email-list{border:1px solid #919b9c; border-radius:0}
[data-theme="xp"] .email-row{border-bottom:1px solid #e4e2d8}
/* .email-row-head's own base look (background/color/padding) is already handled by
   xp.css's grouped .mhead/.account-card-header/.email-row-head/.apps-workspace-bar rule
   — only the hover/unread states it doesn't cover are added here. */
[data-theme="xp"] .email-row-head:hover{background:#fff7d6}
[data-theme="xp"] .email-row.unread .email-row-head{background:#eaf1fc}
[data-theme="xp"] .email-row.unread .email-row-head:hover{background:#d6e4f7}
[data-theme="xp"] .email-unread-dot{color:#0a5bc4}
[data-theme="xp"] .email-from{color:#000}
[data-theme="xp"] .email-row.unread .email-from{color:#0a246a}
[data-theme="xp"] .email-date{color:#7a7568; font-family:var(--mono)}
[data-theme="xp"] .email-status{border-radius:0; font-family:var(--mono)}
[data-theme="xp"] .email-status.is-action{background:#f7e8b5; color:#5c4500; border:1px solid #b58f2a}
[data-theme="xp"] .email-status.is-info{background:#f6f5ef; color:#4a4a4a; border:1px solid #d8d4c8}
[data-theme="xp"] .email-status.is-unknown{background:transparent; color:#7a7568; border:1px dashed #aca899}
[data-theme="xp"] .email-hover-summary{
  border:1px solid #919b9c; border-radius:0; background:#fffbe6; box-shadow:2px 2px 6px rgba(0,0,0,.25); color:#000;
}
[data-theme="xp"] .email-detail{background:#f6f5ef; border-top:1px solid #d8d4c8}
[data-theme="xp"] .email-proposals{border-bottom:1px solid #d8d4c8}
[data-theme="xp"] .email-proposals-summary{color:#000}
[data-theme="xp"] .email-proposals-verdict{color:#4a4a4a; font-family:var(--mono)}
[data-theme="xp"] .email-proposals-status{color:#4a4a4a}
[data-theme="xp"] .email-proposals-status.is-error{color:#a32018}
[data-theme="xp"] .email-propose-btn{
  border:1px solid #003c74; border-radius:3px; background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff; color:#000;
}
[data-theme="xp"] .email-propose-btn:hover{background:var(--xp-face-hot)}
[data-theme="xp"] .email-detail-loading{color:#4a4a4a}
[data-theme="xp"] .email-detail-meta{color:#000}
[data-theme="xp"] .email-detail-label{color:#7a7568; font-family:var(--mono)}
[data-theme="xp"] .email-detail-body{border:1px solid #d8d4c8; border-radius:0; background:#fff; color:#000}
[data-theme="xp"] .email-attach-chip{border:1px solid #919b9c; border-radius:0; background:#fff; color:#0a246a}
[data-theme="xp"] .email-attach-chip:hover{background:#0a5bc4; color:#fff; border-color:#0a246a}
[data-theme="xp"] .email-custom-reply-btn{color:#0a246a}
[data-theme="xp"] .email-custom-reply-btn:hover{color:#a32018}
[data-theme="xp"] .email-reply-box{border-top:1px solid #d8d4c8}
[data-theme="xp"] .email-reply-status{color:#4a4a4a}
[data-theme="xp"] .email-reply-status.is-error{color:#a32018}
[data-theme="xp"] .email-reply-status.is-ok{color:var(--trust-green)}
[data-theme="xp"] .email-ask-yarnball{
  border:1px solid #003c74; border-radius:3px; background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff; color:#000;
}
[data-theme="xp"] .email-ask-yarnball:hover{background:var(--xp-face-hot)}
/* .email-reply-textarea is a bare <textarea> — already covered by xp.css's generic
   inset-field rule, left alone on purpose. */

/* ------------------------------------------------------------------ */
/* security path / verification nodes — reached from the header lock (ModelLockBadge ->
   SecurityPathView, security-path.js). Real classes are .sec-panel/.sec-diagram-*/
   .sec-lock-*/.secfact-* — .secnode/.secedge/.secev do exist in _ds_bundle.css but no
   component in app/*.js ever renders them (grepped: zero hits), so they are dead CSS and
   deliberately left alone; .secbox is real but already covered by xp.css's own .secbox
   rule (grouped with .mcard/.conntile), so it is not repeated here. The dialog chrome
   itself (Luna caption + #ECE9D8 body) already comes from xp.css's .modal .mcard rule —
   this section only skins the content SecurityPathView paints inside it. */
[data-theme="xp"] .sec-panel{padding:8px 10px}
[data-theme="xp"] .sec-summary{color:#4a4a4a; font-family:var(--ui); font-size:11px}
[data-theme="xp"] .sec-summary-state{color:#000}
[data-theme="xp"] .sec-summary.is-fail .sec-summary-state{color:#a32018}
[data-theme="xp"] .sec-summary-when{color:#7a7568}
[data-theme="xp"] .sec-err{color:#a32018; font-family:var(--mono); font-size:11px}
[data-theme="xp"] .sec-diagram-row{border-radius:0; padding:3px 6px}
[data-theme="xp"] .sec-diagram-row:hover{background:#fff7d6}
[data-theme="xp"] .sec-diagram-row:focus-visible{outline:1px dotted #0a246a; outline-offset:1px}
[data-theme="xp"] .sec-diagram-node{border-radius:0; border:1px solid #919b9c; background:#fff; color:#7a7568}
[data-theme="xp"] .sec-diagram-row.is-ok .sec-diagram-node{border-color:var(--trust-green); color:var(--trust-green); background:#eaf7ea}
[data-theme="xp"] .sec-diagram-row.is-fail .sec-diagram-node{border-color:#a32018; color:#a32018; background:#fbeaea}
[data-theme="xp"] .sec-diagram-row.is-active .sec-diagram-node{border-color:#0a5bc4; color:#0a5bc4; box-shadow:inset 0 0 0 1px #0a5bc4}
[data-theme="xp"] .sec-diagram-label{color:#000; font-size:12px; font-weight:700}
[data-theme="xp"] .sec-diagram-sub{color:#4a4a4a; font-size:11px}
[data-theme="xp"] .sec-diagram-row.is-fail .sec-diagram-sub{color:#a32018}
[data-theme="xp"] .sec-diagram-state{border-radius:0}
[data-theme="xp"] .sec-diagram-state.is-ok{background:var(--trust-green)}
[data-theme="xp"] .sec-diagram-state.is-fail{background:#a32018}
[data-theme="xp"] .sec-diagram-spin{border-color:#aca899; border-top-color:#0a5bc4}
[data-theme="xp"] .sec-diagram-link{background:#aca899}
[data-theme="xp"] .sec-diagram-link.is-done{background:var(--trust-green)}
[data-theme="xp"] .sec-diagram-link.is-fail{background:#a32018}
[data-theme="xp"] .sec-e2e-only-row{border:1px solid #919b9c; border-radius:0; background:#f6f5ef}
[data-theme="xp"] .sec-e2e-only-check{accent-color:#0a5bc4}
[data-theme="xp"] .sec-e2e-only-text{color:#000}
[data-theme="xp"] .sec-e2e-only-text b{color:#0a246a}
[data-theme="xp"] .sec-actions{padding-top:6px; border-top:1px solid #d8d4c8}
[data-theme="xp"] .sec-privacy-link-btn{color:#0a246a; border-radius:0}
[data-theme="xp"] .sec-privacy-link-btn:hover{background:#eaf1fc; color:#0a246a}
[data-theme="xp"] .sec-lock-body,
[data-theme="xp"] .sec-lock-shackle{border-radius:0}
[data-theme="xp"] .sec-lock.is-pending{color:#7a7568}
[data-theme="xp"] .sec-lock.is-fail{color:#a32018}
[data-theme="xp"] .sec-lock.is-ok{color:var(--trust-green)}
[data-theme="xp"] .secfact-back{
  border:1px solid #919b9c; border-radius:0; background:var(--xp-face); box-shadow:inset 1px 1px 0 #fff;
  color:#000; font-family:var(--ui); font-size:11px;
}
[data-theme="xp"] .secfact-back:hover{background:var(--xp-face-hot)}
[data-theme="xp"] .secfact-detail-title{color:#0a246a; font-family:var(--ui); font-size:14px; font-weight:700}
[data-theme="xp"] .secfact-detail-answer{color:#000}
[data-theme="xp"] .secfact-detail-answer.is-fail{color:#a32018}
[data-theme="xp"] .secfact-detail-answer.is-ok{color:var(--trust-green)}
[data-theme="xp"] .secfact-detail-note{color:#4a4a4a}
[data-theme="xp"] .secfact-detail-card{border:1px solid #919b9c; border-radius:0; background:#f6f5ef}
[data-theme="xp"] .secfact-detail-card-label{color:#7a7568; font-family:var(--mono)}
[data-theme="xp"] .secfact-line{border-bottom:1px solid #e4e2d8}
[data-theme="xp"] .secfact-line-k{color:#4a4a4a}
[data-theme="xp"] .secfact-line-v{color:#000}
[data-theme="xp"] .secfact-line-v.is-ok{color:var(--trust-green)}
[data-theme="xp"] .secfact-line-v.is-fail{color:#a32018}
[data-theme="xp"] .secfact-ev{color:#000}
[data-theme="xp"] .secfact-receipt-toggle{color:#0a246a}
[data-theme="xp"] .secfact-receipt{border:1px solid #919b9c; border-radius:0; background:#f6f5ef; font-family:var(--mono)}
[data-theme="xp"] .sec-privacy-list,
[data-theme="xp"] .sec-privacy-item{color:#000}
[data-theme="xp"] .sec-privacy-footer{color:#4a4a4a}