/* debby.health 05 — c-triage.css: the report-triage component (live debby.health V2 stamp + annotation, scoped under
   .ai-lt). Used by the home P.03 and by /report-triage/. Split from a.css unchanged. JS: /wp-content/plugins/debby-core/assets/js/c-triage.js */

/* =====================================================================================================
   P.03 REPORT TRIAGE — ported from debby.health (live 2026-10-26: style.css §10, tokens, main.js §8)
   V2 stamp + annotation. Everything is scoped under .ai-lt so nothing leaks into the rest of A.
   Live → A changes: .ai-js → .ai-lt[data-ai-lt-on] (set by a.js); [data-site="debby"] variants applied directly;
   hidden pre-states only under html.ai-motion; the scroll entrance reverses (v1.2), clicks are unchanged.
   ===================================================================================================== */
.ai-lt {
  --ai-font-hand: "LXGW WenKai TC", "Kaiti TC", "STKaiti", "BiauKai", "DFKai-SB", var(--ai-font-display);
  --ai-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ai-font-sans: "IBM Plex Sans", -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --ai-lt-red-500: #D24C49; --ai-lt-amber-500: #B17000; --ai-lt-amber-200: #EBCBA7;
  --ai-lt-teal-300: #89D7DC; --ai-lt-teal-600: #247B80; --ai-lt-teal-800: #124D50;
  --ai-lt-n100: #E2ECED; --ai-lt-n200: #D9E8E9; --ai-lt-n600: #51686B; --ai-lt-n800: #183437;
  --ai-lt-green-700: #17653C; --ai-lt-green-50: #E9F8ED;
  --ai-note-bg: var(--ai-pink-50); --ai-mark: var(--ai-pink);
  --ai-lt-caption: .875rem; --ai-lt-body: clamp(1.0625rem, 1.04rem + .1vw, 1.125rem);
  --ai-lt-ease-v: cubic-bezier(.22, 1, .36, 1); --ai-lt-ease-io: cubic-bezier(.65, 0, .35, 1); --ai-lt-ease-std: cubic-bezier(.2, 0, 0, 1);
  --ai-lt-shadow-md: 0 8px 24px rgba(24, 52, 55, .08); --ai-lt-shadow-sm: 0 2px 8px rgba(24, 52, 55, .06), 0 1px 2px rgba(24, 52, 55, .04); --ai-lt-shadow-xs: 0 1px 2px rgba(24, 52, 55, .06);
  position: relative; overflow-x: clip; padding: clamp(24px, 3vw, 40px) 0 0;
}
.ai-lt .ai-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; width: 480px; height: 480px; left: -160px; bottom: -120px; }
.ai-lt .ai-blob--pink { background: radial-gradient(circle at 50% 50%, var(--ai-pink-100), rgba(255, 225, 234, 0) 70%); }
.ai-lt .ai-hand { font-family: var(--ai-font-hand); font-weight: 400; letter-spacing: .02em; }
.ai-lt .ai-mono { font-family: var(--ai-font-mono); font-variant-numeric: tabular-nums; }
.ai-lt .ai-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--ai-teal-700); text-decoration: underline; text-decoration-thickness: 1.5px; }
.ai-lt .ai-textlink svg { width: 16px; height: 16px; flex: none; transition: transform .16s; }
.ai-lt .ai-textlink:hover svg { transform: translateX(3px); }
.ai-lt .ai-sample { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 6px; background: var(--ai-amber-50); color: var(--ai-amber-700); border: 1px solid var(--ai-lt-amber-200); font-size: var(--ai-lt-caption); font-weight: 700; white-space: nowrap; line-height: 1.5; }
.ai-lt .ai-flag { font-family: var(--ai-font-sans); font-size: var(--ai-lt-caption); font-weight: 700; padding: 0 6px; border-radius: 4px; line-height: 1.5; letter-spacing: 0; }
.ai-lt .ai-flag--red { color: var(--ai-red-700); background: var(--ai-red-50); }
.ai-lt .ai-flag--ok { color: var(--ai-lt-green-700); background: var(--ai-lt-green-50); }
.ai-lt .ai-stamp {
  --tilt: -2deg; --fg: var(--ai-red-700); --bg: var(--ai-red-50); --ic: var(--ai-lt-red-500);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px;
  border: 1.5px solid currentColor; border-radius: 6px; background: var(--bg); color: var(--fg);
  box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px color-mix(in srgb, currentColor 50%, transparent);
  font: 700 var(--ai-lt-caption)/1.45 var(--ai-font-sans); letter-spacing: .04em; white-space: nowrap;
  transform: rotate(var(--tilt)); transform-origin: 50% 40%;
}
.ai-lt .ai-stamp svg { width: 16px; height: 16px; flex: none; color: var(--ic); }
.ai-lt .ai-stamp--wait { --fg: var(--ai-amber-700); --bg: var(--ai-amber-50); --ic: var(--ai-lt-amber-500); --tilt: 1.5deg; }
.ai-lt .ai-stamp--gap { --fg: var(--ai-teal-700); --bg: var(--ai-teal-50); --ic: var(--ai-lt-teal-600); --tilt: -1deg; border-style: dashed; border-color: var(--ai-lt-teal-600); box-shadow: none; }
.ai-lt .ai-stamp--lg { font-size: 1rem; padding: 6px 16px 6px 12px; }
.ai-lt .ai-stamp--lg svg { width: 20px; height: 20px; }
.ai-lt .ai-note { font-size: .9375rem; color: var(--ai-lt-n600); flex-basis: 100%; }
.ai-lt .ai-endrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; position: relative; z-index: 2; }
/* live body size (17–18px) for the rows: the live page inherits it from body */
.ai-lt .ai-triage { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; position: relative; z-index: 2; }
.ai-lt .ai-triage__report { position: relative; background: #fff; border: 1px solid var(--ai-lt-n200); border-radius: 14px; padding: 24px clamp(14px, 2vw, 26px) 18px; box-shadow: var(--ai-lt-shadow-md); }
.ai-lt .ai-triage__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ai-lt-n800); flex-wrap: wrap; }
.ai-lt .ai-triage__title { font-weight: 700; font-size: 1.125rem; }
.ai-lt .ai-triage__meta { margin-top: 2px; font-family: var(--ai-font-mono); font-size: var(--ai-lt-caption); color: var(--ai-lt-n600); }
.ai-lt .ai-triage__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 132px; gap: 12px; margin: 10px 0 0; padding: 0 12px 6px 28px; font-size: var(--ai-lt-caption); color: var(--ai-lt-n600); font-weight: 700; }
.ai-lt .ai-triage__row { border-bottom: 1px dashed var(--ai-lt-n200); }
.ai-lt .ai-triage__btn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 132px; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0; padding: 12px 12px 12px 28px; font: inherit; font-size: var(--ai-lt-body); color: inherit; text-align: left; background: transparent; border: 0; border-radius: 10px; cursor: pointer; transition: background-color .24s var(--ai-lt-ease-std); }
.ai-lt .ai-triage__btn:hover { background: var(--ai-teal-50); }
.ai-lt .ai-triage__row.is-active .ai-triage__btn { box-shadow: inset 3px 0 0 var(--ai-pink); background: var(--ai-pink-50); }
.ai-lt .ai-triage__name { font-weight: 700; }
.ai-lt .ai-triage__val { position: relative; justify-self: start; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-family: var(--ai-font-mono); font-weight: 500; color: var(--ai-red-700); font-variant-numeric: tabular-nums; }
.ai-lt .ai-triage__val small { font-size: var(--ai-lt-caption); color: var(--ai-lt-n600); margin-left: 3px; }
.ai-lt .ai-triage__num { position: relative; display: inline-flex; align-items: baseline; }
.ai-lt .ai-triage__val--ok { color: var(--ai-lt-n800); }
.ai-lt .ai-triage__val--none { color: var(--ai-lt-n600); font-family: var(--ai-font-sans); font-weight: 400; }
.ai-lt .ai-triage__btn .ai-stamp { justify-self: start; }
.ai-lt .ai-triage__circle { display: none; max-width: none; position: absolute; left: -12px; top: -9px; width: calc(100% + 24px); height: calc(100% + 18px); overflow: visible; pointer-events: none; }
.ai-lt .ai-triage__circle path { fill: none; stroke: var(--ai-mark); stroke-width: 2.2; stroke-linecap: round; }
.ai-lt .ai-triage__pulse { display: none; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ai-pink); }
.ai-lt .ai-triage__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ai-lt-dot 2.4s ease-out infinite; }
.ai-lt .ai-triage__foot { margin-top: 14px; font-size: var(--ai-lt-caption); color: var(--ai-lt-n600); }
.ai-lt .ai-triage__note { padding: 4px 12px 18px 28px; }
.ai-lt .ai-triage__item { display: none; }
.ai-lt .ai-triage__dl { margin: 0; display: grid; gap: 12px; }
.ai-lt .ai-triage__dl div { display: grid; gap: 2px; }
.ai-lt .ai-triage__dl dt { font-size: var(--ai-lt-caption); font-weight: 700; color: var(--ai-teal-700); letter-spacing: .04em; }
.ai-lt .ai-triage__dl dd { margin: 0; font-size: var(--ai-lt-body); line-height: 1.7; color: var(--ai-lt-n800); }
.ai-lt .ai-triage__rowsign { margin-top: 10px; text-align: right; color: var(--ai-teal-700); font-family: var(--ai-font-hand); font-size: 1.125rem; }
.ai-lt .ai-triage__rowsign svg, .ai-lt .ai-triage__sign svg { display: inline-block; width: 16px; height: 16px; color: var(--ai-pink); vertical-align: -1px; margin-left: 2px; }
.ai-lt .ai-triage__panel { --tilt: 1deg; position: sticky; top: calc(var(--ai-header-h) + 28px); background: var(--ai-note-bg); padding: 30px 28px 22px; border-radius: 4px 4px 18px 4px; box-shadow: 0 2px 3px rgba(24, 52, 55, .06), 0 22px 40px -18px rgba(24, 52, 55, .35); transform: rotate(var(--tilt)); }
.ai-lt .ai-triage__tape { position: absolute; top: -12px; left: calc(50% - 46px); width: 92px; height: 24px; transform: rotate(-3deg); background: radial-gradient(circle, rgba(255, 255, 255, .95) 2px, transparent 2.6px) 0 0 / 11px 11px, rgba(255, 196, 214, .92); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.ai-lt .ai-triage__phead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ai-lt .ai-triage__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: var(--ai-lt-shadow-sm); flex: none; }
.ai-lt .ai-triage__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ai-lt .ai-triage__label { display: flex; align-items: center; gap: 6px; font-size: 1.5rem; color: var(--ai-lt-teal-800); }
.ai-lt .ai-triage__label svg { width: 18px; height: 18px; color: var(--ai-pink); }
.ai-lt .ai-triage__body { min-height: 260px; }
.ai-lt .ai-triage__body .ai-triage__note { padding: 0; }
.ai-lt .ai-triage__body .ai-triage__rowsign { display: none; }
.ai-lt .ai-triage__body .ai-triage__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1.5px dashed color-mix(in srgb, var(--ai-lt-teal-300) 70%, transparent); font-weight: 700; }
.ai-lt .ai-triage__item .ai-mono { font-weight: 500; }
.ai-lt .ai-triage__sign { margin-top: 16px; text-align: right; color: var(--ai-teal-700); font-size: 1.25rem; }
.ai-lt .ai-triage__arrow { max-width: none; position: absolute; left: -84px; top: 44px; width: 90px; height: 60px; overflow: visible; pointer-events: none; }
.ai-lt .ai-triage__arrow path { fill: none; stroke: var(--ai-mark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ai-lt .ai-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 48px); position: relative; z-index: 2; }
.ai-lt .ai-legend li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; background: #fff; border-radius: 16px; box-shadow: var(--ai-lt-shadow-xs); border: 1px solid var(--ai-lt-n100); }
/* no JS (or before a.js marks the box): every note is visible under its row, the panel is hidden */
.ai-lt:not([data-ai-lt-on]) .ai-triage__panel { display: none; }
.ai-lt:not([data-ai-lt-on]) .ai-triage { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
/* JS on */
.ai-lt[data-ai-lt-on] .ai-triage__pulse { display: block; }
.ai-lt[data-ai-lt-on] .ai-triage__row.is-seen .ai-triage__pulse, .ai-lt[data-ai-lt-on] .ai-triage__row.is-active .ai-triage__pulse { display: none; }
.ai-lt[data-ai-lt-on] .ai-triage__circle { display: block; }
.ai-lt[data-ai-lt-on] .ai-triage__circle path { stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ai-lt-ease-io); }
.ai-lt[data-ai-lt-on] .ai-triage__row.is-active .ai-triage__circle path { stroke-dashoffset: 0; }
.ai-lt[data-ai-lt-on] .ai-triage__row.is-stamped .ai-triage__btn .ai-stamp { animation: ai-lt-thump 520ms cubic-bezier(.3, 1.5, .5, 1) 1 both; }
.ai-lt[data-ai-lt-on] .ai-triage__arrow path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.ai-lt[data-ai-lt-on] .ai-triage__panel.is-drawn .ai-triage__arrow path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ai-lt-ease-io); }
.ai-lt[data-ai-lt-on] .ai-triage__panel.is-drawn .ai-triage__arrow path + path { transition-delay: .38s; transition-duration: .22s; }
.ai-lt[data-ai-lt-on] .ai-triage__arrow { transition: top .3s var(--ai-lt-ease-std); }
.ai-lt .ai-triage__body.is-new .ai-triage__item, .ai-lt .ai-triage__body.is-new .ai-triage__dl > div { animation: ai-lt-write 420ms var(--ai-lt-ease-v) both; }
.ai-lt .ai-triage__body.is-new .ai-triage__dl > div:nth-child(1) { animation-delay: 90ms; }
.ai-lt .ai-triage__body.is-new .ai-triage__dl > div:nth-child(2) { animation-delay: 180ms; }
.ai-lt .ai-triage__body.is-new .ai-triage__dl > div:nth-child(3) { animation-delay: 270ms; }
/* stamps flip into place when the report scrolls in; they flip out again when it drops back below (v1.2) */
.ai-motion .ai-lt[data-ai-lt-on] [data-ai-stamp] { opacity: 0; }
.ai-motion .ai-lt[data-ai-lt-on] .ai-triage__report.is-in [data-ai-stamp] { opacity: 1; animation: ai-lt-flip 650ms var(--ai-lt-ease-v) var(--sd, 0ms) 1 both; }
@media (min-width: 1025px) and (pointer: fine) {
  .ai-lt[data-ai-lt-on] .ai-triage__row .ai-triage__note { display: none; }
}
@media not all and (min-width: 1025px) and (pointer: fine) {
  .ai-lt .ai-triage { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
  .ai-lt[data-ai-lt-on] .ai-triage__panel { display: none; }
  .ai-lt[data-ai-lt-on] .ai-triage__row:not(.is-active) .ai-triage__note { display: none; }
  .ai-lt[data-ai-lt-on] .ai-triage__row.is-active .ai-triage__note { margin: 4px 0 14px; padding: 18px 18px 16px; background: var(--ai-note-bg); border-radius: 4px 4px 14px 4px; box-shadow: 0 10px 22px -14px rgba(24, 52, 55, .35); animation: ai-lt-write 380ms var(--ai-lt-ease-v) both; }
}
@media (max-width: 767.98px) { .ai-lt .ai-legend { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) {
  .ai-lt .ai-triage__cols { display: none; }
  .ai-lt .ai-triage__btn { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name stamp" "val stamp"; gap: 4px 10px; padding: 12px 8px 12px 26px; }
  .ai-lt .ai-triage__name { grid-area: name; }
  .ai-lt .ai-triage__val { grid-area: val; }
  .ai-lt .ai-triage__btn .ai-stamp { grid-area: stamp; justify-self: end; }
  .ai-lt .ai-triage__note { padding-left: 12px; padding-right: 8px; }
  .ai-lt[data-ai-lt-on] .ai-triage__row.is-active .ai-triage__note { padding: 16px 14px 14px; }
  .ai-lt .ai-triage__head { flex-direction: column; }
}
@media (max-width: 359.98px) {
  .ai-lt .ai-triage__btn { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "val" "stamp"; }
  .ai-lt .ai-triage__btn .ai-stamp { justify-self: start; }
}
@keyframes ai-lt-dot { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes ai-lt-thump { 0% { transform: scale(1) rotate(var(--tilt)); } 30% { transform: scale(1.24) rotate(calc(var(--tilt) - 5deg)); } 62% { transform: scale(.94) rotate(var(--tilt)); } 100% { transform: scale(1) rotate(var(--tilt)); } }
@keyframes ai-lt-write { from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ai-lt-flip {
  0% { opacity: 0; transform: perspective(520px) translate3d(0, -16px, 0) rotateX(-95deg) scale(1.25) rotate(var(--tilt)); }
  40% { opacity: 1; }
  65% { transform: perspective(520px) rotateX(14deg) scale(1) rotate(var(--tilt)); }
  100% { opacity: 1; transform: perspective(520px) rotateX(0) rotate(var(--tilt)); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-lt .ai-triage__pulse::after { display: none; }
  .ai-lt [data-ai-stamp] { opacity: 1 !important; }
  .ai-lt .ai-triage__arrow path, .ai-lt .ai-triage__circle path { transition: none !important; }
}