/* lab_declare.html — page-specific styles */
/* Declare-card form body: darker (#0e101a) in dark theme, with a solid dark
fill on the active segment toggle. Scoped to this page so the global
.chart-ctrl-btn (token_detail charts) is untouched.
body.dark .ldc-8 (0,0,2,1) beats inline-extracted's .ldc-8 (0,0,1,0). */
body.dark .ldc-8 { background: #0e101a; }
body.dark .ldc-8 .chart-ctrl-btn.active { background: rgb(23 25 35) !important; }
.lab-sec { display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 14px;padding-left:12px; }
.lab-sec::before { content:"";width:6px;height:6px;border-radius:50%;background:#FFB400;flex-shrink:0; }
.lab-sec .lab-sec-line { flex:1;height:1px;background:var(--border-card); }
/* ── Tabs bar (unified across declare/review/assess) ── */
.tabs-bar { display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap; }
.tabs-bar .spacer { flex:1; }
.lab-tabs { display:flex;gap:4px;padding:3px;background:var(--gray-100);border-radius:8px;width:fit-content; }
.lab-tab {
font-family:var(--font-mono);font-size:10.5px;font-weight:600;
padding:6px 16px;border-radius:6px;
border:1px solid transparent;background:transparent;color:var(--text-muted);
cursor:pointer;transition:background 0.18s,color 0.15s,box-shadow 0.18s;
}
.lab-tab .ct {
font-family:var(--font-mono);font-size:10px;font-weight:700;
background:var(--gray-100);color:var(--text-muted);
padding:1px 7px;border-radius:999px;line-height:1.5;
}
.lab-tab:hover { color:var(--text);background:rgba(0,0,0,0.04); }
.lab-tab.active { background:var(--surface);border-color:var(--gray-200);color:var(--text);box-shadow:var(--shadow-xs); }
.lab-tab.active .ct { background:var(--brand-amber-bg);color:var(--brand-amber-strong); }
.lab-panel { display:none;opacity:0;transition:opacity 0.2s ease; }
.lab-panel.active { display:block;opacity:1; }
/* ── Buttons: uses .rf-btn-tiny from style.css ── */
/* ── Date picker (DS-aligned, same height as .lab-input) ── */
/* ── Date/time input (DS Section 20 · Custom date picker) ── */
.dp-wrap { position:relative; }
.dp-trigger {
display:flex;align-items:center;gap:8px;width:100%;
padding:7px 10px;height:34px;
border:1px solid var(--border-card);border-radius:var(--radius-sm);
background:var(--surface);outline:none;cursor:pointer;
font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text);
letter-spacing:0.02em;transition:border-color 0.15s,box-shadow 0.15s;
}
.dp-trigger:hover { border-color:var(--gray-300); }
.dp-trigger.is-open,.dp-trigger:focus { border-color:var(--brand-amber);box-shadow:0 0 0 3px rgba(255,180,0,0.10); }
.dp-trigger svg { color:var(--text-muted);flex-shrink:0; }
.dp-trigger .dp-val { flex:1;color:var(--text); }
.dp-trigger .dp-placeholder { flex:1;color:var(--text-muted);font-weight:500; }
.dp-clear {
width:18px;height:18px;border-radius:50%;border:none;background:var(--gray-200);
color:var(--text-muted);cursor:pointer;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:11px;line-height:1;transition:background 0.15s,color 0.15s;
}
.dp-clear:hover { background:var(--gray-300);color:var(--text); }
/* Calendar popup */
.dp-popup {
position:fixed;z-index:9999;
background:rgba(255,255,255,0.96);border:1px solid var(--gray-200);
border-radius:14px;padding:12px;min-width:260px;
backdrop-filter:blur(20px) saturate(160%);
box-shadow:0 12px 40px rgba(0,0,0,0.1);
display:none;
}
.dp-popup.is-open { display:block; }
.dp-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.dp-month { font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text);letter-spacing:0.02em; }
.dp-nav {
display:flex;gap:4px;
}
.dp-nav button {
width:24px;height:24px;border-radius:6px;border:1px solid var(--gray-200);
background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;
color:var(--text-muted);transition:all 0.15s;
}
.dp-nav button:hover { border-color:var(--gray-300);color:var(--text); }
.dp-weekdays {
display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-bottom:4px;
}
.dp-weekdays span {
text-align:center;font-family:var(--font-mono);font-size:9px;font-weight:600;
color:var(--text-muted);letter-spacing:0.06em;padding:4px 0;
}
.dp-days { display:grid;grid-template-columns:repeat(7,1fr);gap:2px; }
.dp-day {
width:32px;height:32px;border-radius:8px;border:none;background:transparent;
font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text);
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background 0.12s,color 0.12s;
}
.dp-day:hover { background:var(--gray-100); }
.dp-day.other { color:var(--text-muted);opacity:0.4; }
.dp-day.today { border:1px solid var(--gray-300); }
.dp-day.selected { background:var(--brand-amber);color:#0E0E0E;font-weight:700; }
.dp-day.selected:hover { background:rgba(255,180,0,0.85); }
.dp-foot {
display:flex;align-items:center;justify-content:space-between;
margin-top:8px;padding-top:8px;border-top:1px solid var(--gray-100);
}
.dp-foot button {
font-family:var(--font-mono);font-size:9px;font-weight:600;
letter-spacing:0.06em;text-transform:uppercase;
background:transparent;border:none;cursor:pointer;padding:4px 8px;border-radius:4px;
transition:all 0.15s;
}
.dp-foot .dp-clear { color:var(--text-muted); }
.dp-foot .dp-clear:hover { color:var(--red);background:var(--red-bg); }
.dp-foot .dp-today { color:var(--brand-amber-strong); }
.dp-foot .dp-today:hover { background:var(--brand-amber-bg); }
.dp-time {
display:flex;align-items:center;justify-content:center;gap:4px;
margin-top:8px;padding-top:8px;border-top:1px solid var(--gray-100);
}
.dp-time label {
font-family:var(--font-mono);font-size:9px;font-weight:600;
color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;margin-right:4px;
}
.dp-time input[type="number"] {
width:44px;height:30px;text-align:center;border:1px solid var(--gray-200);border-radius:6px;
font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text);
background:var(--surface);outline:none;-moz-appearance:textfield;padding:0 4px;
}
.dp-time input[type="number"]::-webkit-inner-spin-button,
.dp-time input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none;margin:0; }
.dp-time input[type="number"]:focus { border-color:var(--brand-amber);box-shadow:0 0 0 2px rgba(255,180,0,0.10); }
.dp-time-sep { font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--text-muted); }
/* ── Fluid segmented control (DS Section 19) ── */
.seg-track.fluid { display:grid;width:100%;padding:0;background:transparent;gap:8px; }
.seg-track.fluid.s2 { grid-template-columns:repeat(2,1fr); }
.seg-track.fluid .chart-ctrl-btn {
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:10px 12px;font-size:12px;font-weight:600;
background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;
color:var(--text);cursor:pointer;
transition:background 0.18s,box-shadow 0.18s,color 0.15s;
}
.seg-track.fluid .chart-ctrl-btn:hover { background:var(--surface);border-color:var(--gray-300); }
.seg-track.fluid .chart-ctrl-btn::before {
content:"";width:6px;height:6px;border-radius:999px;
background:var(--gray-300);flex-shrink:0;
transition:background 0.15s,box-shadow 0.15s;
}
.seg-track.fluid .chart-ctrl-btn.active {
background:var(--brand-amber-bg);border-color:var(--gray-200);
color:var(--text);
}
.seg-track.fluid .chart-ctrl-btn.active::before {
background:var(--brand-amber);box-shadow:0 0 0 2px rgba(255,180,0,0.22);
}
.lab-card { background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);padding:16px 18px; }
.lab-card-head { display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--gray-100); }
.lab-card-label { font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600; }
.lab-field { margin-bottom:12px; }
.lab-field-label { font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;display:block; }
.lab-input { width:100%;padding:8px 12px;font-size:12.5px;border:1px solid var(--border-card);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);outline:none;font-family:var(--font-body);transition:border-color 0.15s,box-shadow 0.15s;line-height:1.55; }
.lab-input:focus { border-color:var(--brand-amber);box-shadow:0 0 0 3px rgba(255,180,0,0.10); }
.lab-textarea { min-height:72px;resize:vertical; }
.lab-dd-search { width:100%;padding:6px 10px;font-size:11px;border:1px solid var(--border-card);border-radius:var(--radius-full);background:var(--surface);color:var(--text);outline:none;transition:border-color 0.15s,box-shadow 0.15s; }
.lab-dd-search:focus { border-color:var(--brand-amber);box-shadow:0 0 0 3px rgba(255,180,0,0.10); }
/* Token search results */
.lab-token-result { display:flex;align-items:center;gap:10px;width:100%; }
.lab-token-result img { width:28px;height:28px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px var(--gray-100); }
.lab-token-result .ltr-placeholder { width:28px;height:28px;border-radius:50%;background:var(--gray-100);flex-shrink:0; }
.lab-token-result .ltr-info { flex:1;min-width:0; }
.lab-token-result .ltr-name { font-size:13px;font-weight:600;color:var(--text);line-height:1.3; }
.lab-token-result .ltr-sym { font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);display:flex;align-items:center;gap:5px;margin-top:1px; }
.lab-token-result .ltr-right { text-align:right;flex-shrink:0;margin-left:auto; }
.lab-token-result .ltr-price { font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text); }
.lab-token-result .ltr-mcap { font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);margin-top:1px; }
/* Recent declarations feed (V2 aligned) */
.recent-item {
display:flex;align-items:center;gap:10px;padding:10px 0;
border-bottom:1px solid var(--gray-100);font-size:11px;
}
.recent-item:last-child { border-bottom:none; }
.recent-logo { width:22px;height:22px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px var(--gray-200);object-fit:cover; }
.recent-sym { font-size:11px;font-weight:600;color:var(--text);min-width:40px; }
.recent-subject {
display:inline;padding:0 2px;font-size:11px;font-weight:600;color:var(--text);
}
.recent-type { font-size:9px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap; }
.recent-time { font-family:var(--font-mono);font-size:9px;color:var(--text-muted);flex-shrink:0; }
.recent-dot {
width:4px;height:4px;border-radius:999px;background:var(--brand-amber);flex-shrink:0;
box-shadow:0 0 0 2px rgba(255,180,0,0.18);
}
/* ── Feed scroll — scrollbar never overlaps text ── */
.lab-feed-scroll {
max-height: 340px; overflow-y: auto; flex: 1;
padding-right: 14px; margin-right: -14px;
scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.lab-feed-scroll:hover { scrollbar-color: rgba(0,0,0,0.16) transparent; }
.lab-feed-scroll::-webkit-scrollbar { width: 5px; }
.lab-feed-scroll::-webkit-scrollbar-track { background: transparent; }
.lab-feed-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 999px; }
.lab-feed-scroll:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); }
/* ── Move labels on chart ── */
.chart-label-layer { position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;z-index:4; }
.chart-leaders-svg { position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible; }
.chart-dot { position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 2px var(--surface),0 0 4px rgba(0,0,0,0.1);z-index:5; }
.chart-dot-end { position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;border:2px solid;box-sizing:content-box;background:var(--surface);box-shadow:0 0 4px rgba(0,0,0,0.1);z-index:5; }
.chart-pill { position:absolute;transform:translate(-50%,0);padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600;line-height:1.4;font-family:var(--font-mono);white-space:nowrap;pointer-events:auto;cursor:default;transition:transform 0.15s ease; }
.chart-pill:hover { transform:translate(-50%,-1px);z-index:20; }
.pill-neutral { background:var(--gray-100);color:var(--text-muted);border:1px solid var(--gray-200);box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.pill-up { background:rgba(16,185,129,0.08);color:#059669;border:1px solid rgba(16,185,129,0.2);box-shadow:0 1px 3px rgba(16,185,129,0.06); }
.pill-down { background:rgba(239,68,68,0.08);color:#dc2626;border:1px solid rgba(239,68,68,0.15);box-shadow:0 1px 3px rgba(239,68,68,0.06); }
/* ── PR card (Pattern Recognition style hero) ── */
.pr-card-wrap { position:relative;background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);overflow:hidden;isolation:isolate; }
.pr-card-bg { position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; }
.pr-scan-grid { position:absolute;inset:0;width:100%;height:100%;opacity:0.85; }
.pr-overlay { position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.4),rgba(255,255,255,0.85) 60%,rgba(255,255,255,0.92));backdrop-filter:blur(0.5px); }
.pr-card-head { position:relative;z-index:1;padding:10px 16px;border-bottom:1px solid var(--gray-100);background:var(--surface);display:flex;align-items:center; }
.pr-status { display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);padding:2px 8px;background:var(--gray-100);border-radius:999px;line-height:1.5; }
.pr-pulse-dot { width:5px;height:5px;border-radius:50%;background:#FFB400;animation:prDotPulse 1.8s ease-in-out infinite; }
@keyframes prDotPulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,180,0,0.55); } 50% { box-shadow:0 0 0 4px rgba(255,180,0,0); } }
.pr-card-body { position:relative;z-index:1;padding:28px 24px 22px;text-align:center; }
.pr-ai-badge { position:relative;width:44px;height:44px;border-radius:12px;margin:0 auto 12px;background:#FFB400;color:white;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(255,180,0,0.35); }
.pr-ai-badge svg { width:18px;height:18px;position:relative;z-index:1;stroke:white; }
.pr-ai-pulse,.pr-ai-pulse--2 { position:absolute;inset:0;border-radius:12px;border:1.5px solid rgba(255,180,0,0.4);opacity:0;animation:prAiPulse 2.4s cubic-bezier(.16,1,.3,1) infinite; }
.pr-ai-pulse--2 { animation-delay:1.2s; }
@keyframes prAiPulse { 0% { transform:scale(1);opacity:0.55; } 80%,100% { transform:scale(1.7);opacity:0; } }
.pr-title { font-size:18px;font-weight:700;color:var(--text);letter-spacing:-0.02em;margin-bottom:6px;line-height:1.2; }
.pr-sub { font-size:12px;color:var(--text-muted);line-height:1.55;max-width:460px;margin:0 auto 18px; }
.pr-stats { display:inline-flex;align-items:center;gap:18px;padding:10px 16px;background:var(--surface);border:1px solid var(--gray-200);border-radius:999px; }
.pr-stat { display:flex;flex-direction:column;align-items:center;gap:3px; }
.pr-stat-num { font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text);letter-spacing:-0.02em;display:inline-flex;align-items:center;justify-content:center;min-height:14px; }
.pr-stat-label { font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted); }
.pr-stat-divider { width:1px;height:24px;background:var(--gray-200); }
.pr-skel { display:inline-block;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--gray-100) 0%,var(--gray-200) 50%,var(--gray-100) 100%);background-size:200% 100%;animation:prSkel 1.6s ease-in-out infinite; }
@keyframes prSkel { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
/* ── Assess-style card shell (shared with lab_assess) ── */
.ac { position:relative;background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);overflow:hidden; }
.ac-counter {
display:flex;align-items:center;justify-content:space-between;
padding:12px 18px;border-bottom:1px solid var(--gray-100);
font-family:var(--font-mono);font-size:10.5px;
}
.ac-counter .pos { color:var(--text);font-weight:600; }
.ac-counter .pos b { font-weight:700; }
.decl2 { padding:20px 22px 22px;border-bottom:1px solid var(--gray-100); }
.foot2 { padding:12px 22px;display:flex;align-items:center;gap:10px; }
.foot2 .spacer { flex:1; }
.lab-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
@media (max-width:900px) { .lab-grid { grid-template-columns:1fr; } }
/* ── Responsive ── */
@media (max-width:640px) {
/* Tabs */
.lab-tabs { gap:2px;padding:2px; }
.lab-tab { padding:5px 10px;font-size:10px; }
/* Form fields */
.lab-input, .lab-textarea { padding:10px 14px;font-size:16px;min-height:44px; }
.lab-textarea { min-height:80px; }
.lab-field { margin-bottom:10px; }
.lab-field-label { font-size:8px; }
.lab-card { padding:14px; }
.lab-card-head { padding-bottom:8px;margin-bottom:10px; }
/* Declare card */
.ac-counter { padding:10px 16px;font-size:10px; }
.foot2 { padding:10px 16px;flex-wrap:wrap;gap:8px; }
/* Chart */
#evt-chart { height:220px !important; }
/* Date picker */
.dp-popup { min-width:calc(100vw - 32px);max-width:100vw; }
.dp-day { width:36px;height:36px; }
.dp-time input[type="number"] { width:48px;height:40px; }
/* Recent items */
.recent-item { gap:6px;padding:8px 0;font-size:10px; }
.recent-type { font-size:8px;padding:1px 5px; }
.recent-logo { width:18px;height:18px; }
/* Hero banner */
.pr-card-body { padding:20px 16px 18px; }
.pr-title { font-size:16px; }
.pr-sub { font-size:11px; }
.pr-stats { gap:12px;padding:8px 12px; }
/* Segmented controls */
.seg-track.fluid .chart-ctrl-btn { padding:10px 8px;font-size:11px;min-height:44px; }
}
@media (max-width:480px) {
.pr-stats { gap:8px;padding:6px 10px; }
.pr-stat-divider { width:100%;height:1px; }
.dp-day { width:32px;height:32px;font-size:10px; }
}
/* extracted free inline styles (css-verify) */
.ldf-1 { font-size:12px;letter-spacing:-0.01em; }
.ldf-2 { width:100%;justify-content:space-between; }
.ldf-3 { left:0;right:0;transform-origin:top left; }
.ldf-4 { font-weight:400;letter-spacing:0;text-transform:none;font-size:8px; }
.ldf-5 { width:100%; }
.ldf-6 { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.ldf-7 { margin-left:2px; }
.ldf-8 { margin-left:auto; }
.ldf-9 { margin-top:14px; }
.ldf-10 { height:280px;position:relative; }
.ldf-11 { opacity:0.25; }
.ldf-12 { flex:1; }
.ldf-13 { vertical-align:-1px;margin-right:3px; }
.ldf-14 { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ldf-15 { margin-top:12px; }
/* no amber focus outline/glow on the segment toggles (persists after click) */
.seg-track .chart-ctrl-btn:focus, .seg-track .chart-ctrl-btn:focus-visible { outline:none !important; box-shadow:none !important; }
/* ── AI enrichment widget (mandatory-on-declare helper) ── */
.lab-enrich { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lab-enrich-hint {
font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted);
}
.lab-enrich-panel {
flex-basis: 100%; margin-top: 8px; padding: 12px 14px;
background: rgba(255, 180, 0, 0.05); border: 1px solid rgba(255, 180, 0, 0.25);
border-radius: var(--radius-sm);
}
.lab-enrich-eyebrow {
font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: #B07A00; margin-bottom: 6px;
}
.lab-enrich-left { color: var(--text-muted); float: right; letter-spacing: 0.04em; }
.lab-enrich-text { font-size: 13px; line-height: 1.5; color: var(--text); }
.lab-enrich-flags-lbl {
font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--text-muted); margin: 10px 0 4px;
}
.lab-enrich-flags { margin: 0; padding-left: 18px; }
.lab-enrich-flags li { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
.lab-enrich-acts { display: flex; gap: 8px; margin-top: 10px; }
/* ── Points pill in declaration history ── */
.recent-pts {
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
color: var(--brand-amber-strong, #B07A00); white-space: nowrap;
}
/* ── Action economy chips: cost / instant reward / retrospective (TBD) ── */
.ax-econ { display:inline-flex; align-items:center; gap:14px; padding:0 2px; font-family:var(--font-mono); }
.ax-econ-i { display:inline-flex; align-items:center; gap:6px; }
.ax-econ-k { font-size:8.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); }
.ax-econ-v { font-size:11.5px; font-weight:700; color:var(--text); white-space:nowrap; }
.ax-econ-pos { color:#FFB400; }
.ax-econ-tbd { color:var(--text-muted); font-weight:600; letter-spacing:0.04em; }
@media (max-width: 720px) { .ax-econ { gap:10px; } .ax-econ-k { display:none; } }
/* Dark-theme fix: the calendar popup hardcoded a light background -> white popup in dark. */
body.dark .dp-popup { background: rgba(19,20,21,0.96); border-color: var(--border-card); }
/* ── Declaration quality warning — full-width band hanging under the card header ── */
.lab-quality-note {
display: flex; align-items: flex-start; gap: 10px;
margin: 0; padding: 11px 22px;
background: rgba(255,180,0,0.08);
border-top: 1px solid rgba(255,180,0,0.22);
border-bottom: 1px solid rgba(255,180,0,0.22);
}
.lab-quality-note-ic { color: #B07A00; flex-shrink: 0; margin-top: 1px; line-height: 0; }
.lab-quality-note-txt { flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--text); }
.lab-quality-note-txt b { font-weight: 700; }
.lab-quality-note-x {
flex-shrink: 0; margin: -2px -6px 0 4px; padding: 4px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; border-radius: var(--radius-sm);
color: #B07A00; opacity: 0.6; cursor: pointer; line-height: 0;
transition: opacity 0.15s ease, background 0.15s ease;
}
.lab-quality-note-x:hover { opacity: 1; background: rgba(255,180,0,0.14); }
body.dark .lab-quality-note { background: rgba(255,180,0,0.08); border-color: rgba(255,180,0,0.22); }
body.dark .lab-quality-note-ic { color: #FFB400; }
body.dark .lab-quality-note-x { color: #FFB400; }
/* ── Validate-first overlay (covers the active declare card during AI pre-check) ── */
.decl-ov {
position: absolute; inset: 0; z-index: 20;
display: none; align-items: center; justify-content: center; padding: 24px;
background: rgba(255,255,255,0.86); backdrop-filter: blur(3px);
}
.decl-ov.is-on { display: flex; }
.decl-ov-box { text-align: center; max-width: 380px; animation: declOvIn 0.2s ease; }
@keyframes declOvIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
.decl-ov-spin {
width: 38px; height: 38px; margin: 0 auto 14px; border-radius: 50%;
border: 3px solid rgba(255,180,0,0.25); border-top-color: #FFB400;
animation: declSpin 0.7s linear infinite;
}
@keyframes declSpin { to { transform: rotate(360deg); } }
.decl-ov-check, .decl-ov-x {
width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.decl-ov-check { background: rgba(22,163,74,0.12); color: #16a34a; }
.decl-ov-x { background: rgba(220,38,38,0.12); color: #dc2626; }
.decl-ov-check svg, .decl-ov-x svg { width: 24px; height: 24px; }
.decl-ov-ttl { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.decl-ov-sub { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.decl-ov-acts { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.decl-ov-note { margin-top: 14px; font-size: 11px; line-height: 1.45; color: var(--text-muted); }
body.dark .decl-ov { background: rgba(13,14,15,0.86); }
/* ── Info icon + hover tooltip inside the Validate button ── */
.vt-info { position: relative; display: inline-flex; align-items: center; margin-left: 6px; opacity: 0.85; cursor: help; vertical-align: middle; }
.vt-info:hover { opacity: 1; }
.vt-info svg { display: block; }
/* Anchored to the RIGHT of the icon so it opens leftward into the card — the icon sits near
the card's right edge and `.ac` clips overflow, so a centred tooltip would be cut off. */
.vt-tip {
position: absolute; bottom: calc(100% + 9px); right: -6px; left: auto;
width: max-content; max-width: min(260px, 78vw); padding: 8px 11px; z-index: 80;
background: var(--text); color: var(--surface); border-radius: 8px;
font-family: var(--font-body); font-size: 11px; font-weight: 500; line-height: 1.45;
letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
opacity: 0; visibility: hidden; transform: translateY(3px);
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
/* caret sits under the icon (near the tooltip's right edge) */
.vt-tip::after { content: ""; position: absolute; top: 100%; right: 12px; border: 5px solid transparent; border-top-color: var(--text); }
.vt-info:hover .vt-tip, .vt-info:focus-within .vt-tip {
opacity: 1; visibility: visible; transform: translateY(0);
}
/* Confirmed-event vs Rumor mode toggle on the catalyst declare panel */
.evt-mode { margin: 0 0 10px; max-width: 320px; }
.evt-rumor-note { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 14px; padding: 9px 12px; border: 1px solid rgba(217, 70, 239, 0.22); background: rgba(217, 70, 239, 0.06); border-radius: var(--radius-md); }
/* Mobile overrides — appended last so they win over base rules defined below the
earlier @media blocks (source order beats media-query on equal specificity). */
@media (max-width: 640px) {
/* Stack the paired fields (Token / Event type) so each gets full width
instead of cramming into a half-width column on narrow screens. */
.ldf-6 { grid-template-columns: 1fr; }
}