/* ═══════════════════════════════════════════════════════════════════
Sommet v2 Design Tokens
═══════════════════════════════════════════════════════════════════
Scoped via [data-theme="sommet"]. When going global, move to :root.
Source of truth: ~/Projects/glacis-ui/css/tokens.css
Brand reference: ~/Projects/blueprints/brand-book/index.html
═══════════════════════════════════════════════════════════════════ */
/* ── Fonts — loaded via CDN in layout, declared here for reference ──
Add to layout (or layout_scripts.html):
*/
/* ── Light theme (default) ── */
[data-theme="sommet"] {
/* Typography — overrides --font-sans which Tailwind already references */
--font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
/* ── Surfaces (backgrounds) ── */
--surface: #ffffff;
--surface-alt: #fafafa; /* zinc-50 — cards on tinted bg */
--surface-tint: #f4f4f5; /* zinc-100 — page bg, sidebar */
--surface-hover: #e4e4e7; /* neutral-200 */
--surface-active: #d4d4d8; /* neutral-300 — pressed, selected */
--surface-inverse: #18181b; /* zinc-900 */
--surface-inverse-overlay: rgba(255, 255, 255, 0.1); /* subtle layer on inverse surface */
--surface-inverse-overlay-hover: rgba(255, 255, 255, 0.2);
/* ── Foreground (text) ── */
--fg: #18181b; /* zinc-900 */
--fg-secondary: #52525b; /* zinc-600 */
--fg-tertiary: #71717a; /* zinc-500 */
--fg-disabled: #a1a1aa; /* zinc-400 */
--fg-placeholder: #bbbbc4;
--fg-inverse: #fafafa; /* zinc-50 */
/* ── Edges (borders) ── */
--light-edge: #f7f7f7;
--edge: #e4e4e7; /* zinc-200 — default border */
--edge-subtle: #f4f4f5; /* zinc-100 — very light separator */
--edge-strong: #d4d4d8; /* zinc-300 — emphasized border */
--edge-focus: #6366f1; /* indigo — focus ring */
/* ── Accent (indigo — agent/system/interactive) ── */
--accent: #6366f1; /* indigo-500 */
--accent-hover: #4f46e5; /* indigo-600 */
--accent-subtle: #eef2ff; /* indigo-50 */
--accent-muted: #e0e7ff; /* indigo-100 */
--accent-fg: #ffffff;
/* ── Brand (lime — identity only) ── */
--brand: #d1ff00;
--brand-dark: #4d5c00;
--brand-subtle: #f6fed0;
/* ── Status (severity dots + minimal text) ── */
--danger: #dc3545;
--danger-subtle: #fff0f0;
--danger-border: #fecdd3;
--danger-fg: #c02a35;
--warning: #b47d0a;
--warning-subtle: #fff8eb;
--warning-border: #feefc6;
--warning-fg: #92650a;
--success: #218358;
--success-subtle: #eefcf4;
--success-border: #c1f0d0;
--success-fg: #1a6b47;
--info: #2f8cff;
--info-subtle: #e9f4ff;
--info-border: #a9d2ff;
--info-fg: #106fe8;
/* ── Tool identity (16px icon surfaces only) ── */
--tool-sap: #0070f2;
--tool-sap-bg: #e8f0fe;
--tool-sap-border: #b8d4ff;
--tool-skill: #4d5c00;
--tool-skill-bg: rgba(209, 255, 0, 0.15);
/* ── Layout ── */
--sidebar-w: 224px;
--topbar-h: 44px;
--panel-right-w: 256px;
--detail-sidebar-w: 260px;
--panel-radius: 10px;
--panel-inset: 6px;
/* ── Illustration warm pastels ── */
--illust-sand: #f2e8da;
--illust-sand-deep: #e5d4bd;
--illust-blush: #f5ddd8;
--illust-blush-deep: #e5b8b0;
--illust-sage: #ddeadd;
--illust-sage-deep: #c4d9c4;
--illust-lavender: #e4dcf5;
--illust-lavender-deep: #d0c4ea;
/* ── Shadows ── */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-panel: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}
/* ── Dark theme (future-ready) ──
[data-theme="sommet"].dark {
--surface: #18181B;
--surface-alt: #27272A;
--surface-tint: #1C1C1F;
--surface-hover: #27272A;
--surface-active: #3F3F46;
--surface-inverse: #FAFAFA;
--fg: #FAFAFA;
--fg-secondary: #A1A1AA;
--fg-tertiary: #71717A;
--fg-disabled: #52525B;
--fg-placeholder: #52525B;
--fg-inverse: #18181B;
--edge: #3F3F46;
--edge-subtle: #27272A;
--edge-strong: #52525B;
--edge-focus: #818CF8;
--accent: #818CF8;
--accent-hover: #6366F1;
--accent-subtle: #1e1b4b;
--accent-muted: #312e81;
--accent-fg: #ffffff;
}
*/
/* ── Sommet animations ── */
@keyframes sommet-skeleton {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
@keyframes sommet-fade-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes sommet-message-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes sommet-success-pop {
0% {
transform: scale(0.8);
opacity: 0;
}
60% {
transform: scale(1.08);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes sommet-pulse-dot {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes sommet-typewriter-cursor {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
@keyframes sommet-attention-ping {
0% {
transform: scale(1);
opacity: 1;
}
75% {
transform: scale(1.8);
opacity: 0;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
/* ── Sommet base resets (within scope) ── */
[data-theme="sommet"],
[data-theme="sommet"] * {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
font-feature-settings: normal;
font-variation-settings: normal;
text-rendering: optimizeLegibility;
}
[data-theme="sommet"] {
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.5;
color: var(--fg);
}
/* ── Overline pattern (section labels, widget titles) ── */
[data-theme="sommet"] .sommet-overline {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
text-decoration: none;
}
/* ── Severity dot ── */
[data-theme="sommet"] .severity-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
[data-theme="sommet"] .severity-dot--danger {
background: var(--danger);
}
[data-theme="sommet"] .severity-dot--warning {
background: var(--warning);
}
[data-theme="sommet"] .severity-dot--accent {
background: var(--accent);
}
[data-theme="sommet"] .severity-dot--success {
background: var(--success);
}
[data-theme="sommet"] .severity-dot--pulse {
animation: sommet-pulse-dot 2s ease-out infinite;
}
/* ── Transition default ── */
[data-theme="sommet"] .transition-sommet {
transition: all 0.12s ease;
}
/* ── Gliri orb ── */
[data-theme="sommet"] .gliri-orb {
position: relative;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
animation: sommet-orb-breathe 3.5s ease-in-out infinite;
}
[data-theme="sommet"] .gliri-orb canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@keyframes sommet-orb-breathe {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes gliriPreUseBreathe {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.04);
}
}
/* ── Null-mini illustration (board empty columns) ── */
@keyframes sommet-null-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
[data-theme="sommet"] .null-mini {
position: relative;
width: 56px;
height: 64px;
opacity: 0.7;
animation: sommet-null-float 4s ease-in-out infinite;
}
[data-theme="sommet"] .null-mini-doc {
position: absolute;
border-radius: 5px;
border: 1.2px solid;
}
[data-theme="sommet"] .null-mini-doc-1 {
width: 44px;
height: 52px;
bottom: 0;
left: 6px;
background: var(--illust-sand);
border-color: var(--illust-sand-deep);
}
[data-theme="sommet"] .null-mini-doc-2 {
width: 44px;
height: 52px;
bottom: 5px;
left: 3px;
background: white;
border-color: var(--edge);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
[data-theme="sommet"] .null-mini-doc-3 {
width: 44px;
height: 52px;
bottom: 10px;
left: 0;
background: white;
border-color: var(--edge);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
[data-theme="sommet"] .null-mini-doc-3::before {
content: "";
position: absolute;
top: 12px;
left: 8px;
right: 8px;
height: 4px;
background: var(--surface-tint);
border-radius: 2px;
}
[data-theme="sommet"] .null-mini-doc-3::after {
content: "";
position: absolute;
top: 20px;
left: 8px;
width: 20px;
height: 4px;
background: var(--surface-tint);
border-radius: 2px;
}
[data-theme="sommet"] .null-mini-check {
position: absolute;
top: 30px;
left: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--illust-sage);
border: 1.2px solid var(--illust-sage-deep);
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .null-mini-check::after {
content: "";
width: 4px;
height: 2px;
border-left: 1.2px solid var(--success);
border-bottom: 1.2px solid var(--success);
transform: rotate(-45deg);
margin-top: -1px;
}
/* ── Breadcrumb ── */
[data-theme="sommet"] .sm-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--fg-tertiary);
list-style: none;
margin: 0;
padding: 0;
}
[data-theme="sommet"] .sm-crumb {
display: inline-flex;
align-items: center;
}
[data-theme="sommet"] .sm-crumb-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--fg-secondary);
font-weight: 500;
text-decoration: none;
transition: color 0.12s;
}
[data-theme="sommet"] a.sm-crumb-link:hover {
color: var(--fg);
}
[data-theme="sommet"] .sm-crumb-sep {
font-size: 11px;
color: var(--fg-placeholder);
margin: 0 0 0 6px;
}
[data-theme="sommet"] .sm-crumb-current {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--fg);
font-weight: 500;
}
/* ── Toolbar ── */
[data-theme="sommet"] .ac-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 10px;
margin-bottom: 12px;
}
[data-theme="sommet"] .ac-toolbar-left {
display: flex;
align-items: center;
gap: 10px;
}
[data-theme="sommet"] .ac-toolbar-right {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
[data-theme="sommet"] .ac-toolbar-title {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--fg);
}
/* ── Segmented toggle (On you / On others) ── */
[data-theme="sommet"] .ac-segment {
display: inline-flex;
border: 1px solid var(--edge);
border-radius: 5px;
overflow: hidden;
background: var(--surface-alt);
}
[data-theme="sommet"] .ac-segment-btn {
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
line-height: normal;
padding: 4px 10px;
border: none;
background: transparent;
color: var(--fg-tertiary);
cursor: pointer;
transition: all 0.12s;
display: inline-flex;
align-items: center;
gap: 4px;
border-right: 1px solid var(--edge);
}
[data-theme="sommet"] .ac-segment-btn:last-child {
border-right: none;
}
[data-theme="sommet"] .ac-segment-btn.active {
background: var(--surface);
color: var(--fg);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
[data-theme="sommet"] .ac-segment-btn:hover:not(.active) {
color: var(--fg-secondary);
background: var(--surface-hover);
}
[data-theme="sommet"] .ac-segment-count {
font-size: 10px;
font-weight: 600;
background: var(--surface-active);
color: var(--fg-tertiary);
padding: 1px 5px;
border-radius: 8px;
min-width: 18px;
text-align: center;
}
[data-theme="sommet"] .ac-segment-btn.active .ac-segment-count {
background: var(--accent-subtle);
color: var(--accent);
}
/* ── Avatar group (assignee filter) ── */
[data-theme="sommet"] .ac-avatar-group {
display: flex;
align-items: center;
cursor: pointer;
position: relative;
}
[data-theme="sommet"] .ac-av {
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 8px;
font-weight: 600;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--surface);
margin-left: -6px;
transition: transform 0.12s;
}
[data-theme="sommet"] .ac-av:first-child {
margin-left: 0;
}
[data-theme="sommet"] .ac-avatar-group:hover .ac-av {
transform: translateX(-1px);
}
[data-theme="sommet"] .ac-av-more {
background: var(--surface-active);
color: var(--fg-tertiary);
font-size: 9px;
}
[data-theme="sommet"] .ac-avatar-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 6px;
z-index: 30;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
box-shadow: var(--shadow-md);
min-width: 200px;
padding: 6px 0;
}
[data-theme="sommet"] .ac-avatar-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 11.5px;
color: var(--fg);
cursor: pointer;
transition: background 0.12s;
}
[data-theme="sommet"] .ac-avatar-opt:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .ac-avatar-check {
margin-left: auto;
color: var(--accent);
opacity: 0;
width: 14px;
height: 14px;
}
[data-theme="sommet"] .ac-avatar-opt.selected .ac-avatar-check {
opacity: 1;
}
[data-theme="sommet"] .ac-avatar-divider {
height: 1px;
background: var(--edge);
margin: 4px 0;
}
/* ── Sort button ── */
[data-theme="sommet"] .ac-sort-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
line-height: normal;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--edge);
background: transparent;
color: var(--fg-tertiary);
cursor: pointer;
transition:
color 0.12s,
border-color 0.12s;
}
[data-theme="sommet"] .ac-sort-btn:hover {
color: var(--fg-secondary);
border-color: var(--edge-strong);
}
/* ── Filter popover buttons ── */
[data-theme="sommet"] .ac-filter-apply {
display: inline-flex;
align-items: center;
font-family: inherit;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
border-radius: 5px;
border: none;
background: var(--accent);
color: var(--accent-fg);
cursor: pointer;
transition: background 0.12s;
}
[data-theme="sommet"] .ac-filter-apply:hover {
background: var(--accent-hover);
}
[data-theme="sommet"] .ac-filter-clear {
display: inline-flex;
align-items: center;
font-family: inherit;
font-size: 12px;
font-weight: 400;
padding: 4px 0;
border: none;
background: transparent;
color: var(--fg-tertiary);
cursor: pointer;
transition: color 0.12s;
}
[data-theme="sommet"] .ac-filter-clear:hover {
color: var(--fg-secondary);
}
/* ── Layout toggle ── */
[data-theme="sommet"] .ac-layout-toggle {
display: flex;
gap: 1px;
background: var(--surface-tint);
border-radius: 5px;
padding: 2px;
margin-left: 4px;
}
[data-theme="sommet"] .ac-layout-btn {
width: 26px;
height: 24px;
border: none;
border-radius: 3px;
background: transparent;
color: var(--fg-tertiary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.12s;
}
[data-theme="sommet"] .ac-layout-btn:hover {
color: var(--fg-secondary);
}
[data-theme="sommet"] .ac-layout-btn.active {
background: var(--surface);
color: var(--fg);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* ── List footer ── */
[data-theme="sommet"] .ac-list-footer {
font-size: 10px;
color: var(--fg-placeholder);
text-align: center;
padding: 10px 0 2px;
}
/* ── AC row (action item) ── */
[data-theme="sommet"] .ac-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 7px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.12s;
margin-bottom: 1px;
text-decoration: none;
color: inherit;
}
[data-theme="sommet"] .ac-row:hover {
background: var(--surface-hover);
border-color: var(--edge);
}
[data-theme="sommet"] .ac-row .ac-row-content {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .ac-row .ac-row-title {
font-size: 13px;
font-weight: 500;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .ac-row .ac-row-meta {
font-size: 12px;
color: var(--fg-tertiary);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .ac-row .ac-row-chips {
display: flex;
gap: 4px;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-row .ac-row-chip {
font-size: 10px;
font-weight: 500;
color: var(--fg-tertiary);
background: var(--surface-tint);
border-radius: 4px;
padding: 2px 6px;
font-family: var(--font-mono);
display: inline-flex;
align-items: center;
gap: 3px;
white-space: nowrap;
}
[data-theme="sommet"] .ac-row .ac-row-chip svg {
width: 10px;
height: 10px;
stroke-width: 1.5;
}
[data-theme="sommet"] .ac-row .ac-row-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
color: var(--fg-inverse);
flex-shrink: 0;
}
[data-theme="sommet"] .ac-row .ac-row-time {
font-size: 11px;
color: var(--fg-tertiary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
width: 48px;
text-align: right;
}
/* Agent-handled rows — slightly muted */
[data-theme="sommet"] .ac-row.agent-handled {
opacity: 0.7;
}
[data-theme="sommet"] .ac-row.agent-handled:hover {
opacity: 1;
}
[data-theme="sommet"] .ac-row.agent-handled .ac-row-avatar {
background: var(--accent);
}
[data-theme="sommet"] .ac-row.agent-handled .ac-row-avatar svg {
width: 12px;
height: 12px;
stroke-width: 1.5;
}
/* Closed rows */
[data-theme="sommet"] .ac-row.closed {
opacity: 0.5;
}
[data-theme="sommet"] .ac-row.closed:hover {
opacity: 0.8;
}
[data-theme="sommet"] .ac-row.closed .ac-row-title {
text-decoration: line-through;
text-decoration-color: var(--edge-strong);
}
/* ── Reveal toggle (accordion) ── */
[data-theme="sommet"] .reveal-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
margin: 4px 0;
font-size: 12px;
font-weight: 500;
color: var(--fg-tertiary);
cursor: pointer;
border-radius: 7px;
transition: all 0.12s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
[data-theme="sommet"] .reveal-toggle:hover {
color: var(--fg);
background: var(--surface-hover);
}
[data-theme="sommet"] .reveal-toggle svg {
width: 14px;
height: 14px;
stroke-width: 1.5;
transition: transform 0.15s;
}
[data-theme="sommet"] .reveal-toggle.open svg {
transform: rotate(180deg);
}
[data-theme="sommet"] .reveal-toggle .rt-count {
font-size: 10px;
color: var(--fg-tertiary);
font-weight: 600;
background: var(--surface-tint);
padding: 0 6px;
border-radius: 8px;
line-height: 16px;
}
[data-theme="sommet"] .reveal-toggle .rt-orb {
width: 16px;
height: 16px;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
position: relative;
}
[data-theme="sommet"] .reveal-toggle .rt-orb canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[data-theme="sommet"] .reveal-content {
display: none;
}
[data-theme="sommet"] .reveal-content.open {
display: block;
}
/* ── Empty state (Action Center) ── */
[data-theme="sommet"] .ac-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px 60px;
animation: acEmptyFadeIn 0.4s ease;
}
@keyframes acEmptyFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
[data-theme="sommet"] .ac-breathe {
width: 72px;
height: 72px;
margin: 0 auto 20px;
border-radius: 50%;
border: 1.5px solid var(--edge);
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .ac-breathe-fill {
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle at 40% 40%, #ddeadd, #02403d);
animation: acBreathe 10s ease-in-out infinite;
opacity: 0.8;
}
@keyframes acBreathe {
0%,
100% {
width: 24px;
height: 24px;
opacity: 0.8;
}
40% {
width: 48px;
height: 48px;
opacity: 0.6;
}
60% {
width: 48px;
height: 48px;
opacity: 0.6;
}
}
[data-theme="sommet"] .ac-empty-headline {
font-size: 16px;
font-weight: 600;
color: var(--fg);
margin-bottom: 6px;
}
[data-theme="sommet"] .ac-empty-sub {
font-size: 13px;
color: var(--fg-tertiary);
line-height: 1.5;
max-width: 340px;
margin-bottom: 20px;
}
[data-theme="sommet"] .ac-resolved-teaser {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--edge-subtle);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
[data-theme="sommet"] .ac-resolved-teaser .rt-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-placeholder);
margin-bottom: 8px;
}
[data-theme="sommet"] .ac-resolved-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 12px;
}
[data-theme="sommet"] .ac-resolved-item .ri-check {
color: var(--success);
flex-shrink: 0;
}
[data-theme="sommet"] .ac-resolved-item .ri-check svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
[data-theme="sommet"] .ac-resolved-item .ri-text {
color: var(--fg-disabled);
flex: 1;
}
[data-theme="sommet"] .ac-resolved-item .ri-time {
font-size: 11px;
color: var(--fg-placeholder);
flex-shrink: 0;
}
/* ── Board lane collapsing ── */
[data-theme="sommet"] .ac-board-col.collapsed {
min-width: 36px;
max-width: 36px;
flex: 0 0 36px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0;
}
[data-theme="sommet"] .ac-board-col.collapsed:hover {
background: var(--surface-active);
}
[data-theme="sommet"] .ac-board-col.collapsed .ac-board-col-header {
writing-mode: vertical-lr;
transform: rotate(180deg);
white-space: nowrap;
margin: 0;
padding: 0;
flex-direction: row;
gap: 6px;
justify-content: center;
flex: 1;
}
[data-theme="sommet"] .ac-board-col.collapsed .ac-board-col-count {
writing-mode: horizontal-tb;
transform: rotate(180deg);
}
[data-theme="sommet"] .ac-board-col-body {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
/* ── Board card ── */
[data-theme="sommet"] .ac-board-card {
display: block;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 7px;
padding: 10px 12px;
margin-bottom: 6px;
cursor: pointer;
transition: all 0.12s;
text-decoration: none;
color: inherit;
}
[data-theme="sommet"] .ac-board-card:hover {
border-color: var(--edge-strong);
box-shadow: var(--shadow-sm);
}
[data-theme="sommet"] .ac-board-card:last-child {
margin-bottom: 0;
}
[data-theme="sommet"] .ac-board-card .card-top {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
[data-theme="sommet"] .ac-board-card .card-title {
font-size: 12px;
font-weight: 500;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .ac-board-card .card-meta {
font-size: 11px;
color: var(--fg-tertiary);
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-theme="sommet"] .ac-board-card .card-chips {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
[data-theme="sommet"] .ac-board-card .card-chip {
font-size: 9px;
font-weight: 500;
color: var(--fg-tertiary);
background: var(--surface-alt);
border: 1px solid var(--edge-subtle);
border-radius: 3px;
padding: 1px 5px;
font-family: var(--font-mono);
display: inline-flex;
align-items: center;
gap: 3px;
}
[data-theme="sommet"] .ac-board-card .card-chip svg {
width: 9px;
height: 9px;
stroke-width: 1.5;
}
[data-theme="sommet"] .ac-board-card .card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
gap: 4px;
}
/* ── Member filter chip (toolbar) ── */
[data-theme="sommet"] .ac-member-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
padding: 4px 8px;
border-radius: 5px;
border: 1px solid var(--edge);
background: var(--surface);
color: var(--fg-tertiary);
cursor: pointer;
transition: all 0.12s;
position: relative;
}
[data-theme="sommet"] .ac-member-chip:hover {
border-color: var(--edge-strong);
color: var(--fg-secondary);
}
[data-theme="sommet"] .ac-member-chip svg {
width: 12px;
height: 12px;
stroke-width: 1.5;
}
[data-theme="sommet"] .ac-member-chip .mc-chevron {
width: 10px;
height: 10px;
stroke-width: 2;
color: var(--fg-placeholder);
}
[data-theme="sommet"] .ac-member-dropdown {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
z-index: 30;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
box-shadow: var(--shadow-md);
min-width: 200px;
padding: 6px 0;
}
[data-theme="sommet"] .ac-member-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 11.5px;
color: var(--fg);
cursor: pointer;
transition: background 0.12s;
}
[data-theme="sommet"] .ac-member-opt:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .ac-member-opt .av {
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 7px;
font-weight: 600;
color: var(--fg-inverse);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-member-opt .check {
margin-left: auto;
color: var(--accent);
opacity: 0;
width: 14px;
height: 14px;
}
[data-theme="sommet"] .ac-member-opt.selected .check {
opacity: 1;
}
[data-theme="sommet"] .ac-member-divider {
height: 1px;
background: var(--edge);
margin: 4px 0;
}
[data-theme="sommet"] .ac-member-group-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--fg-placeholder);
padding: 4px 12px 2px;
}
/* ── List skeleton loader ── */
[data-theme="sommet"] .skeleton {
background: var(--surface-tint);
}
[data-theme="sommet"] .ac-list-skeleton {
display: flex;
flex-direction: column;
gap: 1px;
}
[data-theme="sommet"] .ac-skel-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
}
[data-theme="sommet"] .ac-skel-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-skel-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
[data-theme="sommet"] .ac-skel-title {
height: 13px;
width: 60%;
border-radius: 3px;
}
[data-theme="sommet"] .ac-skel-meta {
height: 11px;
width: 40%;
border-radius: 3px;
}
[data-theme="sommet"] .ac-skel-chip {
height: 18px;
width: 72px;
border-radius: 3px;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-skel-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-skel-time {
height: 11px;
width: 40px;
border-radius: 3px;
flex-shrink: 0;
}
/* Vary skeleton widths for realism */
[data-theme="sommet"] .ac-skel-row:nth-child(2n) .ac-skel-title {
width: 75%;
}
[data-theme="sommet"] .ac-skel-row:nth-child(3n) .ac-skel-title {
width: 50%;
}
[data-theme="sommet"] .ac-skel-row:nth-child(2n) .ac-skel-meta {
width: 55%;
}
[data-theme="sommet"] .ac-skel-row:nth-child(3n) .ac-skel-chip {
width: 56px;
}
[data-theme="sommet"] .ac-skel-row:nth-child(4n) .ac-skel-chip {
display: none;
}
/* ── Activity table skeleton ── */
[data-theme="sommet"] .ac-activity-skeleton {
display: flex;
flex-direction: column;
gap: 1px;
}
[data-theme="sommet"] .ac-askel-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
}
[data-theme="sommet"] .ac-askel-title {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
[data-theme="sommet"] .ac-askel-title-bar {
height: 13px;
width: 55%;
border-radius: 3px;
}
[data-theme="sommet"] .ac-askel-chip-bar {
height: 10px;
width: 30%;
border-radius: 3px;
}
[data-theme="sommet"] .ac-askel-pill {
height: 18px;
width: 72px;
border-radius: 4px;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-askel-type {
height: 12px;
width: 64px;
border-radius: 3px;
flex-shrink: 0;
}
/* Vary widths */
[data-theme="sommet"] .ac-askel-row:nth-child(2n) .ac-askel-title-bar {
width: 70%;
}
[data-theme="sommet"] .ac-askel-row:nth-child(3n) .ac-askel-title-bar {
width: 45%;
}
[data-theme="sommet"] .ac-askel-row:nth-child(2n) .ac-askel-chip-bar {
width: 22%;
}
[data-theme="sommet"] .ac-askel-row:nth-child(3n) .ac-askel-chip-bar {
display: none;
}
[data-theme="sommet"] .ac-askel-row:nth-child(4n) .ac-askel-pill {
width: 56px;
}
/* ── Agent snackbar ── */
[data-theme="sommet"] .agent-snackbar {
margin-top: auto;
flex-shrink: 0;
padding: 4px 0;
}
[data-theme="sommet"] .agent-snackbar-inner {
display: flex;
align-items: center;
gap: 8px;
border-top: 1px solid var(--edge-subtle);
padding: 8px 14px;
font-size: 11.5px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .agent-snackbar .snackbar-orb {
animation: none;
}
[data-theme="sommet"] .agent-snackbar-text {
flex: 1;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .agent-snackbar-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
font-size: 11.5px;
white-space: nowrap;
margin-left: auto;
}
[data-theme="sommet"] .agent-snackbar-link:hover {
text-decoration: underline;
}
/* ── Board view ── */
[data-theme="sommet"] .ac-board {
display: flex;
gap: 12px;
flex: 1;
min-height: 0;
}
[data-theme="sommet"] .ac-board-col {
flex: 1;
min-width: 0;
min-height: 0;
background: var(--surface-tint);
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
}
[data-theme="sommet"] .ac-board-col-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--fg-secondary);
padding: 4px 6px 10px;
}
[data-theme="sommet"] .ac-board-col-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-board-col-count {
font-size: 10px;
font-weight: 600;
background: var(--surface-active);
color: var(--fg-tertiary);
padding: 0 5px;
border-radius: 8px;
margin-left: 2px;
}
[data-theme="sommet"] .ac-board-col-cards {
display: flex;
flex-direction: column;
gap: 4px;
overflow-y: auto;
flex: 1;
min-height: 0;
}
[data-theme="sommet"] .ac-board-col-footer {
font-size: 10px;
color: var(--fg-placeholder);
text-align: center;
padding: 8px 6px 2px;
border-top: 1px solid var(--edge-subtle);
margin-top: auto;
}
/* ═══════════════════════════════════════════════════════════════════
App shell — sm-shell layout (undersurface + elevated panel)
═══════════════════════════════════════════════════════════════════ */
[data-theme="sommet"] .sm-shell {
display: flex;
height: 100vh;
background: var(--surface-tint);
}
[data-theme="sommet"] .sm-shell-sidebar {
flex-shrink: 0;
}
[data-theme="sommet"] .sm-shell-main {
flex: 1;
min-width: 0;
padding: 6px 6px 6px 0;
display: flex;
flex-direction: column;
}
[data-theme="sommet"] .sm-shell-panel {
flex: 1;
display: flex;
flex-direction: column;
background: var(--surface);
border-radius: 10px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
[data-theme="sommet"] .sm-shell-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 40px;
padding: 0 16px;
border-bottom: 1px solid var(--edge);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════
Sidebar — sm-sidebar component
═══════════════════════════════════════════════════════════════════ */
/* ── Container ── */
[data-theme="sommet"] .sm-sidebar {
width: var(--sidebar-w);
height: 100vh;
padding: 8px 0;
display: flex;
flex-direction: column;
flex-shrink: 0;
overflow: hidden;
font-family: var(--font-sans);
}
/* ── Top group (everything above footer) ── */
[data-theme="sommet"] .sm-sidebar-top {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; /* allow shrinking for scroll */
overflow: hidden;
}
/* ── Brand row (brandmark + org name) ── */
[data-theme="sommet"] .sm-sidebar-brand {
padding: 2px 18px 12px;
display: flex;
align-items: center;
gap: 7px;
}
[data-theme="sommet"] .sm-sidebar-brand svg,
[data-theme="sommet"] .sm-sidebar-brand img {
height: 24px;
width: auto;
flex-shrink: 0;
}
[data-theme="sommet"] .sm-sidebar-brand-name {
font-size: 14px;
font-weight: 600;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -0.02em;
}
/* ── Picker wrapper ── */
[data-theme="sommet"] .sm-sidebar-pickers {
padding: 0 8px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
/* ── Current team indicator (display-only, below workspace switcher) ── */
[data-theme="sommet"] .sm-sidebar-current-team {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
}
[data-theme="sommet"] .sm-sidebar-current-team-name {
font-size: 12px;
font-weight: 500;
color: var(--fg-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Search wrap — constrain the omni-search include ── */
[data-theme="sommet"] .sm-sidebar-search-wrap {
padding: 0 8px 8px;
}
/* ── Scrollable nav area ── */
[data-theme="sommet"] .sm-sidebar-nav-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 4px 0 16px;
}
/* ── Footer pinned to bottom ── */
[data-theme="sommet"] .sm-sidebar-footer {
flex-shrink: 0;
border-top: 1px solid var(--edge);
}
/* ── Nav section wrapper ── */
[data-theme="sommet"] .sm-sidebar-section {
padding: 0 8px;
margin-bottom: 2px;
}
/* ── Section label ("Transactions", "Configuration") ── */
[data-theme="sommet"] .sm-sidebar-section-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-secondary);
padding: 14px 10px 5px;
}
/* ── Workspace switcher trigger ── */
[data-theme="sommet"] .sm-sidebar-ws-trigger {
transition:
background 0.12s,
color 0.12s;
}
[data-theme="sommet"] .sm-sidebar-ws-trigger:hover {
background: var(--surface-hover);
}
/* ── Primary nav item ── */
[data-theme="sommet"] .sm-sidebar-item {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 10px;
border-radius: 6px;
font-size: 12.5px;
color: var(--fg-secondary);
cursor: pointer;
transition:
background 0.12s,
color 0.12s;
text-decoration: none;
}
[data-theme="sommet"] .sm-sidebar-item:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .sm-sidebar-item.active {
background: var(--surface-active);
color: var(--fg);
font-weight: 500;
}
[data-theme="sommet"] .sm-sidebar-item svg,
[data-theme="sommet"] .sm-sidebar-item [data-lucide] {
width: 13px;
height: 13px;
opacity: 0.65;
flex-shrink: 0;
stroke-width: 1.5;
}
[data-theme="sommet"] .sm-sidebar-item.active svg,
[data-theme="sommet"] .sm-sidebar-item.active [data-lucide] {
opacity: 1;
}
[data-theme="sommet"] .sm-sidebar-item .item-badge {
margin-left: auto;
font-size: 10px;
font-weight: 600;
color: var(--accent);
background: var(--accent-subtle);
border-radius: 8px;
padding: 0 6px;
}
/* Nav loading spinner — circular indicator shown while htmx navigates */
[data-theme="sommet"] .nav-spinner {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1.5px solid var(--edge-strong);
border-top-color: var(--fg-secondary);
animation: sm-spinner-rotate 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes sm-spinner-rotate {
to {
transform: rotate(360deg);
}
}
[data-theme="sommet"] .sm-sidebar-item .nav-spinner,
[data-theme="sommet"] .sm-sidebar-sub-item .nav-spinner {
display: none;
margin-left: auto;
}
[data-theme="sommet"] .sm-sidebar-item.loading .nav-spinner,
[data-theme="sommet"] .sm-sidebar-sub-item.loading .nav-spinner {
display: block;
}
[data-theme="sommet"] .sm-sidebar-item.loading .item-badge {
display: none;
}
/* ── Section sub-item (Orders, Shipments, etc.) ── */
[data-theme="sommet"] .sm-sidebar-sub-item {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 10px;
border-radius: 5px;
font-size: 12.5px;
color: var(--fg-secondary);
cursor: pointer;
transition:
background 0.12s,
color 0.12s;
text-decoration: none;
}
[data-theme="sommet"] .sm-sidebar-sub-item:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .sm-sidebar-sub-item.active {
background: var(--surface-hover);
color: var(--fg);
font-weight: 500;
}
[data-theme="sommet"] .sm-sidebar-sub-item svg,
[data-theme="sommet"] .sm-sidebar-sub-item [data-lucide] {
width: 13px;
height: 13px;
opacity: 0.7;
flex-shrink: 0;
stroke-width: 1.5;
}
[data-theme="sommet"] .sm-sidebar-sub-item.active svg,
[data-theme="sommet"] .sm-sidebar-sub-item.active [data-lucide] {
opacity: 1;
}
/* ── User footer ── */
[data-theme="sommet"] .sm-sidebar-user {
display: flex;
align-items: center;
gap: 9px;
position: relative;
cursor: pointer;
}
[data-theme="sommet"] .sm-sidebar-user .avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: var(--fg);
flex-shrink: 0;
}
[data-theme="sommet"] .sm-sidebar-user-info .name {
font-size: 12px;
font-weight: 500;
color: var(--fg);
}
[data-theme="sommet"] .sm-sidebar-user-info .role {
font-size: 10px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .sm-sidebar-user-menu-btn {
background: none;
border: none;
cursor: pointer;
color: var(--fg-disabled);
padding: 2px;
border-radius: 3px;
transition:
color 0.12s,
background 0.12s;
display: flex;
align-items: center;
margin-left: auto;
}
[data-theme="sommet"] .sm-sidebar-user-menu-btn:hover {
color: var(--fg-secondary);
background: var(--surface-active);
}
[data-theme="sommet"] .sm-sidebar-user-menu-btn [data-lucide],
[data-theme="sommet"] .sm-sidebar-user-menu-btn svg {
width: 16px;
height: 16px;
stroke-width: 1.5;
}
/* ── User popup menu ── */
[data-theme="sommet"] .sm-sidebar-user-menu {
position: absolute;
bottom: 100%;
left: 8px;
right: 8px;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
box-shadow: var(--shadow-md);
padding: 4px;
z-index: 20;
}
[data-theme="sommet"] .sm-sidebar-user-menu.hidden {
display: none;
}
[data-theme="sommet"] .sm-sidebar-user-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 5px;
font-size: 12.5px;
color: var(--fg-secondary);
text-decoration: none;
cursor: pointer;
transition:
background 0.12s,
color 0.12s;
}
[data-theme="sommet"] .sm-sidebar-user-menu-item:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .sm-sidebar-user-menu-item [data-lucide],
[data-theme="sommet"] .sm-sidebar-user-menu-item svg {
width: 14px;
height: 14px;
stroke-width: 1.5;
opacity: 0.6;
}
[data-theme="sommet"] .sm-sidebar-user-menu-item.logout {
color: var(--danger);
}
[data-theme="sommet"] .sm-sidebar-user-menu-item.logout:hover {
background: var(--danger-subtle);
}
[data-theme="sommet"] .sm-sidebar-user-menu-divider {
height: 1px;
background: var(--edge-subtle);
margin: 4px 0;
}
/* ═══════════════════════════════════════════════════════════════════
Sidebar — child component overrides
Remap old Tailwind tokens to Sommet tokens when inside .sm-sidebar
═══════════════════════════════════════════════════════════════════ */
/* ── Workspace switcher override ── */
[data-theme="sommet"] .sm-sidebar-pickers > .relative {
margin: 0; /* kill m-3 mb-0 from the component */
}
[data-theme="sommet"] .sm-sidebar-pickers > .relative > button {
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
color: var(--fg-secondary);
transition:
border-color 0.12s,
box-shadow 0.12s;
width: 100%;
}
[data-theme="sommet"] .sm-sidebar-pickers > .relative > button:hover {
border-color: var(--edge-strong);
box-shadow: var(--shadow-sm);
background: var(--surface);
}
/* Avatar color is set inline via workspace_avatar_color filter */
[data-theme="sommet"] .sm-sidebar-pickers > .relative > button .flex.h-6.w-6 {
border-radius: 3px;
}
[data-theme="sommet"] .sm-sidebar-pickers > .relative > button span.flex-1 {
font-size: 12px;
font-weight: 500;
color: var(--fg-secondary);
text-transform: none;
letter-spacing: normal;
}
[data-theme="sommet"] .sm-sidebar-pickers > .relative > button .sm-sidebar-chevron {
color: var(--fg-disabled) !important;
display: flex !important;
align-items: center;
flex-shrink: 0;
opacity: 1 !important;
visibility: visible !important;
}
[data-theme="sommet"] .sm-sidebar-pickers > .relative > button .sm-sidebar-chevron svg {
width: 14px !important;
height: 14px !important;
stroke-width: 1.5;
color: var(--fg-disabled) !important;
stroke: var(--fg-disabled) !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ── Omni search override ── */
[data-theme="sommet"] .sm-sidebar-search-wrap > .w-full > span {
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
color: var(--fg-tertiary);
font-size: 12px;
padding: 6px 10px;
height: auto;
transition:
border-color 0.12s,
color 0.12s;
}
[data-theme="sommet"] .sm-sidebar-search-wrap > .w-full > span:hover {
border-color: var(--edge-strong);
color: var(--fg-secondary);
}
/* SVG icon inside search trigger */
[data-theme="sommet"] .sm-sidebar-search-wrap > .w-full > span svg {
width: 13px;
height: 13px;
stroke-width: 1.5;
flex-shrink: 0;
color: var(--fg-tertiary);
}
/* Keyboard shortcut badge in search trigger */
[data-theme="sommet"] .sm-sidebar-search-wrap > .w-full > span > span:last-child {
background: var(--surface-active);
border-color: var(--edge);
color: var(--fg-disabled);
font-size: 10px;
}
/* ── Help trigger ── */
[data-theme="sommet"] .sm-sidebar-help {
position: relative;
padding: 8px 8px 4px;
}
[data-theme="sommet"] .sm-sidebar-help-trigger {
all: unset;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 5px 10px;
border-radius: 5px;
font-family: var(--font-sans);
font-size: 12.5px;
color: var(--fg-secondary);
cursor: pointer;
transition:
background 0.12s,
color 0.12s;
}
[data-theme="sommet"] .sm-sidebar-help-trigger:hover svg:last-child {
opacity: 0.6;
}
[data-theme="sommet"] .sm-sidebar-help-trigger svg {
width: 14px;
height: 14px;
opacity: 0.65;
flex-shrink: 0;
stroke-width: 1.5;
}
[data-theme="sommet"] .sm-sidebar-help-trigger svg:last-child {
margin-left: auto;
width: 11px;
height: 11px;
opacity: 0.35;
}
/* ── Help popup menu ── */
[data-theme="sommet"] .sm-sidebar-help-menu {
position: absolute;
bottom: 100%;
left: 8px;
right: 8px;
margin-bottom: 4px;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
box-shadow: var(--shadow-md);
padding: 4px;
z-index: 20;
}
[data-theme="sommet"] .sm-sidebar-help-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 5px;
font-family: var(--font-sans);
font-size: 12.5px;
color: var(--fg-secondary);
text-decoration: none;
cursor: pointer;
transition:
background 0.12s,
color 0.12s;
}
[data-theme="sommet"] .sm-sidebar-help-menu-item:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .sm-sidebar-help-menu-item svg {
width: 14px;
height: 14px;
stroke-width: 1.5;
opacity: 0.6;
flex-shrink: 0;
}
[data-theme="sommet"] .sm-sidebar-help-menu-item svg:last-child {
width: 11px;
height: 11px;
opacity: 0.35;
margin-left: 0;
}
/* ── User button ── */
[data-theme="sommet"] .sm-sidebar-user-btn {
all: unset;
box-sizing: border-box;
width: 100%;
padding: 8px 14px;
display: flex;
align-items: center;
gap: 9px;
cursor: pointer;
transition: background 0.12s;
font-family: var(--font-sans);
}
[data-theme="sommet"] .sm-sidebar-user-btn:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .sm-sidebar-user-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: #fff;
flex-shrink: 0;
text-transform: uppercase;
}
[data-theme="sommet"] .sm-sidebar-user-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
[data-theme="sommet"] .sm-sidebar-user-info .name {
font-size: 12px;
font-weight: 500;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .sm-sidebar-user-info .role {
font-size: 10px;
color: var(--fg-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .sm-sidebar-user-btn .sm-sidebar-user-menu-btn {
margin-left: auto;
color: var(--fg-disabled);
display: flex;
align-items: center;
}
[data-theme="sommet"] .sm-sidebar-user-btn .sm-sidebar-user-menu-btn svg {
width: 14px;
height: 14px;
stroke-width: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════
Team breadcrumb switcher — sm-team-crumb component
═══════════════════════════════════════════════════════════════════ */
[data-theme="sommet"] .sm-team-crumb {
position: relative;
display: inline-flex;
align-items: center;
}
[data-theme="sommet"] .sm-team-crumb-trigger {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 3px;
border-radius: 5px;
border: none;
background: none;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--fg);
transition: background 0.12s;
}
[data-theme="sommet"] .sm-team-crumb-trigger:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .sm-team-crumb-trigger svg {
width: 11px;
height: 11px;
stroke-width: 1.5;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .sm-team-crumb-avatar {
width: 18px;
height: 18px;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 7px;
font-weight: 700;
flex-shrink: 0;
color: #fff;
}
[data-theme="sommet"] .sm-team-crumb-avatar--all {
background: var(--surface-active);
color: var(--fg-secondary);
}
[data-theme="sommet"] .sm-team-crumb-avatar--all svg {
width: 12px;
height: 12px;
stroke-width: 1.5;
}
[data-theme="sommet"] .sm-team-crumb-name {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .sm-team-crumb-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.06);
padding: 4px;
min-width: 180px;
z-index: 60;
}
[data-theme="sommet"] .sm-team-crumb-menu-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
padding: 6px 8px 2px;
}
[data-theme="sommet"] .sm-team-crumb-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 5px;
font-size: 12.5px;
color: var(--fg-secondary);
text-decoration: none;
cursor: pointer;
transition:
background 0.12s,
color 0.12s;
}
[data-theme="sommet"] .sm-team-crumb-menu-item:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .sm-team-crumb-menu-item.active {
background: var(--accent-surface);
color: var(--accent);
font-weight: 500;
}
[data-theme="sommet"] .sm-team-crumb-check {
margin-left: auto;
}
[data-theme="sommet"] .sm-team-crumb-check svg {
width: 13px;
height: 13px;
stroke-width: 2;
color: var(--accent);
}
[data-theme="sommet"] .ac-board-card-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 7px;
font-weight: 600;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-board-card-avatar-bot {
background: var(--accent);
color: var(--accent-fg);
}
[data-theme="sommet"] .ac-board-card-avatar-bot svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
[data-theme="sommet"] .ac-board-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
flex: 1;
padding: 24px 6px;
}
[data-theme="sommet"] .ac-board-empty span {
font-size: 11px;
color: var(--fg-disabled);
}
/* ── Board group-by dropdown ── */
[data-theme="sommet"] .ac-groupby {
display: inline-flex;
align-items: center;
gap: 4px;
}
[data-theme="sommet"] .ac-groupby-sep {
width: 1px;
height: 16px;
background: var(--edge);
margin: 0 2px;
}
[data-theme="sommet"] .ac-groupby-dropdown {
position: relative;
}
[data-theme="sommet"] .ac-groupby-trigger {
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
padding: 3px 6px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--fg-tertiary);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 3px;
transition: all 0.12s;
}
[data-theme="sommet"] .ac-groupby-trigger:hover {
color: var(--fg-secondary);
background: var(--surface-hover);
}
[data-theme="sommet"] .ac-groupby-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
z-index: 30;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
box-shadow: var(--shadow-md);
min-width: 120px;
padding: 4px 0;
}
[data-theme="sommet"] .ac-groupby-opt {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
padding: 5px 12px;
border: none;
background: transparent;
color: var(--fg-secondary);
cursor: pointer;
text-align: left;
transition: background 0.12s;
}
[data-theme="sommet"] .ac-groupby-opt:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .ac-groupby-opt.active {
color: var(--accent);
font-weight: 600;
}
/* ── All Activity table ── */
[data-theme="sommet"] .ac-table-header {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 12px;
margin-bottom: 2px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .ac-th-severity {
width: 7px;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-th-title {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .ac-th-status {
width: 110px;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-th-type {
width: 90px;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-th-assignee {
width: 60px;
flex-shrink: 0;
text-align: center;
}
[data-theme="sommet"] .ac-th-updated {
width: 70px;
flex-shrink: 0;
text-align: right;
}
[data-theme="sommet"] .ac-table-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
border-radius: 7px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.12s;
margin-bottom: 1px;
text-decoration: none;
color: inherit;
}
[data-theme="sommet"] .ac-table-row:hover {
background: var(--surface-hover);
border-color: var(--edge);
}
[data-theme="sommet"] .ac-tr-title {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .ac-tr-title-text {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .ac-tr-subtitle {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .ac-tr-chips {
display: flex;
gap: 4px;
margin-top: 2px;
}
[data-theme="sommet"] .ac-tr-status {
width: 110px;
flex-shrink: 0;
}
[data-theme="sommet"] .ac-tr-type {
width: 90px;
flex-shrink: 0;
font-size: 11.5px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .ac-tr-assignee {
width: 60px;
flex-shrink: 0;
display: flex;
justify-content: center;
}
[data-theme="sommet"] .ac-tr-assignee-av {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
color: #fff;
flex-shrink: 0;
background: var(--fg-disabled);
}
[data-theme="sommet"] .ac-tr-assignee-bot {
background: var(--accent);
color: var(--accent-fg);
}
[data-theme="sommet"] .ac-tr-assignee-bot svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
[data-theme="sommet"] .ac-tr-updated {
width: 70px;
flex-shrink: 0;
font-size: 10px;
color: var(--fg-tertiary);
text-align: right;
}
/* Status pills */
[data-theme="sommet"] .ac-pill {
display: inline-block;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
[data-theme="sommet"] .ac-pill--overdue {
background: var(--danger-subtle);
color: var(--danger-fg);
border: 1px solid var(--danger-border);
}
[data-theme="sommet"] .ac-pill--at-risk {
background: var(--warning-subtle);
color: var(--warning-fg);
border: 1px solid var(--warning-border);
}
[data-theme="sommet"] .ac-pill--resolved {
background: var(--success-subtle);
color: var(--success-fg);
border: 1px solid var(--success-border);
}
[data-theme="sommet"] .ac-pill--monitoring {
background: var(--surface-tint);
color: var(--fg-tertiary);
border: 1px solid var(--edge);
}
/* View filter tabs */
[data-theme="sommet"] .ac-view-filter {
display: flex;
gap: 1px;
background: var(--surface-tint);
border-radius: 6px;
padding: 2px;
margin-left: auto;
}
[data-theme="sommet"] .ac-view-filter button {
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
padding: 4px 11px;
border: none;
border-radius: 4px;
cursor: pointer;
color: var(--fg-tertiary);
background: transparent;
transition: all 0.12s;
line-height: normal;
}
[data-theme="sommet"] .ac-view-filter button:hover {
color: var(--fg-secondary);
}
[data-theme="sommet"] .ac-view-filter button.active {
background: var(--surface);
color: var(--fg);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Pagination */
[data-theme="sommet"] .ac-pagination {
flex-shrink: 0;
padding: 10px 12px;
border-top: 1px solid var(--edge-subtle);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 10px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .ac-page-nav {
display: flex;
align-items: center;
gap: 4px;
}
[data-theme="sommet"] .ac-page-nav a,
[data-theme="sommet"] .ac-page-nav span.ac-page-btn {
font-family: inherit;
font-size: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
border: 1px solid var(--edge);
border-radius: 4px;
background: var(--surface);
color: var(--fg-tertiary);
cursor: pointer;
transition: all 0.12s;
text-decoration: none;
}
[data-theme="sommet"] .ac-page-nav a:hover {
border-color: var(--edge-strong);
color: var(--fg-secondary);
}
[data-theme="sommet"] .ac-page-nav .ac-page-btn--disabled {
opacity: 0.4;
cursor: default;
pointer-events: none;
}
[data-theme="sommet"] .ac-page-info {
font-size: 10px;
color: var(--fg-tertiary);
padding: 0 4px;
}
/* Record chip (shared, table + list rows) */
[data-theme="sommet"] .ac-record-chip {
font-size: 10px;
font-weight: 500;
color: var(--fg-tertiary);
background: var(--surface-tint);
border-radius: 4px;
padding: 2px 6px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--font-mono);
}
/* ── Null state — stacked docs (full-page empty) ── */
@keyframes sommet-empty-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes sommet-null-float-lg {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
[data-theme="sommet"] .null-docs {
position: relative;
width: 120px;
height: 140px;
animation: sommet-null-float-lg 4s ease-in-out infinite;
}
[data-theme="sommet"] .null-doc {
position: absolute;
border-radius: 8px;
border: 1.5px solid;
}
[data-theme="sommet"] .null-doc-1 {
width: 100px;
height: 120px;
bottom: 0;
left: 10px;
background: var(--illust-sand);
border-color: var(--illust-sand-deep);
}
[data-theme="sommet"] .null-doc-2 {
width: 100px;
height: 120px;
bottom: 8px;
left: 5px;
background: white;
border-color: var(--edge);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="sommet"] .null-doc-3 {
width: 100px;
height: 120px;
bottom: 16px;
left: 0;
background: white;
border-color: var(--edge);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
[data-theme="sommet"] .null-doc-3::before {
content: "";
position: absolute;
top: 20px;
left: 14px;
right: 14px;
height: 6px;
background: var(--surface-tint);
border-radius: 3px;
}
[data-theme="sommet"] .null-doc-3::after {
content: "";
position: absolute;
top: 34px;
left: 14px;
width: 50px;
height: 6px;
background: var(--surface-tint);
border-radius: 3px;
}
[data-theme="sommet"] .null-doc-check {
position: absolute;
top: 54px;
left: 14px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--illust-sage);
border: 1.5px solid var(--illust-sage-deep);
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .null-doc-check::after {
content: "";
width: 6px;
height: 3px;
border-left: 1.5px solid var(--success);
border-bottom: 1.5px solid var(--success);
transform: rotate(-45deg);
margin-top: -1px;
}
/* ── Documents tab (detail page) ── */
[data-theme="sommet"] .doc-search-bar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .doc-search-input-wrap {
display: flex;
align-items: center;
gap: 5px;
width: 120px;
flex-shrink: 0;
padding: 3px 8px;
border-radius: 8px;
border: 1px solid var(--edge);
background: var(--surface);
transition: border-color 0.12s;
}
[data-theme="sommet"] .doc-search-input-wrap:focus-within {
border-color: var(--accent);
}
[data-theme="sommet"] .doc-search-input-wrap svg {
width: 11px;
height: 11px;
stroke-width: 1.5;
color: var(--fg-tertiary);
flex-shrink: 0;
}
[data-theme="sommet"] .doc-search-input {
flex: 1;
border: none;
outline: none;
background: none;
font-family: var(--font-sans);
font-size: 10px;
color: var(--fg);
padding: 0;
margin: 0;
line-height: 1;
height: auto;
}
[data-theme="sommet"] .doc-search-input::-moz-placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .doc-search-input::placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .doc-filter-chips {
display: flex;
gap: 4px;
flex: 1;
flex-wrap: wrap;
}
[data-theme="sommet"] .doc-chip {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: inherit;
font-size: 10px;
font-weight: 500;
padding: 3px 8px;
border-radius: 10px;
border: 1px solid var(--edge);
background: var(--surface);
color: var(--fg-tertiary);
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .doc-chip:hover {
border-color: var(--edge-strong);
color: var(--fg-secondary);
}
[data-theme="sommet"] .doc-chip.active {
background: var(--surface-inverse);
color: var(--fg-inverse);
border-color: var(--surface-inverse);
}
[data-theme="sommet"] .doc-chip-size svg {
width: 10px;
height: 10px;
stroke-width: 1.5;
}
[data-theme="sommet"] .file-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--edge-subtle);
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .file-row:hover {
background: var(--surface-hover);
margin: 0 -8px;
padding: 9px 8px;
border-radius: 6px;
}
[data-theme="sommet"] .file-row .file-icon {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .file-row .file-icon svg {
width: 16px;
height: 16px;
stroke-width: 1.5;
}
[data-theme="sommet"] .file-row .file-info {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .file-row .file-name {
font-size: 13px;
font-weight: 500;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .file-row .file-meta {
font-size: 10.5px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .file-row .file-source {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: 1px;
line-height: 1.4;
}
[data-theme="sommet"] .doc-source-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
[data-theme="sommet"] .doc-source-link:hover {
text-decoration: underline;
}
[data-theme="sommet"] .file-row .file-download {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
color: var(--fg-tertiary);
transition: all 0.12s;
}
[data-theme="sommet"] .file-row .file-download:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .file-row .file-download svg {
stroke-width: 1.8;
}
/* Badges */
[data-theme="sommet"] .doc-unsafe-badge {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 9px;
font-weight: 600;
color: #991b1b;
background: #fee2e2;
padding: 1px 5px;
border-radius: 6px;
margin-left: 6px;
vertical-align: middle;
cursor: help;
position: relative;
}
[data-theme="sommet"] .doc-unsafe-badge svg {
width: 9px;
height: 9px;
stroke-width: 2;
}
[data-theme="sommet"] .doc-unsafe-info-icon {
width: 8px !important;
height: 8px !important;
opacity: 0.6;
}
[data-theme="sommet"] .doc-unsafe-tooltip {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 260px;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
box-shadow: var(--shadow-md);
padding: 10px 12px;
z-index: 100;
text-align: left;
font-weight: 400;
font-size: 11px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .doc-unsafe-badge:hover .doc-unsafe-tooltip {
display: block;
}
[data-theme="sommet"] .doc-unsafe-tooltip-title {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: #991b1b;
margin-bottom: 6px;
}
[data-theme="sommet"] .doc-unsafe-tooltip-title svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
[data-theme="sommet"] .doc-unsafe-tooltip-body {
display: block;
font-size: 11px;
color: var(--fg-secondary);
line-height: 1.5;
margin-bottom: 8px;
}
[data-theme="sommet"] .doc-unsafe-tooltip-link {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 500;
color: var(--accent);
text-decoration: none;
}
[data-theme="sommet"] .doc-unsafe-tooltip-link:hover {
text-decoration: underline;
}
[data-theme="sommet"] .doc-unsafe-tooltip-link svg {
width: 10px;
height: 10px;
stroke-width: 2;
}
[data-theme="sommet"] .doc-skipped-badge {
display: inline-flex;
align-items: center;
font-size: 9px;
font-weight: 600;
color: var(--fg-tertiary);
background: var(--surface-tint);
padding: 1px 5px;
border-radius: 6px;
margin-left: 6px;
vertical-align: middle;
}
/* Row states */
[data-theme="sommet"] .doc-row-unsafe {
background: rgba(254, 226, 226, 0.15);
}
[data-theme="sommet"] .doc-row-unprocessed {
opacity: 0.7;
}
[data-theme="sommet"] .doc-row-signature {
opacity: 0.45;
}
/* Documents null state */
[data-theme="sommet"] .doc-null {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 0;
gap: 12px;
}
[data-theme="sommet"] .doc-null-text {
font-size: 13px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .doc-null-hint {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: -4px;
}
/* ── Toolkit tips (contextual help / inline docs) ── */
[data-theme="sommet"] .toolkit-tip {
display: block;
text-align: left;
font-weight: 400;
font-size: 11px;
color: var(--fg-secondary);
line-height: 1.5;
}
[data-theme="sommet"] .toolkit-tip-title {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: var(--fg);
margin-bottom: 6px;
}
[data-theme="sommet"] .toolkit-tip-body {
display: block;
margin-bottom: 8px;
}
[data-theme="sommet"] .toolkit-tip-link {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 500;
color: var(--accent);
text-decoration: none;
}
[data-theme="sommet"] .toolkit-tip-link:hover {
text-decoration: underline;
}
/* ── Timeline tab (detail page) ── */
[data-theme="sommet"] .tl-search-bar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .tl-search-input-wrap {
display: flex;
align-items: center;
gap: 5px;
width: 120px;
flex-shrink: 0;
padding: 3px 8px;
border-radius: 8px;
border: 1px solid var(--edge);
background: var(--surface);
transition: border-color 0.12s;
}
[data-theme="sommet"] .tl-search-input-wrap:focus-within {
border-color: var(--accent);
}
[data-theme="sommet"] .tl-search-input-wrap svg {
width: 11px;
height: 11px;
stroke-width: 1.5;
color: var(--fg-tertiary);
flex-shrink: 0;
}
[data-theme="sommet"] .tl-search-input {
flex: 1;
border: none;
outline: none;
background: none;
font-family: var(--font-sans);
font-size: 10px;
color: var(--fg);
padding: 0;
margin: 0;
line-height: 1;
height: auto;
}
[data-theme="sommet"] .tl-search-input::-moz-placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .tl-search-input::placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .tl-filter-chips {
display: flex;
gap: 4px;
flex: 1;
flex-wrap: wrap;
}
[data-theme="sommet"] .tl-chip {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: inherit;
font-size: 10px;
font-weight: 500;
padding: 3px 8px;
border-radius: 10px;
border: 1px solid var(--edge);
background: var(--surface);
color: var(--fg-tertiary);
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .tl-chip:hover {
border-color: var(--edge-strong);
color: var(--fg-secondary);
}
[data-theme="sommet"] .tl-chip.active {
background: var(--surface-inverse);
color: var(--fg-inverse);
border-color: var(--surface-inverse);
}
[data-theme="sommet"] .tl-chip svg {
width: 10px;
height: 10px;
stroke-width: 1.5;
}
/* Section labels */
[data-theme="sommet"] .tl-section-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
padding: 8px 0 6px;
margin-top: 4px;
border-bottom: 1px dashed var(--edge);
}
/* Timeline entries */
[data-theme="sommet"] .tl-entry {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 12px;
position: relative;
}
[data-theme="sommet"] .tl-entry:has(~ .tl-entry)::before {
content: "";
position: absolute;
left: 22px;
top: 30px;
bottom: -2px;
width: 1px;
background: var(--edge);
}
[data-theme="sommet"] .tl-icon {
width: 22px;
height: 22px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--edge);
background: var(--surface);
color: var(--fg-tertiary);
}
[data-theme="sommet"] .tl-icon svg {
width: 12px;
height: 12px;
stroke-width: 1.5;
}
[data-theme="sommet"] .tl-content {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .tl-time {
font-size: 10.5px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .tl-text {
font-size: 13px;
color: var(--fg);
line-height: 1.4;
}
[data-theme="sommet"] .tl-meta {
font-size: 10.5px;
color: var(--fg-tertiary);
margin-top: 2px;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
/* Agent badge */
[data-theme="sommet"] .tl-agent-badge {
display: inline-flex;
align-items: center;
gap: 2px;
background: var(--accent-subtle);
color: var(--accent);
font-size: 9px;
font-weight: 600;
padding: 0 5px;
border-radius: 8px;
height: 14px;
}
[data-theme="sommet"] .tl-agent-badge svg {
width: 8px;
height: 8px;
stroke-width: 2;
}
[data-theme="sommet"] .tl-via {
display: inline-flex;
align-items: center;
gap: 3px;
}
[data-theme="sommet"] .tl-via svg {
width: 9px;
height: 9px;
stroke-width: 2;
flex-shrink: 0;
}
/* Icon color variants */
[data-theme="sommet"] .tl-icon.tool-email {
border-color: var(--edge-strong);
color: var(--fg-secondary);
background: var(--surface-alt);
}
[data-theme="sommet"] .tl-icon.signal {
border-color: var(--accent-muted);
color: var(--accent);
background: var(--accent-subtle);
}
[data-theme="sommet"] .tl-icon.state {
border-color: var(--edge-strong);
color: var(--fg-tertiary);
}
[data-theme="sommet"] .tl-icon.action {
border-color: var(--accent-muted);
color: var(--accent);
background: var(--accent-subtle);
}
[data-theme="sommet"] .tl-icon.expected {
border-style: dotted;
opacity: 0.5;
}
/* Expected entry — dotted connector */
[data-theme="sommet"] .tl-entry.expected::before {
border-left: 1px dotted var(--edge);
background: none !important;
width: 0;
}
/* View email link */
[data-theme="sommet"] .tl-view-email {
font-size: 11px;
color: var(--accent);
text-decoration: none;
font-weight: 500;
margin-left: 6px;
}
[data-theme="sommet"] .tl-view-email:hover {
text-decoration: underline;
}
/* Confidence chip */
[data-theme="sommet"] .tl-confidence {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9px;
font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
background: var(--surface-tint);
color: var(--fg-tertiary);
cursor: help;
position: relative;
}
[data-theme="sommet"] .tl-confidence svg {
width: 9px;
height: 9px;
stroke-width: 2;
}
[data-theme="sommet"] .tl-confidence.high {
background: var(--success-subtle);
color: var(--success);
}
[data-theme="sommet"] .tl-confidence.medium {
background: var(--warning-subtle);
color: var(--warning);
}
[data-theme="sommet"] .tl-confidence-tooltip {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 240px;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 6px;
box-shadow: var(--shadow-md);
padding: 10px;
z-index: 100;
text-align: left;
}
[data-theme="sommet"] .tl-confidence:hover .tl-confidence-tooltip {
display: block;
}
[data-theme="sommet"] .tl-confidence-tooltip-label {
display: block;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--fg-tertiary);
margin-bottom: 4px;
}
[data-theme="sommet"] .tl-confidence-tooltip-category {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--fg);
margin-bottom: 6px;
}
[data-theme="sommet"] .tl-confidence-tooltip-reason {
display: block;
font-size: 11px;
color: var(--fg-secondary);
line-height: 1.45;
font-weight: 400;
}
/* Timeline null state */
[data-theme="sommet"] .tl-null {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 0;
gap: 12px;
}
[data-theme="sommet"] .tl-null-text {
font-size: 13px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .tl-null-hint {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: -4px;
}
/* ── Emails tab (detail page) ── */
[data-theme="sommet"] .email-thread-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 7px;
border: 1px solid transparent;
border-bottom: 1px solid var(--edge-subtle);
cursor: pointer;
transition: all 0.12s;
text-decoration: none;
color: inherit;
}
[data-theme="sommet"] .email-thread-row:hover {
background: var(--surface-hover);
border-color: var(--edge);
}
[data-theme="sommet"] .email-thread-row.email-active {
background: rgba(99, 102, 241, 0.06);
}
[data-theme="sommet"] .email-thread-row-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent);
color: var(--accent-fg);
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
flex-shrink: 0;
}
[data-theme="sommet"] .email-thread-row-avatar svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
[data-theme="sommet"] .email-thread-row-avatar.human {
color: #fff;
}
[data-theme="sommet"] .email-thread-row-content {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .email-thread-row-sender {
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}
[data-theme="sommet"] .email-thread-row-subject {
font-size: 12px;
color: var(--fg-secondary);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .email-thread-row-direction {
font-weight: 400;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .email-thread-via-agent {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9px;
font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
background: var(--accent-subtle);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.03em;
}
[data-theme="sommet"] .email-thread-via-agent svg {
width: 9px;
height: 9px;
stroke-width: 2;
}
[data-theme="sommet"] .email-thread-row-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
margin-left: auto;
}
[data-theme="sommet"] .email-thread-row-time {
font-size: 11px;
color: var(--fg-tertiary);
white-space: nowrap;
}
[data-theme="sommet"] .email-att-indicator {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 11px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .email-att-indicator svg {
width: 11px;
height: 11px;
stroke-width: 2;
}
/* Emails null state */
[data-theme="sommet"] .email-null {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 0;
gap: 12px;
}
[data-theme="sommet"] .email-null-text {
font-size: 13px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .email-null-hint {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: -4px;
}
/* ── Detail page tab bar ── */
[data-theme="sommet"] .ac-resolve-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--fg);
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 8px;
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .ac-resolve-btn:hover {
background: var(--surface-hover);
border-color: var(--edge-strong, var(--edge));
}
[data-theme="sommet"] .ac-resolve-btn svg {
color: var(--fg-tertiary);
stroke-width: 2;
}
[data-theme="sommet"] .detail-tab-bar {
display: flex;
align-items: center;
gap: 1px;
border-bottom: 1px solid var(--edge);
}
[data-theme="sommet"] .detail-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
line-height: normal;
color: var(--fg-tertiary);
border: none;
background: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .detail-tab:hover {
color: var(--fg-secondary);
}
[data-theme="sommet"] .detail-tab.active {
color: var(--fg);
border-bottom-color: var(--accent);
}
[data-theme="sommet"] .detail-tab svg {
width: 14px;
height: 14px;
stroke-width: 1.5;
}
[data-theme="sommet"] .detail-tab-badge {
font-size: 10px;
font-weight: 600;
color: var(--accent);
background: var(--accent-subtle);
border-radius: 4px;
padding: 1px 6px;
line-height: 1.4;
}
/* ── Detail sidebar ── */
[data-theme="sommet"] .sb-aside {
width: 288px;
flex-shrink: 0;
border-left: 1px solid var(--edge);
padding: 20px 16px;
overflow-y: auto;
}
[data-theme="sommet"] .sb-section-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--fg-tertiary);
margin-bottom: 8px;
}
[data-theme="sommet"] .sb-props {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 20px;
}
[data-theme="sommet"] .sb-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 12px;
}
[data-theme="sommet"] .sb-row svg {
width: 12px;
height: 12px;
stroke-width: 1.5;
color: var(--fg-tertiary);
flex-shrink: 0;
}
[data-theme="sommet"] .sb-label {
color: var(--fg-tertiary);
white-space: nowrap;
}
[data-theme="sommet"] .sb-value {
margin-left: auto;
color: var(--fg-secondary);
}
[data-theme="sommet"] .sb-row .rq-state-badge {
margin-left: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .sb-state-pill {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
background: var(--surface-tint);
color: var(--fg-secondary);
}
/* Assignee button */
[data-theme="sommet"] .sb-assignee-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 6px;
border-radius: 6px;
border: none;
background: none;
font-size: 12px;
color: var(--fg-secondary);
cursor: pointer;
transition: background 0.12s;
max-width: 160px;
}
[data-theme="sommet"] .sb-assignee-btn:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .sb-assignee-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
color: #fff;
flex-shrink: 0;
}
[data-theme="sommet"] .sb-assignee-empty {
color: var(--fg-tertiary);
font-style: italic;
}
[data-theme="sommet"] .sb-assignee-btn svg {
width: 12px;
height: 12px;
stroke-width: 2;
color: var(--fg-tertiary);
}
/* Linked records */
[data-theme="sommet"] .sb-linked {
display: flex;
flex-direction: column;
gap: 6px;
}
[data-theme="sommet"] .sb-linked-card {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid var(--edge);
font-size: 12px;
text-decoration: none;
color: var(--fg-secondary);
transition: all 0.12s;
}
[data-theme="sommet"] .sb-linked-card:hover {
background: var(--surface-hover);
border-color: var(--edge-strong);
}
[data-theme="sommet"] .sb-linked-card svg {
width: 14px;
height: 14px;
stroke-width: 1.5;
flex-shrink: 0;
}
[data-theme="sommet"] .sb-linked-card svg:last-child {
width: 12px;
height: 12px;
color: var(--fg-disabled);
}
[data-theme="sommet"] .sb-linked-info {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .sb-linked-id {
font-family: var(--font-mono);
font-weight: 500;
font-size: 12px;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .sb-linked-type {
font-size: 10px;
color: var(--fg-tertiary);
}
/* Assignee inline dropdown */
[data-theme="sommet"] .sb-assignee-wrap {
position: relative;
}
[data-theme="sommet"] .sb-dropdown {
position: absolute;
top: 100%;
right: 0;
z-index: 30;
width: 220px;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 8px;
box-shadow: var(--shadow-md);
overflow: hidden;
margin-top: 4px;
}
[data-theme="sommet"] .sb-dropdown-search {
padding: 6px;
}
[data-theme="sommet"] .sb-dropdown-search-input {
width: 100%;
padding: 4px 8px;
font-size: 12px;
border: 1px solid var(--edge);
border-radius: 5px;
background: var(--surface);
color: var(--fg);
font-family: var(--font-sans);
outline: none;
}
[data-theme="sommet"] .sb-dropdown-search-input::-moz-placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .sb-dropdown-search-input::placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .sb-dropdown-search-input:focus {
border-color: var(--edge-focus);
}
[data-theme="sommet"] .sb-dropdown-list {
max-height: 180px;
overflow-y: auto;
}
[data-theme="sommet"] .sb-dropdown-empty {
padding: 16px 0;
text-align: center;
font-size: 11px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .sb-dropdown-user {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border: none;
background: none;
text-align: left;
cursor: pointer;
transition: background 0.08s;
font-family: var(--font-sans);
}
[data-theme="sommet"] .sb-dropdown-user:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .sb-dropdown-user-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--surface-tint);
color: var(--fg);
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
flex-shrink: 0;
}
[data-theme="sommet"] .sb-dropdown-user-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
[data-theme="sommet"] .sb-dropdown-user-name {
font-size: 12px;
font-weight: 500;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .sb-dropdown-user-email {
font-size: 10px;
color: var(--fg-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .sb-dropdown-remove {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px;
font-size: 11px;
font-weight: 500;
color: var(--danger);
border: none;
border-top: 1px solid var(--edge-subtle);
background: none;
cursor: pointer;
transition: background 0.08s;
font-family: var(--font-sans);
}
[data-theme="sommet"] .sb-dropdown-remove:hover {
background: var(--danger-subtle);
}
[data-theme="sommet"] .sb-dropdown-remove svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
/* ── Email slideout ── */
[data-theme="sommet"] .es-scrim {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(0, 0, 0, 0.15);
}
[data-theme="sommet"] .es-scrim-enter {
transition: opacity 0.2s ease-out;
}
[data-theme="sommet"] .es-scrim-enter-start {
opacity: 0;
}
[data-theme="sommet"] .es-scrim-enter-end {
opacity: 1;
}
[data-theme="sommet"] .es-scrim-leave {
transition: opacity 0.15s ease-in;
}
[data-theme="sommet"] .es-scrim-leave-start {
opacity: 1;
}
[data-theme="sommet"] .es-scrim-leave-end {
opacity: 0;
}
[data-theme="sommet"] .es-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 400px;
background: var(--surface);
border-left: 1px solid var(--edge);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
}
[data-theme="sommet"] .es-panel-enter {
transition: transform 0.2s ease-out;
}
[data-theme="sommet"] .es-panel-enter-start {
transform: translateX(100%);
}
[data-theme="sommet"] .es-panel-enter-end {
transform: translateX(0);
}
[data-theme="sommet"] .es-panel-leave {
transition: transform 0.15s ease-in;
}
[data-theme="sommet"] .es-panel-leave-start {
transform: translateX(0);
}
[data-theme="sommet"] .es-panel-leave-end {
transform: translateX(100%);
}
[data-theme="sommet"] .es-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 48px 0;
font-size: 13px;
color: var(--fg-tertiary);
}
/* Slideout header */
[data-theme="sommet"] .es-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--edge);
gap: 8px;
flex-shrink: 0;
}
[data-theme="sommet"] .es-back {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
color: var(--fg-secondary);
background: none;
border: none;
cursor: pointer;
padding: 4px 8px 4px 4px;
border-radius: 4px;
transition: all 0.12s;
}
[data-theme="sommet"] .es-back:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .es-back svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
[data-theme="sommet"] .es-header-right {
display: flex;
align-items: center;
gap: 10px;
}
[data-theme="sommet"] .es-pager {
display: inline-flex;
align-items: center;
gap: 2px;
}
[data-theme="sommet"] .es-nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 4px;
border: 1px solid var(--edge);
background: var(--surface);
cursor: pointer;
color: var(--fg-secondary);
transition: all 0.12s;
}
[data-theme="sommet"] .es-nav:hover:not(:disabled) {
background: var(--surface-hover);
color: var(--fg);
border-color: var(--edge-strong);
}
[data-theme="sommet"] .es-nav:disabled {
opacity: 0.35;
cursor: default;
}
[data-theme="sommet"] .es-nav svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
[data-theme="sommet"] .es-pos {
font-size: 11px;
color: var(--fg-tertiary);
padding: 0 6px;
white-space: nowrap;
}
[data-theme="sommet"] .es-open-thread {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 500;
color: var(--accent);
text-decoration: none;
white-space: nowrap;
}
[data-theme="sommet"] .es-open-thread:hover {
text-decoration: underline;
}
[data-theme="sommet"] .es-open-thread svg {
width: 11px;
height: 11px;
stroke-width: 2;
}
/* Slideout body */
[data-theme="sommet"] .es-body {
flex: 1;
overflow-y: auto;
padding: 16px;
}
[data-theme="sommet"] .es-subject {
font-size: 15px;
font-weight: 600;
color: var(--fg);
line-height: 1.35;
margin-bottom: 12px;
}
[data-theme="sommet"] .es-meta {
font-size: 12px;
color: var(--fg-secondary);
line-height: 1.65;
}
[data-theme="sommet"] .es-meta strong {
font-weight: 600;
color: var(--fg-tertiary);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
[data-theme="sommet"] .es-divider {
border: none;
border-top: 1px solid var(--edge-subtle);
margin: 14px 0;
}
[data-theme="sommet"] .es-text {
font-size: 13px;
color: var(--fg);
line-height: 1.6;
word-break: break-word;
}
/* Slideout attachments */
[data-theme="sommet"] .es-attachments {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
[data-theme="sommet"] .es-attachment {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface-alt);
text-decoration: none;
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .es-attachment:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .es-attachment > svg {
flex-shrink: 0;
color: var(--fg-tertiary);
stroke-width: 1.8;
}
[data-theme="sommet"] .es-att-icon {
width: 28px;
height: 28px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .es-att-icon svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
[data-theme="sommet"] .es-att-name {
flex: 1;
min-width: 0;
font-size: 12px;
font-weight: 500;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .es-att-size {
font-size: 11px;
color: var(--fg-tertiary);
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════
Chat tab
═══════════════════════════════════════════════════════════════════ */
[data-theme="sommet"] .chat-container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
font-family: var(--font-sans);
}
/* ── Scroll area ── */
[data-theme="sommet"] .chat-scroll {
flex: 1;
overflow-y: auto;
padding: 8px 16px 16px;
}
/* ── Visibility notice (pinned, not scrollable) ── */
[data-theme="sommet"] .chat-notice {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
margin: 8px 16px 0;
border-radius: 8px;
border: 1px solid var(--edge);
background: var(--surface-alt);
font-size: 11px;
color: var(--fg-secondary);
flex-shrink: 0;
opacity: 0.75;
}
[data-theme="sommet"] .chat-notice svg {
width: 12px;
height: 12px;
stroke-width: 2;
flex-shrink: 0;
color: var(--fg-tertiary);
}
/* ── Date divider ── */
[data-theme="sommet"] .chat-date-divider {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 0;
margin: 8px 0;
}
[data-theme="sommet"] .chat-date-divider span {
font-size: 10px;
font-weight: 600;
color: var(--fg-tertiary);
background: var(--surface-alt);
padding: 2px 12px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ── Onboarding / empty state ── */
[data-theme="sommet"] .chat-onboarding {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 28px;
min-height: 300px;
}
[data-theme="sommet"] .chat-onb-orb {
width: 56px;
height: 56px;
border-radius: 50%;
position: relative;
overflow: hidden;
animation: gliriPreUseBreathe 3.5s ease-in-out infinite;
margin-bottom: 16px;
box-shadow:
0 2px 3px -1px rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.06);
}
[data-theme="sommet"] .chat-onb-orb canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[data-theme="sommet"] .chat-onb-headline {
font-size: 16px;
font-weight: 600;
color: var(--fg);
margin-bottom: 8px;
text-align: center;
}
[data-theme="sommet"] .chat-onb-sub {
font-size: 11.5px;
color: var(--fg-tertiary);
text-align: center;
line-height: 1.5;
max-width: 340px;
margin-bottom: 24px;
}
[data-theme="sommet"] .chat-onb-section {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
margin-bottom: 8px;
text-align: center;
width: 100%;
max-width: 360px;
}
[data-theme="sommet"] .chat-onb-caps {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 360px;
margin-bottom: 24px;
}
[data-theme="sommet"] .chat-onb-cap {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-radius: 6px;
background: var(--surface-tint);
border: 1px solid var(--edge);
}
[data-theme="sommet"] .chat-onb-cap-icon {
width: 28px;
height: 28px;
border-radius: 5px;
background: var(--accent-subtle);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .chat-onb-cap-icon svg {
width: 14px;
height: 14px;
stroke-width: 1.5;
}
[data-theme="sommet"] .chat-onb-cap-title {
font-size: 11.5px;
font-weight: 500;
color: var(--fg);
margin-bottom: 1px;
}
[data-theme="sommet"] .chat-onb-cap-desc {
font-size: 10px;
color: var(--fg-tertiary);
line-height: 1.4;
}
[data-theme="sommet"] .chat-onb-try {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--fg-tertiary);
margin-bottom: 8px;
}
[data-theme="sommet"] .chat-onb-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
[data-theme="sommet"] .chat-onb-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 8px;
border: 1px solid var(--edge);
background: var(--surface);
font-family: inherit;
font-size: 10px;
font-weight: 500;
color: var(--fg-secondary);
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .chat-onb-chip:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-subtle);
}
[data-theme="sommet"] .chat-onb-chip svg {
width: 11px;
height: 11px;
stroke-width: 2;
}
/* ── Messages container ── */
[data-theme="sommet"] .chat-messages {
display: flex;
flex-direction: column;
}
/* ── Message bubbles ── */
[data-theme="sommet"] .chat-msg {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 6px 0;
max-width: 85%;
}
[data-theme="sommet"] .chat-msg.agent {
max-width: 72%;
}
[data-theme="sommet"] .chat-msg.self {
flex-direction: row-reverse;
margin-left: auto;
}
[data-theme="sommet"] .chat-msg.self .chat-msg-body {
align-items: flex-end;
flex: 0 1 auto;
}
[data-theme="sommet"] .chat-msg-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
flex-shrink: 0;
margin-top: 2px;
}
[data-theme="sommet"] .chat-msg-avatar.bot {
background: var(--accent);
color: var(--accent-fg);
}
[data-theme="sommet"] .chat-msg-avatar.bot svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
/* Gliri orb avatar wrapper (replaces filled bot avatar when thinking/streaming) */
[data-theme="sommet"] .chat-msg-avatar-orb {
width: 26px;
height: 26px;
flex-shrink: 0;
margin-top: 2px;
}
[data-theme="sommet"] .chat-msg-avatar.human {
color: #fff;
}
[data-theme="sommet"] .chat-msg-body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
[data-theme="sommet"] .chat-msg-sender {
font-size: 10px;
font-weight: 600;
color: var(--fg-tertiary);
margin-bottom: 2px;
letter-spacing: 0.03em;
}
[data-theme="sommet"] .chat-msg.agent .chat-msg-sender {
color: var(--accent);
}
[data-theme="sommet"] .chat-msg-bubble {
font-size: 12.5px;
color: var(--fg);
line-height: 1.5;
padding: 9px 13px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--edge);
word-break: break-word;
width: -moz-fit-content;
width: fit-content;
}
/* Flatten the corner nearest the sender — agent (left) → top-left,
you (right) → top-right. Same fill for both so they read as one system. */
[data-theme="sommet"] .chat-msg.agent .chat-msg-bubble {
background: var(--surface-alt);
border-top-left-radius: 3px;
}
[data-theme="sommet"] .chat-msg.self .chat-msg-bubble {
background: var(--surface-tint);
border-top-right-radius: 3px;
}
[data-theme="sommet"] .chat-msg-time {
font-size: 10px;
color: var(--fg-tertiary);
margin-top: 3px;
padding: 0 4px;
}
/* ── Evidence dots ── */
[data-theme="sommet"] .chat-evidence {
padding: 4px 0 4px 34px;
}
[data-theme="sommet"] .chat-ed {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
color: var(--fg-secondary);
transition: background 0.12s;
}
[data-theme="sommet"] .chat-ed:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .chat-ed + .chat-ed {
margin-top: 1px;
}
[data-theme="sommet"] .chat-ed-icon {
width: 18px;
height: 18px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .chat-ed-icon svg {
width: 12px;
height: 12px;
stroke-width: 1.75;
}
[data-theme="sommet"] .chat-ed-icon.email {
background: var(--surface-tint);
color: var(--fg-secondary);
}
[data-theme="sommet"] .chat-ed-icon.sap {
background: #fff7ed;
color: #c2410c;
}
[data-theme="sommet"] .chat-ed-icon.sop {
background: var(--accent-subtle);
color: var(--accent);
}
[data-theme="sommet"] .chat-ed-icon.agent {
background: var(--accent-subtle);
color: var(--accent);
}
[data-theme="sommet"] .chat-ed-icon.done {
background: #f0fdf4;
color: #16a34a;
}
[data-theme="sommet"] .chat-ed-verb {
font-weight: 500;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .chat-ed-link {
font-weight: 500;
color: var(--fg);
text-decoration: none;
border-bottom: 1px solid transparent;
}
[data-theme="sommet"] .chat-ed-link:hover {
border-bottom-color: var(--fg-disabled);
}
[data-theme="sommet"] .chat-ed-sep {
color: var(--fg-disabled);
margin: 0 1px;
}
[data-theme="sommet"] .chat-ed-inference {
color: var(--fg-tertiary);
}
/* ── Rich object card ── */
[data-theme="sommet"] .chat-roc {
padding: 12px 14px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
width: 320px;
max-width: 100%;
margin-top: 4px;
transition:
background-color 0.12s ease,
border-color 0.12s ease,
box-shadow 0.12s ease;
}
[data-theme="sommet"] .chat-roc:hover {
background: var(--surface-tint);
border-color: var(--edge-strong);
box-shadow:
0 4px 12px -2px rgba(0, 0, 0, 0.08),
0 2px 4px -1px rgba(0, 0, 0, 0.04);
}
[data-theme="sommet"] .chat-roc-header {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 6px;
}
[data-theme="sommet"] .chat-roc-type-icon {
width: 22px;
height: 22px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .chat-roc-type-icon svg {
width: 13px;
height: 13px;
stroke-width: 1.5;
}
[data-theme="sommet"] .chat-roc-type-icon.order {
background: var(--surface-tint);
color: var(--fg-secondary);
}
[data-theme="sommet"] .chat-roc-type-icon.shipment {
background: var(--surface-tint);
color: var(--fg-secondary);
}
[data-theme="sommet"] .chat-roc-type-icon.automation {
background: var(--accent-subtle);
color: var(--accent);
}
[data-theme="sommet"] .chat-roc-id {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--fg);
flex: 1;
}
[data-theme="sommet"] .chat-roc-expand {
width: 22px;
height: 22px;
border-radius: 5px;
border: 1px solid var(--edge);
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--fg-tertiary);
flex-shrink: 0;
transition: all 0.12s;
}
[data-theme="sommet"] .chat-roc-expand:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-subtle);
}
[data-theme="sommet"] .chat-roc-expand svg {
width: 11px;
height: 11px;
stroke-width: 2;
}
[data-theme="sommet"] .chat-roc-title {
font-size: 13px;
font-weight: 600;
color: var(--fg);
line-height: 1.35;
margin-bottom: 3px;
}
[data-theme="sommet"] .chat-roc-meta {
font-size: 11px;
color: var(--fg-tertiary);
line-height: 1.4;
}
[data-theme="sommet"] .chat-roc-sep {
color: var(--fg-disabled);
margin: 0 2px;
}
[data-theme="sommet"] .chat-roc-status {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 2px 8px;
border-radius: 20px;
font-size: 10px;
font-weight: 600;
}
[data-theme="sommet"] .chat-roc-status.open {
background: var(--accent-subtle);
color: var(--accent);
}
[data-theme="sommet"] .chat-roc-status.partial {
background: #fef9c3;
color: #a16207;
border: 1px solid #fde68a;
}
[data-theme="sommet"] .chat-roc-status.confirmed {
background: #f0fdf4;
color: #16a34a;
}
/* ── Tool interactable ── */
[data-theme="sommet"] .chat-tool {
padding: 4px 0 4px 34px;
max-width: 600px;
}
[data-theme="sommet"] .chat-tool-header {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 0;
font-size: 12px;
font-weight: 500;
color: var(--fg);
}
[data-theme="sommet"] .chat-tool-icon {
width: 18px;
height: 18px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .chat-tool-icon svg {
width: 11px;
height: 11px;
stroke-width: 1.75;
}
[data-theme="sommet"] .chat-tool-icon.agent {
background: var(--accent-subtle);
color: var(--accent);
}
[data-theme="sommet"] .chat-tool-icon.sap {
background: #fff7ed;
color: #c2410c;
}
[data-theme="sommet"] .chat-tool-icon.email {
background: var(--surface-tint);
color: var(--fg-secondary);
}
[data-theme="sommet"] .chat-tool-name {
flex: 1;
}
[data-theme="sommet"] .chat-tool-status {
font-size: 11px;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
[data-theme="sommet"] .chat-tool-status.done {
color: #16a34a;
}
[data-theme="sommet"] .chat-tool-status.done svg {
width: 10px;
height: 10px;
stroke-width: 2.5;
}
[data-theme="sommet"] .chat-tool-status.live {
color: var(--accent);
}
[data-theme="sommet"] .chat-tool-activities {
padding-left: 25px;
border-left: 1px solid var(--edge);
margin-left: 9px;
}
[data-theme="sommet"] .chat-tool-activity {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0 3px 12px;
font-size: 11px;
color: var(--fg-secondary);
position: relative;
}
[data-theme="sommet"] .chat-tool-activity::before {
content: "";
position: absolute;
left: -1px;
top: 50%;
width: 8px;
height: 1px;
background: var(--edge);
}
[data-theme="sommet"] .chat-tool-act-label {
flex: 1;
}
[data-theme="sommet"] .chat-tool-act-status {
font-size: 10px;
}
[data-theme="sommet"] .chat-tool-act-status.done {
color: #16a34a;
}
[data-theme="sommet"] .chat-tool-act-status.done svg {
width: 9px;
height: 9px;
stroke-width: 2.5;
}
[data-theme="sommet"] .chat-tool-comment {
padding: 3px 0 3px 12px;
margin-left: 12px;
font-size: 11px;
color: var(--fg-secondary);
border-left: 2px solid var(--fg-disabled);
padding-left: 10px;
line-height: 1.4;
}
/* ── Action card (email draft / task create) ── */
[data-theme="sommet"] .chat-action-card {
margin: 3px 0px;
border-radius: 10px;
border: 1px solid var(--edge-subtle);
background: var(--surface);
overflow: hidden;
transition:
border-color 0.12s ease,
box-shadow 0.12s ease;
}
[data-theme="sommet"] .chat-action-card:hover {
border-color: var(--edge-strong);
box-shadow:
0 4px 12px -2px rgba(0, 0, 0, 0.08),
0 2px 4px -1px rgba(0, 0, 0, 0.04);
}
[data-theme="sommet"] .chat-ac-header {
display: flex;
align-items: center;
gap: 6px;
padding: 6px;
font-size: 11px;
font-weight: 600;
color: var(--fg);
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .chat-ac-header svg {
width: 12px;
height: 12px;
stroke-width: 1.5;
}
[data-theme="sommet"] .chat-ac-field {
display: flex;
gap: 8px;
padding: 3px 12px;
font-size: 11px;
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .chat-ac-label {
font-weight: 600;
color: var(--fg-tertiary);
width: 96px;
flex-shrink: 0;
padding-top: 1px;
white-space: nowrap;
}
[data-theme="sommet"] .chat-ac-value {
flex: 1;
color: var(--fg);
line-height: 1.4;
outline: none;
}
[data-theme="sommet"] .chat-ac-value:focus {
background: var(--surface-hover);
border-radius: 4px;
margin: -2px;
padding: 2px;
}
[data-theme="sommet"] .chat-ac-actions {
display: flex;
gap: 6px;
padding: 10px 14px;
}
[data-theme="sommet"] .chat-ac-send {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 14px;
border-radius: 6px;
border: none;
background: var(--accent);
color: var(--accent-fg);
font-size: 11px;
font-weight: 500;
cursor: pointer;
font-family: var(--font-sans);
transition: background 0.12s;
}
[data-theme="sommet"] .chat-ac-send:hover {
background: var(--accent-hover);
}
[data-theme="sommet"] .chat-ac-send svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
[data-theme="sommet"] .chat-ac-discard {
padding: 5px 12px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
font-size: 11px;
font-weight: 500;
color: var(--fg-secondary);
cursor: pointer;
font-family: var(--font-sans);
transition: all 0.12s;
}
[data-theme="sommet"] .chat-ac-discard:hover {
border-color: var(--edge-strong);
color: var(--fg);
}
/* Decided state (replaces buttons on acted-upon cards) */
[data-theme="sommet"] .chat-ac-decided {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
font-size: 11px;
font-weight: 500;
color: var(--accent);
}
[data-theme="sommet"] .chat-ac-decided svg {
width: 10px;
height: 10px;
stroke-width: 2.5;
}
[data-theme="sommet"] .chat-ac-decided.rejected {
color: var(--fg-tertiary);
}
/* Top-of-card decision annotation — caps a resolved card so the decider
and reason are visible without expanding. Sits as the first child of
; the card's overflow:hidden keeps the top corners rounded. */
[data-theme="sommet"] .chat-ac-annotation {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 4px 12px;
font-size: 11px;
line-height: 1.4;
border-bottom: 1px solid var(--edge-subtle);
color: var(--fg-secondary);
}
/* Decision annotation on the resolved card's one line — light gray, the SAME
as the tool reason beside it; flows inline (not its own column). Status
colour is carried by the leading tool icon, not here. */
[data-theme="sommet"] .chat-ac-decided-inline {
font-weight: 400;
color: var(--fg-tertiary);
white-space: nowrap;
}
/* Resolved cards drop the card chrome — evidence-dot style, no border/fill —
but regain the card frame once expanded so the detail fields are contained. */
[data-theme="sommet"] .chat-action-card.chat-ac-flat {
border-color: transparent;
background: transparent;
}
[data-theme="sommet"] .chat-action-card.chat-ac-flat .chat-ac-header {
border-bottom-color: transparent;
}
[data-theme="sommet"] .chat-action-card.chat-ac-flat[open] {
border-color: var(--edge);
background: var(--surface);
}
[data-theme="sommet"] .chat-action-card.chat-ac-flat[open] .chat-ac-header {
border-bottom-color: var(--edge-subtle);
}
/* Status colour on the leading type-icon box (first icon). */
[data-theme="sommet"] .chat-roc-type-icon.draft {
background: var(--accent-subtle);
color: var(--accent);
}
[data-theme="sommet"] .chat-roc-type-icon.approved {
background: var(--success-subtle);
color: var(--success);
}
[data-theme="sommet"] .chat-roc-type-icon.rejected {
background: var(--danger-subtle);
color: var(--danger);
}
[data-theme="sommet"] .chat-roc-type-icon.changed {
background: var(--warning-subtle);
color: var(--warning);
}
[data-theme="sommet"] .chat-ac-annotation svg {
width: 11px;
height: 11px;
margin-top: 2px;
flex-shrink: 0;
}
[data-theme="sommet"] .chat-ac-annotation strong {
font-weight: 600;
}
[data-theme="sommet"] .chat-ac-annotation-reason {
color: var(--fg-tertiary);
}
/* Per-decision colour: approved → green, changed → gray, rejected → red. */
[data-theme="sommet"] .chat-ac-annotation.approved,
[data-theme="sommet"] .chat-ac-annotation.approved svg,
[data-theme="sommet"] .chat-ac-annotation.approved strong {
color: var(--success);
}
[data-theme="sommet"] .chat-ac-annotation.changed,
[data-theme="sommet"] .chat-ac-annotation.changed svg {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .chat-ac-annotation.changed strong {
color: var(--fg-secondary);
}
[data-theme="sommet"] .chat-ac-annotation.rejected,
[data-theme="sommet"] .chat-ac-annotation.rejected svg,
[data-theme="sommet"] .chat-ac-annotation.rejected strong {
color: var(--danger);
}
/* ── Approval card ── */
[data-theme="sommet"] .chat-approval {
margin: 6px 0 6px 34px;
max-width: 380px;
padding: 14px 16px;
border-radius: 10px;
border: 1px solid var(--edge);
background: var(--surface);
}
[data-theme="sommet"] .chat-approval-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: var(--fg);
margin-bottom: 8px;
}
[data-theme="sommet"] .chat-approval-header svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
[data-theme="sommet"] .chat-approval-body {
font-size: 13px;
color: var(--fg);
line-height: 1.5;
margin-bottom: 12px;
}
[data-theme="sommet"] .chat-approval-body strong {
font-weight: 600;
}
[data-theme="sommet"] .chat-approval-actions {
display: flex;
gap: 6px;
}
[data-theme="sommet"] .chat-approval-approve {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 16px;
border-radius: 6px;
border: none;
background: var(--accent);
color: var(--accent-fg);
font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: var(--font-sans);
transition: background 0.12s;
}
[data-theme="sommet"] .chat-approval-approve:hover {
background: var(--accent-hover);
}
[data-theme="sommet"] .chat-approval-approve svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
[data-theme="sommet"] .chat-approval-reject {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
font-size: 12px;
font-weight: 500;
color: var(--fg-secondary);
cursor: pointer;
font-family: var(--font-sans);
transition: all 0.12s;
}
[data-theme="sommet"] .chat-approval-reject:hover {
border-color: var(--danger-border);
color: var(--danger);
background: var(--danger-subtle);
}
[data-theme="sommet"] .chat-approval-reject svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
[data-theme="sommet"] .chat-approval-alt {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
font-size: 12px;
font-weight: 500;
color: var(--fg-secondary);
cursor: pointer;
font-family: var(--font-sans);
transition: all 0.12s;
}
[data-theme="sommet"] .chat-approval-alt:hover {
border-color: var(--edge-strong);
color: var(--fg);
}
[data-theme="sommet"] .chat-approval-alt svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
/* ── Approval / draft badges ── */
[data-theme="sommet"] .chat-approval-badge {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 7px;
border-radius: 4px;
margin-left: auto;
}
[data-theme="sommet"] .chat-approval-badge.draft {
background: #fef3c7;
color: #a16207;
}
[data-theme="sommet"] .chat-approval-badge.pending {
background: #fef3c7;
color: #a16207;
}
[data-theme="sommet"] .chat-approval-badge.approved {
background: var(--accent-subtle);
color: var(--accent);
}
[data-theme="sommet"] .chat-approval-badge.rejected {
background: var(--surface-tint);
color: var(--fg-tertiary);
}
/* ── Chat input bar ── */
[data-theme="sommet"] .chat-input-bar {
flex-shrink: 0;
padding: 12px 24px;
position: relative;
border-top: 1px solid var(--edge);
background: var(--surface);
}
[data-theme="sommet"] .chat-input {
display: flex;
align-items: center;
gap: 0;
height: 46px;
border: 1px solid var(--edge);
border-radius: 8px;
background: var(--surface-alt);
padding: 0 8px 0 12px;
transition: border-color 0.12s;
}
[data-theme="sommet"] .chat-input:focus-within {
border-color: var(--edge-focus);
}
[data-theme="sommet"] .chat-slash-trigger {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
cursor: pointer;
color: var(--fg-tertiary);
flex-shrink: 0;
font-size: 14px;
font-weight: 600;
font-family: var(--font-mono);
transition: color 0.12s;
}
[data-theme="sommet"] .chat-slash-trigger:hover {
color: var(--accent);
}
[data-theme="sommet"] .chat-input-wrap {
flex: 1;
min-width: 0;
position: relative;
}
[data-theme="sommet"] .chat-textarea {
width: 100%;
display: block;
padding: 0;
border: none;
outline: none;
background: transparent;
font-size: 12.5px;
font-family: var(--font-sans);
line-height: 1.4;
color: var(--fg);
resize: none;
overflow-y: auto;
min-height: 20px;
max-height: 80px;
}
[data-theme="sommet"] .chat-textarea:focus {
outline: none;
box-shadow: none;
--tw-ring-shadow: 0 0 #0000;
}
[data-theme="sommet"] .chat-textarea::-moz-placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .chat-textarea::placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .chat-input-wrap input {
width: 100%;
padding: 8px 0;
border: none;
outline: none;
font-size: 13px;
font-family: var(--font-sans);
background: transparent;
color: var(--fg);
box-shadow: none; /* override base focus ring */
}
[data-theme="sommet"] .chat-input-wrap input:focus,
[data-theme="sommet"] .chat-input-wrap input:focus-visible {
outline: none;
box-shadow: none;
--tw-ring-shadow: 0 0 #0000;
}
[data-theme="sommet"] .chat-input-wrap input::-moz-placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .chat-input-wrap input::placeholder {
color: var(--fg-placeholder);
}
[data-theme="sommet"] .chat-send-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 6px;
background: var(--accent);
cursor: pointer;
color: var(--accent-fg, #fff);
flex-shrink: 0;
transition: background 0.12s;
}
[data-theme="sommet"] .chat-send-btn:hover {
background: var(--accent-hover);
}
[data-theme="sommet"] .chat-send-btn:disabled {
opacity: 0.35;
cursor: default;
}
[data-theme="sommet"] .chat-send-btn svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
/* ── Slash command popup ── */
[data-theme="sommet"] .chat-slash-popup {
position: absolute;
bottom: calc(100% + 4px);
left: 16px;
right: 16px;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
z-index: 20;
max-height: 320px;
overflow-y: auto;
}
[data-theme="sommet"] .chat-slash-header {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--fg-tertiary);
padding: 6px 10px 4px;
}
[data-theme="sommet"] .chat-slash-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: 6px;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.08s;
font-family: var(--font-sans);
}
[data-theme="sommet"] .chat-slash-item:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .chat-slash-icon {
width: 22px;
height: 22px;
border-radius: 5px;
background: var(--surface-tint);
color: var(--fg-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .chat-slash-icon svg {
width: 13px;
height: 13px;
stroke-width: 1.5;
}
[data-theme="sommet"] .chat-slash-name {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--fg);
}
[data-theme="sommet"] .chat-slash-desc {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: 1px;
}
/* ── SOP step tracker ── */
[data-theme="sommet"] .chat-sop {
padding: 4px 0 4px 34px;
max-width: 600px;
}
[data-theme="sommet"] .chat-sop-header {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 0;
font-size: 12px;
font-weight: 500;
color: var(--fg);
}
[data-theme="sommet"] .chat-sop-name {
font-weight: 600;
}
[data-theme="sommet"] .chat-sop-steps {
padding-left: 25px;
border-left: 1px solid var(--edge);
margin-left: 9px;
}
[data-theme="sommet"] .chat-sop-step {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0;
font-size: 11px;
color: var(--fg-secondary);
}
/* branch lines removed — icon alone marks each step */
[data-theme="sommet"] .chat-sop-step-icon {
width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .chat-sop-step-icon svg {
width: 9px;
height: 9px;
stroke-width: 2.5;
}
[data-theme="sommet"] .chat-sop-step-icon.done {
background: #f0fdf4;
color: #16a34a;
}
[data-theme="sommet"] .chat-sop-step-icon.live {
background: var(--accent-subtle);
color: var(--accent);
}
[data-theme="sommet"] .chat-sop-step-icon.pending {
background: var(--surface-tint);
color: var(--fg-disabled);
}
[data-theme="sommet"] .chat-sop-step-icon.failed {
background: var(--danger-subtle);
color: var(--danger);
}
/* ── Chain-of-thought / reasoning (ghost toggle) ── */
[data-theme="sommet"] .chat-cot {
margin: 4px 0 4px 34px;
max-width: 600px;
}
[data-theme="sommet"] .chat-cot-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0;
cursor: pointer;
font-size: 11px;
color: var(--fg-tertiary);
transition: color 0.12s;
}
[data-theme="sommet"] .chat-cot-toggle:hover {
color: var(--fg-secondary);
}
[data-theme="sommet"] .chat-cot-label {
font-weight: 500;
font-style: italic;
}
[data-theme="sommet"] .chat-cot-label.live {
font-style: italic;
animation: chat-cot-shimmer 2s ease-in-out infinite;
}
@keyframes chat-cot-shimmer {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
[data-theme="sommet"] .chat-cot-chevron {
transition: transform 0.2s;
flex-shrink: 0;
}
[data-theme="sommet"] .chat-cot-chevron.open {
transform: rotate(180deg);
}
[data-theme="sommet"] .chat-cot-chevron svg {
width: 10px;
height: 10px;
stroke-width: 2;
}
[data-theme="sommet"] .chat-cot-body {
margin-top: 4px;
padding: 8px 0 4px;
font-size: 11px;
color: var(--fg-tertiary);
line-height: 1.55;
}
/* Tool calls inside reasoning */
[data-theme="sommet"] .chat-cot-tools {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 6px;
padding-left: 8px;
border-left: 1px solid var(--edge);
}
[data-theme="sommet"] .chat-cot-tool {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 2px 0;
font-size: 11px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .chat-cot-tool-status {
margin-left: auto;
display: flex;
align-items: center;
}
[data-theme="sommet"] .chat-cot-tool-status.done {
color: #16a34a;
}
[data-theme="sommet"] .chat-cot-tool-status.done svg {
width: 10px;
height: 10px;
stroke-width: 2.5;
}
[data-theme="sommet"] .chat-cot-tool-status.live {
color: var(--accent);
}
/* Reasoning text block */
[data-theme="sommet"] .chat-cot-text {
font-size: 11px;
color: var(--fg-tertiary);
line-height: 1.55;
font-style: italic;
}
[data-theme="sommet"] .chat-cot-text p + p {
margin-top: 6px;
}
/* Collapsed reasoning text — clamp only when truncated */
[data-theme="sommet"] .chat-cot-text.is-clamped {
max-height: 6rem;
overflow: hidden;
}
/* Fade-out applied only when content actually overflows the clamp */
[data-theme="sommet"] .chat-cot-text.is-faded {
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* ── Tool chain wrapper ── */
[data-theme="sommet"] .chat-tool-chain {
padding: 4px 0 4px 34px;
}
[data-theme="sommet"] .chat-tool-chain .chat-tool {
padding: 0;
margin-bottom: 2px;
}
/* ── Live dot pulse ── */
[data-theme="sommet"] .chat-dot-live {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
animation: chat-pulse 1.4s ease-in-out infinite;
}
@keyframes chat-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
/* ── Loading verb (shimmer text, no typing dots) ── */
[data-theme="sommet"] .chat-loading-verb {
font-size: 12px;
font-style: italic;
color: var(--fg-tertiary);
animation: chat-cot-shimmer 2s ease-in-out infinite;
}
/* ── Rejected evidence dot ── */
[data-theme="sommet"] .chat-ed-icon.rejected {
background: var(--danger-subtle);
color: var(--danger);
}
[data-theme="sommet"] .chat-ed.rejected .chat-ed-verb {
color: var(--danger);
}
/* (tool trails now use .chat-cot ghost pattern) */
/* ── Unfurled rich link preview ── */
[data-theme="sommet"] .chat-rlp {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--edge);
background: var(--surface);
max-width: 340px;
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .chat-rlp:hover {
border-color: var(--edge-strong);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="sommet"] .chat-rlp-icon {
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--surface-tint);
color: var(--fg-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .chat-rlp-icon svg {
width: 14px;
height: 14px;
stroke-width: 1.5;
}
[data-theme="sommet"] .chat-rlp-info {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .chat-rlp-title {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--fg);
line-height: 1.3;
}
[data-theme="sommet"] .chat-rlp-meta {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: 1px;
}
[data-theme="sommet"] .chat-rlp-arrow {
color: var(--fg-disabled);
flex-shrink: 0;
}
[data-theme="sommet"] .chat-rlp-arrow svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
/* ── Stacked object list (chat-rol) — reference: rich-object-list ── */
[data-theme="sommet"] .chat-rol {
margin-top: 6px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
overflow: hidden;
width: 100%;
transition:
border-color 0.12s ease,
box-shadow 0.12s ease;
}
[data-theme="sommet"] .chat-rol:hover {
border-color: var(--edge-strong);
box-shadow:
0 4px 12px -2px rgba(0, 0, 0, 0.08),
0 2px 4px -1px rgba(0, 0, 0, 0.04);
}
[data-theme="sommet"] .chat-rol-header {
display: flex;
align-items: center;
gap: 7px;
padding: 3px 12px;
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .chat-rol-count {
flex: 1;
font-size: 9px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .chat-rol-expand {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1px solid var(--edge);
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.12s;
flex-shrink: 0;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .chat-rol-expand:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-subtle);
}
[data-theme="sommet"] .chat-rol-expand svg {
width: 11px;
height: 11px;
stroke-width: 1.5;
}
[data-theme="sommet"] .chat-rol-row {
display: flex;
align-items: center;
gap: 0;
padding: 8px 14px;
border-bottom: 1px solid var(--edge-subtle);
font-size: 13px;
transition: background-color 0.08s ease;
cursor: pointer;
text-decoration: none;
color: inherit;
}
[data-theme="sommet"] .chat-rol-row:hover {
background: var(--surface-tint);
}
[data-theme="sommet"] .chat-rol-row:last-of-type {
border-bottom: none;
}
[data-theme="sommet"] .chat-rol-cell {
flex-shrink: 0;
}
[data-theme="sommet"] .chat-rol-cell.id {
width: 120px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 8px;
}
[data-theme="sommet"] .chat-rol-cell.name {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--fg-secondary);
padding-right: 8px;
}
[data-theme="sommet"] .chat-rol-cell.status {
width: 90px;
text-align: center;
}
[data-theme="sommet"] .chat-rol-cell.date {
min-width: 72px;
text-align: right;
font-size: 11px;
color: var(--fg-tertiary);
white-space: nowrap;
padding-left: 8px;
}
[data-theme="sommet"] .chat-rol-cell .chat-rol-status,
[data-theme="sommet"] .chat-rol-cell .chat-roc-status {
margin-top: 0;
font-size: 9px;
padding: 1px 6px;
}
[data-theme="sommet"] .chat-rol-status {
padding: 1px 6px;
border-radius: 20px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
[data-theme="sommet"] .chat-rol-status.partial {
background: #fef9c3;
color: #a16207;
}
[data-theme="sommet"] .chat-rol-status.confirmed {
background: #f0fdf4;
color: #16a34a;
}
[data-theme="sommet"] .chat-rol-status.open {
background: var(--accent-subtle);
color: var(--accent);
}
[data-theme="sommet"] .chat-rol-more {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px 14px;
border: none;
border-top: 1px solid var(--edge-subtle);
background: var(--surface);
color: var(--accent);
font-size: 11px;
font-weight: 500;
text-align: center;
cursor: pointer;
font-family: var(--font-sans);
transition: background 0.08s;
}
[data-theme="sommet"] .chat-rol-more:hover {
background: var(--accent-subtle);
}
/* ── Document review trigger card ── */
[data-theme="sommet"] .chat-doc-review {
margin: 6px 0 6px 34px;
max-width: 400px;
border-radius: 10px;
border: 1px solid var(--edge);
background: var(--surface);
overflow: hidden;
}
[data-theme="sommet"] .chat-doc-review-header {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
font-size: 11px;
font-weight: 600;
color: var(--fg);
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .chat-doc-review-header svg {
width: 13px;
height: 13px;
stroke-width: 1.5;
}
[data-theme="sommet"] .chat-doc-review-summary {
padding: 10px 14px 6px;
font-size: 12px;
color: var(--fg);
line-height: 1.5;
}
[data-theme="sommet"] .chat-doc-review-summary strong {
font-weight: 600;
}
[data-theme="sommet"] .chat-doc-review-conflicts {
color: #a16207;
font-weight: 600;
}
[data-theme="sommet"] .chat-doc-review-fields {
padding: 4px 14px 10px;
}
[data-theme="sommet"] .chat-doc-review-field {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 11px;
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .chat-doc-review-field:last-child {
border-bottom: none;
}
[data-theme="sommet"] .chat-doc-review-field-name {
width: 110px;
flex-shrink: 0;
color: var(--fg-tertiary);
font-weight: 500;
}
[data-theme="sommet"] .chat-doc-review-field-value {
flex: 1;
min-width: 0;
color: var(--fg-secondary);
font-family: var(--font-mono);
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .chat-doc-review-field-status {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 600;
}
[data-theme="sommet"] .chat-doc-review-field-status svg {
width: 9px;
height: 9px;
stroke-width: 2;
}
[data-theme="sommet"] .chat-doc-review-field.ok .chat-doc-review-field-status {
color: #16a34a;
}
[data-theme="sommet"] .chat-doc-review-field.conflict .chat-doc-review-field-status {
color: #a16207;
}
[data-theme="sommet"] .chat-doc-review-open {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 10px 14px;
border: none;
border-top: 1px solid var(--edge-subtle);
background: var(--surface-alt);
color: var(--accent);
font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: var(--font-sans);
transition: all 0.12s;
}
[data-theme="sommet"] .chat-doc-review-open:hover {
background: var(--accent-subtle);
}
[data-theme="sommet"] .chat-doc-review-open svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
/* ═══════════════════════════════════════════════════════════════════
Action Card — sm-action-card component
Used on Control Tower dashboard for action center items.
═══════════════════════════════════════════════════════════════════ */
[data-theme="sommet"] .sm-action-card {
display: flex;
flex-direction: column;
width: 400px;
max-height: 400px;
flex-shrink: 0;
padding: 20px;
border-radius: 12px;
border: 1px solid var(--edge);
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: box-shadow 0.15s ease;
}
[data-theme="sommet"] .sm-action-card:hover {
box-shadow: var(--shadow-md);
}
[data-theme="sommet"] .sm-action-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 16px;
}
[data-theme="sommet"] .sm-action-card-body {
flex: 1;
font-size: 14px;
line-height: 1.5;
color: var(--fg);
}
[data-theme="sommet"] .sm-action-card-body .prose {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
[data-theme="sommet"] .sm-action-card-impact {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-size: 14px;
}
[data-theme="sommet"] .sm-action-card-impact-label {
color: var(--fg-secondary);
}
[data-theme="sommet"] .sm-action-card-impact-value {
font-weight: 700;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .sm-action-card-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
}
/* ── Buttons ── */
[data-theme="sommet"] .sm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 12px;
font-size: 14px;
font-weight: 500;
font-family: var(--font-sans);
border-radius: 6px;
cursor: pointer;
transition:
background 0.12s,
border-color 0.12s;
border: 1px solid transparent;
line-height: 1;
}
[data-theme="sommet"] .sm-btn svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
[data-theme="sommet"] .sm-btn-primary {
background: var(--surface-inverse);
color: var(--fg-inverse);
border-color: var(--surface-inverse);
}
[data-theme="sommet"] .sm-btn-primary:hover {
background: #27272a; /* zinc-800 */
}
[data-theme="sommet"] .sm-btn-secondary {
background: var(--surface);
color: var(--fg);
border-color: var(--edge);
}
[data-theme="sommet"] .sm-btn-secondary:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .sm-btn-danger {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
[data-theme="sommet"] .sm-btn-danger:hover {
background: var(--danger-fg);
}
[data-theme="sommet"] .sm-btn-danger:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Priority badge ── */
[data-theme="sommet"] .sm-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1;
}
[data-theme="sommet"] .sm-badge svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
[data-theme="sommet"] .sm-badge--critical {
background: var(--danger-subtle);
color: var(--danger-fg);
border-color: var(--danger-border);
}
[data-theme="sommet"] .sm-badge--high {
background: var(--warning-subtle);
color: var(--warning-fg);
border-color: var(--warning-border);
}
[data-theme="sommet"] .sm-badge--medium {
background: var(--warning-subtle);
color: var(--warning-fg);
border-color: var(--warning-border);
}
[data-theme="sommet"] .sm-badge--low {
background: var(--surface-hover);
color: var(--fg-secondary);
border-color: var(--edge);
}
/* ── Record chip (shipment / order links) ── */
[data-theme="sommet"] .sm-chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
[data-theme="sommet"] .sm-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
transition: box-shadow 0.12s;
}
[data-theme="sommet"] .sm-chip:hover {
box-shadow: var(--shadow-sm);
}
[data-theme="sommet"] .sm-chip svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
[data-theme="sommet"] .sm-chip--shipment {
background: var(--accent-subtle);
color: var(--accent);
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.15);
}
[data-theme="sommet"] .sm-chip--order {
background: var(--surface-hover);
color: var(--fg-secondary);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* ── Dismiss modal ── */
[data-theme="sommet"] .sm-modal-backdrop {
background: var(--surface);
opacity: 0.7;
}
[data-theme="sommet"] .sm-modal-panel {
background: var(--surface);
border: 1px solid var(--edge);
box-shadow: var(--shadow-panel);
}
[data-theme="sommet"] .sm-modal-icon-danger {
color: var(--danger);
}
[data-theme="sommet"] .sm-modal-title {
color: var(--fg);
font-weight: 700;
line-height: 1;
}
[data-theme="sommet"] .sm-modal-subtitle {
font-size: 12px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .sm-modal-body-text {
color: var(--fg-secondary);
padding-left: 8px;
margin-bottom: 24px;
}
[data-theme="sommet"] .sm-modal-footer {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--edge);
}
[data-theme="sommet"] .sm-modal-footer .sm-btn {
flex: 1;
justify-content: center;
}
/* ── Warning callout ── */
[data-theme="sommet"] .sm-callout-warning {
display: flex;
gap: 8px;
padding: 12px;
border-radius: 6px;
background: var(--warning-subtle);
border: 1px solid var(--warning-border);
font-size: 12px;
color: var(--warning-fg);
}
[data-theme="sommet"] .sm-callout-warning svg {
flex-shrink: 0;
}
[data-theme="sommet"] .sm-callout-warning-title {
font-weight: 500;
margin-bottom: 4px;
}
[data-theme="sommet"] .sm-callout-warning-list {
list-style: disc;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
/* ── Misc text helpers (linter-safe, no inline style color) ── */
[data-theme="sommet"] .sm-text-link {
font-size: 11px;
color: var(--accent);
background: none;
border: none;
cursor: pointer;
padding-left: 4px;
}
[data-theme="sommet"] .sm-text-link:hover {
text-decoration: underline;
}
[data-theme="sommet"] .sm-text-empty {
font-size: 12px;
color: var(--fg-tertiary);
font-style: italic;
}
/* ── Page shell ── */
#main-page-content:has([data-theme="sommet"]) {
display: flex;
flex-direction: column;
overflow: hidden;
}
[data-theme="sommet"].rq-page {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
[data-theme="sommet"] .rq-content {
flex: 1;
min-height: 0;
overflow-y: auto;
}
[data-theme="sommet"] .rq-overflow-anchor {
position: relative;
}
/* ── Toolbar ── */
[data-theme="sommet"] .rq-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-bottom: 1px solid var(--edge-subtle);
flex-shrink: 0;
gap: 8px;
}
[data-theme="sommet"] .rq-toolbar__left {
display: flex;
align-items: center;
gap: 8px;
}
[data-theme="sommet"] .rq-toolbar__right {
display: flex;
align-items: center;
gap: 6px;
}
/* View picker (state dropdown) */
[data-theme="sommet"] .rq-view-picker {
position: relative;
}
[data-theme="sommet"] .rq-view-btn {
display: flex;
align-items: center;
gap: 5px;
font-family: inherit;
font-size: 12.5px;
font-weight: 500;
padding: 5px 10px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
cursor: pointer;
transition: all 0.12s;
color: var(--fg);
height: 30px;
box-sizing: border-box;
}
[data-theme="sommet"] .rq-view-btn:hover {
border-color: var(--edge-strong);
}
[data-theme="sommet"] .rq-view-btn svg {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-view-picker {
position: relative;
}
[data-theme="sommet"] .rq-view-btn {
display: flex;
align-items: center;
gap: 5px;
font-family: inherit;
font-size: 11px;
font-weight: 500;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
cursor: pointer;
transition: all 0.12s;
color: var(--fg);
box-sizing: border-box;
}
[data-theme="sommet"] .rq-view-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
margin-top: 4px;
padding: 4px;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 20;
}
[data-theme="sommet"] .rq-view-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
color: var(--fg-secondary);
cursor: pointer;
transition: all 0.12s;
text-decoration: none;
}
[data-theme="sommet"] .rq-view-option:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .rq-view-option.active {
background: var(--accent-subtle, rgba(99, 102, 241, 0.08));
color: var(--accent);
font-weight: 500;
}
[data-theme="sommet"] .rq-view-count {
font-size: 10px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-view-option.active .rq-view-count {
color: var(--accent);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 6px 10px;
border-radius: 6px;
border: none;
background: none;
font-family: inherit;
font-size: 11px;
color: var(--fg-secondary);
cursor: pointer;
transition: all 0.12s;
text-decoration: none;
text-align: left;
white-space: nowrap;
}
/* Filter / toolbar buttons */
[data-theme="sommet"] .rq-filter-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
padding: 5px 10px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
color: var(--fg-secondary);
cursor: pointer;
transition: all 0.12s;
text-decoration: none;
height: 28px;
box-sizing: border-box;
}
[data-theme="sommet"] .rq-filter-btn:hover {
border-color: var(--edge-strong);
color: var(--fg);
}
[data-theme="sommet"] .rq-filter-btn--active {
border-color: var(--accent);
background: var(--accent-subtle, rgba(99, 102, 241, 0.06));
color: var(--accent);
}
[data-theme="sommet"] .rq-filter-btn--active .rq-view-count {
color: var(--accent);
}
/* Search input */
[data-theme="sommet"] .rq-search {
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
transition: border-color 0.12s;
min-width: 160px;
height: 28px;
box-sizing: border-box;
}
[data-theme="sommet"] .rq-search:focus-within {
border-color: var(--accent);
}
[data-theme="sommet"] .rq-search svg {
color: var(--fg-tertiary);
flex-shrink: 0;
}
[data-theme="sommet"] .rq-search input {
flex: 1;
border: none;
outline: none;
background: none;
font-family: inherit;
font-size: 11.5px;
color: var(--fg);
box-shadow: none;
}
[data-theme="sommet"] .rq-search input:focus,
[data-theme="sommet"] .rq-search input:focus-visible {
outline: none !important;
box-shadow: none !important;
--tw-ring-shadow: none;
}
[data-theme="sommet"] .rq-search input::-moz-placeholder {
color: var(--fg-placeholder, var(--fg-tertiary));
}
[data-theme="sommet"] .rq-search input::placeholder {
color: var(--fg-placeholder, var(--fg-tertiary));
}
/* Hero create button */
[data-theme="sommet"] .rq-hero-create {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 16px;
border-radius: 6px;
background: var(--surface-inverse);
color: var(--fg-inverse);
border: none;
cursor: pointer;
text-decoration: none;
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
transition: all 0.12s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
height: 32px;
box-sizing: border-box;
}
[data-theme="sommet"] .rq-hero-create:hover {
opacity: 0.9;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
/* ── Table (flex layout) ── */
[data-theme="sommet"] .rq-lt-header {
display: flex;
align-items: center;
padding: 6px 20px;
border-bottom: 1px solid var(--edge);
background: var(--surface-tint);
position: sticky;
top: 0;
z-index: 2;
}
[data-theme="sommet"] .rq-lt-th {
flex: 1;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
padding: 4px 8px;
min-width: 0;
}
[data-theme="sommet"] .rq-lt-th--right {
text-align: right;
}
[data-theme="sommet"] .rq-lt-th--center {
text-align: center;
}
[data-theme="sommet"] .rq-lt-row {
display: flex;
align-items: center;
padding: 8px 20px;
border-bottom: 1px solid var(--edge-subtle);
cursor: pointer;
transition: background 0.12s;
}
[data-theme="sommet"] .rq-lt-row:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-lt-td {
flex: 1;
font-size: 12px;
color: var(--fg);
padding: 4px 8px;
min-width: 0;
}
[data-theme="sommet"] .rq-lt-td--right {
text-align: right;
}
[data-theme="sommet"] .rq-lt-td--center {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .rq-lt-title {
font-weight: 500;
color: var(--fg);
text-decoration: none;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .rq-lt-title:hover {
text-decoration: underline;
}
[data-theme="sommet"] .rq-lt-sub {
display: flex;
align-items: center;
gap: 3px;
font-size: 10px;
color: var(--fg-tertiary);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .rq-lt-sub--dim {
color: var(--fg-disabled);
}
[data-theme="sommet"] .rq-lt-dim {
color: var(--fg-placeholder, var(--fg-tertiary));
}
/* Type badge */
[data-theme="sommet"] .rq-type-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
background: var(--surface-tint);
color: var(--fg-secondary);
border: 1px solid var(--edge-subtle);
text-transform: uppercase;
letter-spacing: 0.03em;
}
[data-theme="sommet"] .rq-type-badge--rfq,
[data-theme="sommet"] .rq-type-badge--sourcing,
[data-theme="sommet"] .rq-type-badge--onboarding {
background: var(--accent-subtle, rgba(99, 102, 241, 0.08));
color: var(--accent);
border-color: var(--accent-subtle, rgba(99, 102, 241, 0.15));
}
[data-theme="sommet"] .rq-type-badge--compliance {
background: var(--warning-subtle, rgba(231, 157, 19, 0.08));
color: var(--warning);
border-color: var(--warning-subtle, rgba(231, 157, 19, 0.15));
}
/* State badge */
[data-theme="sommet"] .rq-state-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
[data-theme="sommet"] .rq-state-badge--open {
background: var(--success-subtle, rgba(48, 164, 108, 0.08));
color: var(--success);
border: 1px solid var(--success-subtle, rgba(48, 164, 108, 0.15));
}
[data-theme="sommet"] .rq-state-badge--draft {
background: var(--surface-tint);
color: var(--fg-tertiary);
border: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-state-badge--closed {
background: var(--success-subtle, rgba(48, 164, 108, 0.08));
color: var(--success);
border: 1px solid var(--success-subtle, rgba(48, 164, 108, 0.15));
}
[data-theme="sommet"] .rq-state-badge--cancelled {
background: var(--danger-subtle, rgba(229, 72, 77, 0.08));
color: var(--danger);
border: 1px solid var(--danger-subtle, rgba(229, 72, 77, 0.15));
}
/* Participant state badges */
[data-theme="sommet"] .rq-state-badge--in_progress {
background: var(--accent-subtle);
color: var(--accent);
border: 1px solid var(--accent-muted, var(--accent-subtle));
}
[data-theme="sommet"] .rq-state-badge--pending_review {
background: var(--warning-subtle);
color: var(--warning-fg, var(--warning));
border: 1px solid var(--warning-border, var(--warning-subtle));
}
[data-theme="sommet"] .rq-state-badge--flagged {
background: var(--danger-subtle);
color: var(--danger-fg, var(--danger));
border: 1px solid var(--danger-border, var(--danger-subtle));
}
[data-theme="sommet"] .rq-state-badge--accepted {
background: var(--success-subtle);
color: var(--success-fg, var(--success));
}
[data-theme="sommet"] .rq-state-badge--rejected {
background: var(--danger-subtle);
color: var(--danger-fg, var(--danger));
}
[data-theme="sommet"] .rq-state-badge--awarded {
background: var(--success-subtle);
color: var(--success-fg, var(--success));
border: 1px solid var(--success-border, var(--success-subtle));
}
[data-theme="sommet"] .rq-state-badge--declined {
background: var(--surface-tint);
color: var(--fg-tertiary);
border: 1px solid var(--edge-subtle);
}
/* Avatar */
[data-theme="sommet"] .rq-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
color: white;
flex-shrink: 0;
}
/* Overflow menu */
[data-theme="sommet"] .rq-overflow-menu {
position: absolute;
right: 0;
z-index: 20;
margin-top: 4px;
width: 176px;
border-radius: 8px;
border: 1px solid var(--edge);
background: var(--surface);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 4px;
}
[data-theme="sommet"] .rq-overflow-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
text-align: left;
padding: 6px 10px;
border-radius: 6px;
font-family: inherit;
font-size: 12px;
color: var(--fg-secondary);
border: none;
background: none;
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .rq-overflow-item svg {
flex-shrink: 0;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-overflow-item:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .rq-overflow-item:hover svg {
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-overflow-item--disabled {
cursor: default;
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 10px;
flex-wrap: wrap;
}
[data-theme="sommet"] .rq-overflow-item--disabled:hover {
background: none;
}
[data-theme="sommet"] .rq-overflow-item--disabled > span {
font-size: 12px;
color: var(--fg-disabled);
}
[data-theme="sommet"] .rq-overflow-item--disabled > svg {
color: var(--fg-disabled);
}
[data-theme="sommet"] .rq-overflow-hint {
font-size: 10px;
color: var(--fg-tertiary);
width: 100%;
padding-left: 21px;
}
[data-theme="sommet"] .rq-overflow-sep {
height: 1px;
background: var(--edge-subtle);
margin: 4px 0;
}
/* ── Progress (mini composite) ── */
[data-theme="sommet"] .rq-progress-mini {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
[data-theme="sommet"] .rq-progress-label {
font-size: 10px;
color: var(--fg-tertiary);
white-space: nowrap;
line-height: 1;
display: flex;
align-items: center;
gap: 3px;
}
[data-theme="sommet"] .rq-progress-state {
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 3px;
}
[data-theme="sommet"] .rq-progress-state--draft {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-progress-state--open {
color: var(--accent);
}
[data-theme="sommet"] .rq-progress-state--closed {
color: var(--success);
}
[data-theme="sommet"] .rq-progress-state--cancelled {
color: var(--danger);
}
[data-theme="sommet"] .rq-progress-detail {
color: var(--fg-tertiary);
font-weight: 400;
}
[data-theme="sommet"] .rq-progress-flagged {
color: var(--warning);
font-weight: 500;
}
/* Action button (three-dot) */
[data-theme="sommet"] .rq-lt-actions {
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
}
[data-theme="sommet"] .rq-action-btn {
padding: 4px;
border-radius: 4px;
border: none;
background: none;
color: var(--fg-tertiary);
cursor: pointer;
transition: all 0.12s;
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .rq-action-btn:hover {
color: var(--fg);
background: var(--surface-hover);
}
/* Deadline cell */
[data-theme="sommet"] .rq-deadline-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
[data-theme="sommet"] .rq-deadline-hint {
font-size: 10px;
font-weight: 500;
line-height: 1;
}
[data-theme="sommet"] .rq-deadline-hint.ok {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-deadline-hint.warn {
color: var(--warning);
}
[data-theme="sommet"] .rq-deadline-hint.critical {
color: var(--danger);
animation: rq-pulse 2s ease-in-out infinite;
}
[data-theme="sommet"] .rq-deadline-hint.overdue {
color: var(--danger);
font-weight: 600;
}
/* ── Status severity dot (7px, per brand-book §14) ── */
[data-theme="sommet"] .rq-dot {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-dot--draft {
border: 1.5px dashed var(--fg-tertiary);
background: transparent;
}
[data-theme="sommet"] .rq-dot--open {
background: var(--accent);
}
[data-theme="sommet"] .rq-dot--closed {
background: var(--success);
}
[data-theme="sommet"] .rq-dot--cancelled {
background: var(--danger);
}
/* ── Progress mini-bar ── */
[data-theme="sommet"] .rq-progress {
height: 4px;
border-radius: 2px;
background: var(--edge-subtle);
overflow: hidden;
min-width: 48px;
}
[data-theme="sommet"] .rq-progress__fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s;
}
[data-theme="sommet"] .rq-progress--draft .rq-progress__fill {
background: var(--fg-disabled);
}
[data-theme="sommet"] .rq-progress--open .rq-progress__fill {
background: var(--accent);
}
[data-theme="sommet"] .rq-progress--closed .rq-progress__fill {
background: var(--success);
}
[data-theme="sommet"] .rq-progress--cancelled .rq-progress__fill {
background: var(--danger);
opacity: 0.4;
}
@keyframes rq-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
/* ── Agent activity dot ── */
[data-theme="sommet"] .rq-agent-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
animation: rq-agent-pulse 2.5s ease-in-out infinite;
}
@keyframes rq-agent-pulse {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
/* ── Pagination ── */
[data-theme="sommet"] .rq-pagination {
flex-shrink: 0;
padding: 8px 20px;
border-top: 1px solid var(--edge);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--fg-tertiary);
background: var(--surface);
}
[data-theme="sommet"] .rq-pagination__range {
font-weight: 500;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-pagination__right {
display: flex;
align-items: center;
gap: 20px;
}
[data-theme="sommet"] .rq-pagination__size {
display: flex;
align-items: center;
gap: 8px;
}
[data-theme="sommet"] .rq-pagination__size label {
white-space: nowrap;
color: var(--fg-tertiary);
font-size: 11px;
}
[data-theme="sommet"] .rq-pagination__nav {
display: flex;
align-items: center;
gap: 4px;
}
[data-theme="sommet"] .rq-pagination__page {
font-size: 11px;
color: var(--fg-tertiary);
padding: 0 4px;
}
[data-theme="sommet"] .rq-page-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 24px;
border-radius: 4px;
border: 1px solid var(--edge);
background: var(--surface);
color: var(--fg-secondary);
cursor: pointer;
transition: all 0.12s;
text-decoration: none;
}
[data-theme="sommet"] .rq-page-btn:hover {
border-color: var(--edge-strong);
color: var(--fg);
}
[data-theme="sommet"] .rq-page-btn--disabled {
color: var(--fg-disabled);
cursor: default;
border-color: var(--edge-subtle);
}
[data-theme="sommet"] .rq-page-btn--disabled:hover {
border-color: var(--edge-subtle);
color: var(--fg-disabled);
}
/* ── Null state (listing empty) ── */
[data-theme="sommet"] .rq-null {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 24px 60px;
text-align: center;
}
[data-theme="sommet"] .rq-null__title {
font-size: 14px;
font-weight: 600;
color: var(--fg-secondary);
margin-bottom: 4px;
}
[data-theme="sommet"] .rq-null__desc {
font-size: 11.5px;
color: var(--fg-tertiary);
line-height: 1.45;
max-width: 280px;
margin: 0 auto;
}
[data-theme="sommet"] .rq-null__cta {
color: var(--accent);
text-decoration: none;
font-weight: 500;
font-size: 11.5px;
display: inline-block;
margin-top: 10px;
}
[data-theme="sommet"] .rq-null__cta:hover {
text-decoration: underline;
}
/* ── Null illustration — stacked documents ── */
[data-theme="sommet"] .rq-null__illust {
position: relative;
width: 120px;
height: 140px;
margin-bottom: 20px;
animation: rq-float 4s ease-in-out infinite;
}
[data-theme="sommet"] .rq-null__sheet {
position: absolute;
border-radius: 8px;
border: 1.5px solid;
}
[data-theme="sommet"] .rq-null__sheet--back {
width: 100px;
height: 120px;
bottom: 0;
left: 10px;
background: var(--illust-sand, #f2e8da);
border-color: var(--illust-sand-deep, #e5d4bd);
}
[data-theme="sommet"] .rq-null__sheet--mid {
width: 100px;
height: 120px;
bottom: 8px;
left: 5px;
background: var(--surface);
border-color: var(--edge);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="sommet"] .rq-null__sheet--front {
width: 100px;
height: 120px;
bottom: 16px;
left: 0;
background: var(--surface);
border-color: var(--edge);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
[data-theme="sommet"] .rq-null__sheet--front::before {
content: "";
position: absolute;
top: 20px;
left: 14px;
right: 14px;
height: 6px;
background: var(--edge-subtle);
border-radius: 3px;
}
[data-theme="sommet"] .rq-null__sheet--front::after {
content: "";
position: absolute;
top: 34px;
left: 14px;
width: 50px;
height: 6px;
background: var(--edge-subtle);
border-radius: 3px;
}
@keyframes rq-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
/* ═══════════════════════════════════════════════════════════════════
Request detail components
═══════════════════════════════════════════════════════════════════ */
/* ── Detail page shell ── */
[data-theme="sommet"].rq-detail-page {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
[data-theme="sommet"] .rq-detail-split {
flex: 1;
min-height: 0;
display: flex;
}
[data-theme="sommet"] .rq-detail-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* ── Detail header ── */
[data-theme="sommet"] .rq-detail-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--edge-subtle);
flex-shrink: 0;
}
[data-theme="sommet"] .rq-detail-header__left {
min-width: 0;
flex: 1;
}
[data-theme="sommet"] .rq-detail-title {
font-size: 16px;
font-weight: 600;
color: var(--fg);
letter-spacing: -0.01em;
line-height: 1.3;
}
[data-theme="sommet"] .rq-detail-meta {
margin-top: 4px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
[data-theme="sommet"] .rq-detail-meta-text {
font-size: 12px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-detail-meta-sep {
font-size: 11px;
color: var(--fg-disabled);
}
/* ── Header progress bar row ── */
[data-theme="sommet"] .rq-detail-progress-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
[data-theme="sommet"] .rq-detail-progress-track {
width: 80px;
height: 5px;
border-radius: 3px;
flex-shrink: 0;
background: var(--edge);
overflow: hidden;
}
[data-theme="sommet"] .rq-detail-progress-fill {
height: 100%;
border-radius: 3px;
background: var(--accent);
}
[data-theme="sommet"] .rq-detail-progress-fill--draft {
background: var(--fg-disabled);
}
[data-theme="sommet"] .rq-detail-progress-fill--open {
background: var(--accent);
}
[data-theme="sommet"] .rq-detail-progress-fill--closed {
background: var(--success);
}
[data-theme="sommet"] .rq-detail-progress-fill--cancelled {
background: var(--danger);
opacity: 0.4;
}
[data-theme="sommet"] .rq-detail-state-indicator {
display: inline-flex;
align-items: center;
gap: 3px;
}
[data-theme="sommet"] .rq-detail-state-indicator svg {
flex-shrink: 0;
}
[data-theme="sommet"] .rq-detail-state-label {
font-size: 12px;
font-weight: 600;
}
[data-theme="sommet"] .rq-detail-state-indicator--draft {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-detail-state-indicator--open {
color: var(--accent);
}
[data-theme="sommet"] .rq-detail-state-indicator--closed {
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-detail-state-indicator--cancelled {
color: var(--danger);
}
[data-theme="sommet"] .rq-detail-progress-text {
font-size: 12px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-detail-progress-text--reviewing {
color: var(--warning);
}
/* ── Detail action buttons ── */
[data-theme="sommet"] .rq-detail-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: 16px;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-detail-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
font-family: inherit;
font-size: 12px;
font-weight: 500;
color: var(--fg-secondary);
cursor: pointer;
transition: all 0.12s;
text-decoration: none;
white-space: nowrap;
}
[data-theme="sommet"] .rq-detail-btn:hover {
background: var(--surface-hover);
border-color: var(--edge-strong);
}
[data-theme="sommet"] .rq-detail-btn svg {
flex-shrink: 0;
}
[data-theme="sommet"] .rq-detail-btn--primary {
background: var(--accent);
border-color: var(--accent);
color: var(--fg-inverse);
}
[data-theme="sommet"] .rq-detail-btn--primary:hover {
opacity: 0.9;
background: var(--accent);
border-color: var(--accent);
}
/* ── Lifecycle stepper ── */
[data-theme="sommet"] .rq-detail-lifecycle {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
}
[data-theme="sommet"] .rq-lifecycle-step {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
border: 1px solid;
white-space: nowrap;
}
[data-theme="sommet"] .rq-lifecycle-step--done {
background: var(--success-subtle, rgba(48, 164, 108, 0.08));
color: var(--success);
border-color: var(--success-subtle, rgba(48, 164, 108, 0.15));
}
[data-theme="sommet"] .rq-lifecycle-step--active {
background: var(--surface-inverse);
color: var(--fg-inverse);
border-color: var(--surface-inverse);
}
[data-theme="sommet"] .rq-lifecycle-step--pending {
border-color: var(--edge);
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-lifecycle-step--cancelled {
background: var(--danger-subtle, rgba(229, 72, 77, 0.08));
color: var(--danger);
border-color: var(--danger-subtle, rgba(229, 72, 77, 0.15));
}
[data-theme="sommet"] .rq-lifecycle-arrow {
font-size: 10px;
color: var(--fg-disabled);
padding: 0 4px;
}
/* ── Detail tabs — reuses shared .detail-tab-bar / .detail-tab / .detail-tab-badge ── */
[data-theme="sommet"] .rq-detail-tabs {
padding: 0 20px;
flex-shrink: 0;
}
/* ── Detail body (tab content area) ── */
[data-theme="sommet"] .rq-detail-body {
flex: 1;
min-height: 0;
display: flex;
overflow: hidden;
}
/* ── Detail loading spinner ── */
[data-theme="sommet"] .rq-detail-loading {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-tertiary);
gap: 8px;
}
[data-theme="sommet"] .rq-detail-loading span {
font-size: 13px;
}
[data-theme="sommet"] .rq-spinner {
animation: rq-spin 1s linear infinite;
}
@keyframes rq-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ── Modal ── */
[data-theme="sommet"] .rq-modal-overlay {
position: fixed;
inset: 0;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .rq-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
}
[data-theme="sommet"] .rq-modal-panel {
position: relative;
width: 100%;
max-width: 448px;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
}
[data-theme="sommet"] .rq-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-modal-header > div {
min-width: 0;
}
[data-theme="sommet"] .rq-modal-title {
font-size: 14px;
font-weight: 500;
color: var(--fg);
line-height: 1.3;
}
[data-theme="sommet"] .rq-modal-subtitle {
font-size: 12px;
color: var(--fg-tertiary);
margin-top: 4px;
font-size: 14px;
font-weight: 500;
color: var(--fg);
line-height: 1.3;
margin: 0;
}
[data-theme="sommet"] .rq-modal-subtitle {
font-size: 12px;
color: var(--fg-tertiary);
margin: 4px 0 0;
}
[data-theme="sommet"] .rq-modal-close {
color: var(--fg-tertiary);
background: none;
border: none;
cursor: pointer;
flex-shrink: 0;
margin-left: 12px;
transition: color 0.12s;
}
[data-theme="sommet"] .rq-modal-close:hover {
color: var(--fg);
}
[data-theme="sommet"] .rq-modal-body {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
[data-theme="sommet"] .rq-modal-callout {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
border-radius: 6px;
border: 1px solid;
}
[data-theme="sommet"] .rq-modal-callout svg {
flex-shrink: 0;
margin-top: 2px;
}
[data-theme="sommet"] .rq-modal-callout p {
font-size: 12px;
color: var(--fg-secondary);
line-height: 1.5;
font-size: 12px;
color: var(--fg-secondary);
line-height: 1.5;
margin: 0;
}
[data-theme="sommet"] .rq-modal-callout--danger {
background: var(--danger-subtle, rgba(229, 72, 77, 0.06));
border-color: var(--danger-subtle, rgba(229, 72, 77, 0.15));
}
[data-theme="sommet"] .rq-modal-callout--danger svg {
color: var(--danger);
}
[data-theme="sommet"] .rq-modal-callout--danger .rq-modal-emphasis {
font-weight: 500;
color: var(--danger);
}
[data-theme="sommet"] .rq-modal-callout--neutral {
background: var(--surface-tint);
border-color: var(--edge-subtle);
}
[data-theme="sommet"] .rq-modal-callout--neutral svg {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-modal-callout--neutral .rq-modal-highlight {
font-weight: 500;
color: var(--fg);
}
[data-theme="sommet"] .rq-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 16px 20px;
border-top: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-modal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 16px;
height: 36px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .rq-modal-btn--secondary {
border: 1px solid var(--edge);
background: var(--surface);
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-modal-btn--secondary:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-modal-btn--primary {
border: none;
background: var(--surface-inverse);
color: var(--fg-inverse);
}
[data-theme="sommet"] .rq-modal-btn--primary:hover {
opacity: 0.9;
}
/* ── Sidebar card sections spacing ── */
[data-theme="sommet"] .sb-aside .sb-linked + .sb-section-label {
margin-top: 8px;
}
/* ── Warning modifier for linked cards ── */
[data-theme="sommet"] .rq-sb-card--warning {
border-color: var(--warning-subtle, rgba(231, 157, 19, 0.35));
background: var(--warning-subtle, rgba(231, 157, 19, 0.04));
}
[data-theme="sommet"] .rq-sb-card--warning svg:first-child {
color: var(--warning);
}
/* ═══════════════════════════════════════════════════════════════════
Participants tab — reuses rq-lt-*, rq-state-badge-*, rq-filter-btn
═══════════════════════════════════════════════════════════════════ */
[data-theme="sommet"] .rq-participants {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
overflow: hidden;
height: 100%;
}
[data-theme="sommet"] .rq-p-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
gap: 8px;
}
[data-theme="sommet"] .rq-p-filters {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
[data-theme="sommet"] .rq-p-export-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--fg-secondary);
text-decoration: none;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--edge);
transition: all 0.12s;
}
[data-theme="sommet"] .rq-p-export-btn:hover {
background: var(--surface-hover);
}
/* Table inside participants tab — no tinted header bg, tighter padding */
[data-theme="sommet"] .rq-participants .rq-lt-header {
background: transparent;
padding: 6px 16px;
}
[data-theme="sommet"] .rq-participants .rq-lt-row {
padding: 8px 16px;
}
[data-theme="sommet"] .rq-p-identity {
display: flex;
align-items: center;
gap: 8px;
}
[data-theme="sommet"] .rq-p-completeness {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
}
[data-theme="sommet"] .rq-p-completeness .rq-progress {
width: 60px;
}
[data-theme="sommet"] .rq-p-rows {
overflow-y: auto;
flex: 1;
}
[data-theme="sommet"] .rq-p-empty {
padding: 32px;
text-align: center;
color: var(--fg-tertiary);
font-size: 13px;
}
/* ═══════════════════════════════════════════════════════════════════
Participant detail — response viewer, reuses rq-detail-*, sb-*
═══════════════════════════════════════════════════════════════════ */
[data-theme="sommet"] .rq-detail-btn--warning {
color: var(--warning-fg, var(--warning));
border-color: var(--warning-border, var(--warning));
}
[data-theme="sommet"] .rq-detail-btn--warning:hover {
background: var(--warning-subtle);
}
[data-theme="sommet"] .rq-detail-btn--danger {
color: var(--danger-fg, var(--danger));
border-color: var(--danger-border, var(--danger));
}
[data-theme="sommet"] .rq-detail-btn--danger:hover {
background: var(--danger-subtle);
}
/* Response data renderer */
[data-theme="sommet"] .rq-resp-scroll {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
[data-theme="sommet"] .rq-resp-section {
margin-bottom: 20px;
}
[data-theme="sommet"] .rq-resp-section-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
margin-bottom: 8px;
}
[data-theme="sommet"] .rq-resp-section-label--toggle {
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
padding: 0;
font-family: inherit;
}
[data-theme="sommet"] .rq-resp-chevron {
transition: transform 0.15s;
}
/* Group accordion (participant response detail) */
[data-theme="sommet"] .rq-resp-groups {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
[data-theme="sommet"] .rq-resp-group {
border: 1px solid var(--edge);
border-radius: 6px;
overflow: hidden;
}
[data-theme="sommet"] .rq-resp-group-header {
display: flex;
align-items: center;
width: 100%;
padding: 11px 14px;
background: var(--surface-tint);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
[data-theme="sommet"] .rq-resp-group-header:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-resp-group-header .rq-pivot-group-label {
flex: 1;
font-weight: 600;
font-size: 13px;
color: var(--fg);
}
[data-theme="sommet"] .rq-resp-group.expanded .rq-pivot-chevron {
transform: rotate(90deg);
}
[data-theme="sommet"] .rq-resp-group-count {
font-size: 11px;
color: var(--fg-tertiary);
font-weight: 400;
}
[data-theme="sommet"] .rq-resp-group-body {
border-top: 1px solid var(--edge);
}
[data-theme="sommet"] .rq-resp-group-body .rq-matrix-table {
margin: 0;
}
[data-theme="sommet"] .rq-resp-group-body .rq-matrix-table td {
padding: 8px 14px;
}
/* Document checklist (participant response detail) */
[data-theme="sommet"] .rq-checklist {
display: flex;
flex-direction: column;
gap: 1px;
margin-bottom: 16px;
}
[data-theme="sommet"] .rq-checklist-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-checklist-row:last-child {
border-bottom: none;
}
[data-theme="sommet"] .rq-checklist-icon {
flex-shrink: 0;
display: flex;
}
[data-theme="sommet"] .rq-checklist-info {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .rq-checklist-name {
font-size: 13px;
font-weight: 500;
color: var(--fg);
}
[data-theme="sommet"] .rq-checklist-category {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: 1px;
}
[data-theme="sommet"] .rq-checklist-status {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 2px 7px;
border-radius: 4px;
white-space: nowrap;
}
[data-theme="sommet"] .rq-checklist-status--completed {
background: var(--success-subtle, rgba(48, 164, 108, 0.08));
color: var(--success);
}
[data-theme="sommet"] .rq-checklist-status--pending {
background: var(--warning-subtle, rgba(245, 166, 35, 0.08));
color: var(--warning);
}
[data-theme="sommet"] .rq-checklist-status--cancelled {
background: var(--surface-secondary);
color: var(--fg-disabled);
}
/* Response matrix table (matches proto rq-matrix-table) */
[data-theme="sommet"] .rq-matrix-wrap {
border: 1px solid var(--edge);
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
[data-theme="sommet"] .rq-resp-section-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
margin-bottom: 8px;
}
[data-theme="sommet"] .rq-resp-section-label--toggle {
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
padding: 0;
font-family: inherit;
}
[data-theme="sommet"] .rq-resp-chevron {
transition: transform 0.15s;
}
/* Response matrix table (matches proto rq-matrix-table) */
[data-theme="sommet"] .rq-matrix-wrap {
border: 1px solid var(--edge);
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
[data-theme="sommet"] .rq-matrix-table {
width: 100%;
border-collapse: collapse;
font-size: 10px;
}
[data-theme="sommet"] .rq-matrix-table th {
padding: 8px 10px;
text-align: left;
font-weight: 600;
color: var(--fg-disabled);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--edge);
font-size: 10px;
white-space: nowrap;
}
[data-theme="sommet"] .rq-matrix-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--edge-subtle);
font-size: 11.5px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-matrix-table tbody tr:last-child td {
border-bottom: none;
}
[data-theme="sommet"] .rq-matrix-table tr:hover td {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-matrix-table th:last-child,
[data-theme="sommet"] .rq-matrix-table td:last-child {
text-align: right;
}
[data-theme="sommet"] .rq-matrix-table tfoot td {
font-weight: 600;
color: var(--fg);
border-top: 1px solid var(--edge);
border-bottom: none;
}
[data-theme="sommet"] .rq-matrix-label {
font-size: 10px;
color: var(--fg-tertiary);
background: var(--surface-tint);
}
[data-theme="sommet"] .rq-matrix-expandable {
cursor: pointer;
}
[data-theme="sommet"] .rq-matrix-expandable:hover td {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-matrix-expand-trigger {
display: flex;
align-items: center;
gap: 4px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-matrix-expand-row td {
padding: 8px 14px 12px;
background: var(--surface-tint);
}
[data-theme="sommet"] .rq-matrix-expand-row .rq-matrix-wrap {
margin-top: 4px;
}
[data-theme="sommet"] .rq-matrix-expand-row .rq-resp-section-label {
margin-top: 8px;
}
[data-theme="sommet"] .rq-resp-required {
color: var(--danger);
margin-left: 2px;
}
[data-theme="sommet"] .rq-resp-unit {
color: var(--fg-disabled);
}
[data-theme="sommet"] .rq-resp-mono {
font-family: var(--font-mono, monospace);
}
[data-theme="sommet"] .rq-resp-text {
font-weight: 500;
}
[data-theme="sommet"] .rq-resp-bool-yes {
color: var(--success);
font-weight: 500;
}
[data-theme="sommet"] .rq-resp-empty {
color: var(--fg-disabled);
font-style: italic;
}
[data-theme="sommet"] .rq-resp-empty-block {
border: 1px solid var(--edge-subtle);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
color: var(--fg-disabled);
font-style: italic;
}
[data-theme="sommet"] .rq-resp-raw {
border: 1px solid var(--edge-subtle);
border-radius: 6px;
overflow: hidden;
}
[data-theme="sommet"] .rq-resp-raw pre {
padding: 10px;
font-size: 10px;
font-family: var(--font-mono, monospace);
color: var(--fg-secondary);
background: var(--surface-tint);
overflow-x: auto;
line-height: 1.6;
margin: 0;
}
[data-theme="sommet"] .rq-resp-sop-card {
border: 1px solid var(--edge);
border-radius: 6px;
background: var(--surface);
padding: 16px;
}
[data-theme="sommet"] .rq-resp-sop-card--spaced {
margin-bottom: 8px;
}
/* Layout: results split into main + sidebar */
[data-theme="sommet"] .rq-results {
display: flex;
flex: 1;
min-width: 0;
overflow: hidden;
height: 100%;
}
[data-theme="sommet"] .rq-results-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
[data-theme="sommet"] .rq-results-content {
flex: 1;
overflow: auto;
padding: 0 20px 20px;
}
/* Results toolbar (filter chips + search + export) */
[data-theme="sommet"] .rq-results-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--edge-subtle);
flex-shrink: 0;
}
[data-theme="sommet"] .rq-results-toolbar-left {
display: flex;
align-items: center;
gap: 4px;
}
[data-theme="sommet"] .rq-results-toolbar-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
/* Filter chip (pill) — reuses rq-filter-btn base; adding pill variant */
[data-theme="sommet"] .rq-chip {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
border: 1px solid var(--edge);
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
color: var(--fg-secondary);
background: var(--surface);
cursor: pointer;
transition:
border-color 0.12s,
background 0.12s,
color 0.12s;
white-space: nowrap;
}
[data-theme="sommet"] .rq-chip:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-chip.active {
background: var(--accent-subtle, rgba(99, 102, 241, 0.08));
color: var(--accent);
border-color: var(--accent);
}
[data-theme="sommet"] .rq-chip svg {
flex-shrink: 0;
}
[data-theme="sommet"] .rq-chip-count {
font-size: 10px;
font-weight: 600;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-chip.active .rq-chip-count {
color: var(--accent);
}
/* Search — pill variant for results toolbar */
[data-theme="sommet"] .rq-results-search {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--edge);
border-radius: 999px;
padding: 4px 12px;
background: var(--surface);
transition: border-color 0.12s;
}
[data-theme="sommet"] .rq-results-search:focus-within {
border-color: var(--accent);
}
[data-theme="sommet"] .rq-results-search svg {
color: var(--fg-tertiary);
flex-shrink: 0;
}
[data-theme="sommet"] .rq-results-search input {
width: 192px;
font-size: 11px;
background: transparent;
border: none;
outline: none;
color: var(--fg);
font-family: inherit;
}
[data-theme="sommet"] .rq-results-search input::-moz-placeholder {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-results-search input::placeholder {
color: var(--fg-tertiary);
}
/* Loading indicator */
[data-theme="sommet"] .rq-results-loading {
font-size: 10px;
color: var(--fg-tertiary);
}
/* Export button */
[data-theme="sommet"] .rq-results-export {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
border: 1px solid var(--edge);
color: var(--fg-secondary);
background: var(--surface);
text-decoration: none;
transition:
border-color 0.12s,
color 0.12s;
}
[data-theme="sommet"] .rq-results-export:hover {
border-color: var(--edge-strong);
color: var(--fg);
}
/* Decision finalized banner */
[data-theme="sommet"] .rq-decision {
border: 1px solid var(--success);
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}
[data-theme="sommet"] .rq-decision-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--success-subtle);
border-bottom: 1px solid var(--success);
}
[data-theme="sommet"] .rq-decision-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--success);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--surface);
}
[data-theme="sommet"] .rq-decision-icon svg {
width: 12px;
height: 12px;
}
[data-theme="sommet"] .rq-decision-title {
font-size: 12px;
font-weight: 600;
color: var(--success);
}
[data-theme="sommet"] .rq-decision-sub {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: 2px;
}
[data-theme="sommet"] .rq-decision-winner {
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
background: var(--success-subtle);
color: var(--success);
}
[data-theme="sommet"] .rq-decision-body {
padding: 12px 16px;
}
[data-theme="sommet"] .rq-decision-name {
font-size: 12px;
font-weight: 500;
color: var(--fg);
margin-bottom: 6px;
}
[data-theme="sommet"] .rq-decision-detail {
font-size: 11px;
color: var(--fg-secondary);
line-height: 1.5;
}
[data-theme="sommet"] .rq-decision-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
[data-theme="sommet"] .rq-decision-chip {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
background: var(--success-subtle);
border: 1px solid var(--success);
color: var(--success);
}
[data-theme="sommet"] .rq-decision-tally {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding-top: 12px;
border-top: 1px solid var(--edge-subtle);
margin-top: 12px;
font-size: 11px;
}
[data-theme="sommet"] .rq-decision-tally-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-decision-tally-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-decision-tally-dot--accepted {
background: var(--success);
}
[data-theme="sommet"] .rq-decision-tally-dot--rejected {
background: var(--danger);
}
[data-theme="sommet"] .rq-decision-tally-dot--declined {
background: var(--edge-strong);
}
/* Agent recommendation panel */
[data-theme="sommet"] .rq-recommend {
border: 1px solid var(--edge);
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}
[data-theme="sommet"] .rq-recommend-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--surface-tint);
border-bottom: 1px solid var(--edge);
}
[data-theme="sommet"] .rq-recommend-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-deep, var(--accent));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-recommend-dot-inner {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--surface);
opacity: 0.9;
}
[data-theme="sommet"] .rq-recommend-title {
font-size: 12px;
font-weight: 600;
color: var(--fg);
}
[data-theme="sommet"] .rq-recommend-sub {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: 2px;
}
[data-theme="sommet"] .rq-recommend-winner {
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
background: var(--success-subtle);
color: var(--success);
}
[data-theme="sommet"] .rq-recommend-winner-label {
font-size: 11px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-recommend-checkpoint {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--warning-subtle);
border-bottom: 1px solid var(--warning);
}
[data-theme="sommet"] .rq-recommend-checkpoint svg {
color: var(--warning);
flex-shrink: 0;
}
[data-theme="sommet"] .rq-recommend-checkpoint-text {
font-size: 11px;
font-weight: 500;
color: var(--warning);
}
[data-theme="sommet"] .rq-recommend-body {
padding: 12px 16px;
display: flex;
gap: 12px;
}
[data-theme="sommet"] .rq-recommend-main {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .rq-recommend-name {
font-size: 12px;
font-weight: 500;
color: var(--fg);
margin-bottom: 6px;
}
[data-theme="sommet"] .rq-recommend-detail {
font-size: 11px;
color: var(--fg-secondary);
line-height: 1.5;
}
[data-theme="sommet"] .rq-recommend-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
[data-theme="sommet"] .rq-recommend-chip {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
background: var(--success-subtle);
border: 1px solid var(--success);
color: var(--success);
}
[data-theme="sommet"] .rq-recommend-planb {
width: 192px;
flex-shrink: 0;
border-left: 1px solid var(--edge-subtle);
padding-left: 12px;
}
[data-theme="sommet"] .rq-recommend-planb-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
margin-bottom: 6px;
}
[data-theme="sommet"] .rq-recommend-planb-name {
font-size: 12px;
font-weight: 500;
color: var(--fg);
margin-bottom: 4px;
}
[data-theme="sommet"] .rq-recommend-planb-detail {
font-size: 11px;
color: var(--fg-secondary);
line-height: 1.5;
}
[data-theme="sommet"] .rq-recommend-planb-chip {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
margin-top: 6px;
background: var(--accent-subtle, rgba(99, 102, 241, 0.08));
border: 1px solid var(--accent);
color: var(--accent);
}
[data-theme="sommet"] .rq-recommend-actions {
display: flex;
align-items: center;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--edge-subtle);
margin-top: 12px;
}
[data-theme="sommet"] .rq-recommend-accept {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
border-radius: 6px;
border: 1px solid var(--success);
background: var(--success-subtle);
color: var(--success);
cursor: pointer;
transition: background 0.12s;
}
[data-theme="sommet"] .rq-recommend-accept:hover {
background: var(--surface-hover);
}
/* Disclosure toggle for closed-request comparison details */
[data-theme="sommet"] .rq-disclosure-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 500;
color: var(--fg-secondary);
background: none;
border: none;
cursor: pointer;
padding: 0;
font-family: inherit;
transition: color 0.12s;
}
[data-theme="sommet"] .rq-disclosure-toggle:hover {
color: var(--fg);
}
[data-theme="sommet"] .rq-disclosure-toggle svg {
transition: transform 0.15s;
}
/* Comparison settings panel */
[data-theme="sommet"] .rq-comp {
border: 1px solid var(--edge);
border-radius: 8px;
border-left: 2px solid var(--accent-subtle, rgba(99, 102, 241, 0.3));
overflow: hidden;
margin-bottom: 16px;
}
[data-theme="sommet"] .rq-comp-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--surface-tint);
}
[data-theme="sommet"] .rq-comp-header svg {
color: var(--fg-tertiary);
flex-shrink: 0;
}
[data-theme="sommet"] .rq-comp-header-text {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .rq-comp-title {
font-size: 12px;
font-weight: 600;
color: var(--fg);
}
[data-theme="sommet"] .rq-comp-summary {
font-size: 11px;
color: var(--fg-tertiary);
margin-left: 8px;
}
[data-theme="sommet"] .rq-comp-save {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
min-width: 56px;
justify-content: flex-end;
}
[data-theme="sommet"] .rq-comp-save--saving {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-comp-save--saved {
color: var(--success);
}
[data-theme="sommet"] .rq-comp-edit-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
border-radius: 6px;
border: 1px solid var(--edge);
color: var(--fg-secondary);
background: var(--surface);
cursor: pointer;
font-family: inherit;
transition:
border-color 0.12s,
background 0.12s;
}
[data-theme="sommet"] .rq-comp-edit-btn:hover {
background: var(--surface-hover);
border-color: var(--edge-strong);
}
[data-theme="sommet"] .rq-comp-body {
padding: 12px 16px 16px;
}
[data-theme="sommet"] .rq-comp-grid {
display: grid;
gap: 0 12px;
align-items: center;
}
[data-theme="sommet"] .rq-comp-grid--edit {
grid-template-columns: 1fr 44px 80px 240px;
}
[data-theme="sommet"] .rq-comp-grid--readonly {
grid-template-columns: 1fr 60px 1fr;
}
[data-theme="sommet"] .rq-comp-grid-head {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
padding: 0 4px 6px;
border-bottom: 1px solid var(--edge-subtle);
margin-bottom: 2px;
}
[data-theme="sommet"] .rq-comp-grid-head--center {
text-align: center;
}
[data-theme="sommet"] .rq-comp-row {
display: contents;
}
[data-theme="sommet"] .rq-comp-row > * {
padding: 8px 4px;
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-comp-row:last-child > * {
border-bottom: none;
}
[data-theme="sommet"] .rq-comp-row--dim > * {
opacity: 0.6;
}
[data-theme="sommet"] .rq-comp-field-name {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
[data-theme="sommet"] .rq-comp-field-label {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .rq-comp-field-label--active {
color: var(--fg);
font-weight: 500;
}
[data-theme="sommet"] .rq-comp-field-label--inactive {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-comp-auto-badge {
display: inline-flex;
align-items: center;
padding: 0 4px;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
background: var(--accent-subtle, rgba(99, 102, 241, 0.08));
color: var(--accent);
border: 1px solid var(--accent);
}
[data-theme="sommet"] .rq-comp-type-badge {
display: inline-flex;
align-items: center;
padding: 0 4px;
border-radius: 4px;
font-size: 9px;
color: var(--fg-disabled);
border: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-comp-check {
display: flex;
justify-content: center;
}
[data-theme="sommet"] .rq-comp-check input[type="checkbox"] {
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid var(--edge-strong);
cursor: pointer;
accent-color: var(--accent);
}
[data-theme="sommet"] .rq-comp-weight {
display: flex;
justify-content: center;
}
[data-theme="sommet"] .rq-comp-weight input {
width: 56px;
font-size: 12px;
font-family: var(--font-mono, monospace);
text-align: center;
border-radius: 6px;
border: 1px solid var(--edge);
padding: 4px 6px;
background: var(--surface);
color: var(--fg);
font-family: inherit;
transition: border-color 0.12s;
}
[data-theme="sommet"] .rq-comp-weight input:focus {
border-color: var(--accent);
outline: none;
}
[data-theme="sommet"] .rq-comp-objective {
display: inline-flex;
border-radius: 6px;
border: 1px solid var(--edge);
overflow: hidden;
font-size: 11px;
white-space: nowrap;
}
[data-theme="sommet"] .rq-comp-obj-btn {
padding: 4px 10px;
display: flex;
align-items: center;
gap: 4px;
background: var(--surface);
color: var(--fg-secondary);
border: none;
cursor: pointer;
font-family: inherit;
font-size: 11px;
transition:
background 0.12s,
color 0.12s;
}
[data-theme="sommet"] .rq-comp-obj-btn:not(:last-child) {
border-right: 1px solid var(--edge);
}
[data-theme="sommet"] .rq-comp-obj-btn:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-comp-obj-btn.active {
background: var(--surface-selected, var(--surface-hover));
color: var(--fg);
font-weight: 500;
}
[data-theme="sommet"] .rq-comp-hint {
display: flex;
align-items: flex-start;
gap: 6px;
padding-top: 10px;
margin-top: 4px;
}
[data-theme="sommet"] .rq-comp-hint svg {
color: var(--fg-tertiary);
flex-shrink: 0;
margin-top: 2px;
}
[data-theme="sommet"] .rq-comp-hint-text {
font-size: 11px;
color: var(--fg-tertiary);
line-height: 1.5;
}
[data-theme="sommet"] .rq-comp-empty {
padding: 12px 16px;
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-comp-empty svg {
flex-shrink: 0;
}
[data-theme="sommet"] .rq-comp-placeholder {
font-size: 11px;
color: var(--fg-disabled);
}
/* Comparison matrix — sticky header table */
[data-theme="sommet"] .rq-cmp-table-wrap {
border: 1px solid var(--edge);
border-radius: 8px;
overflow: hidden;
}
[data-theme="sommet"] .rq-cmp-table {
border-spacing: 0;
min-width: -moz-max-content;
min-width: max-content;
width: 100%;
font-size: 12px;
border-collapse: collapse;
}
[data-theme="sommet"] .rq-cmp-th {
position: sticky;
top: 0;
z-index: 20;
padding: 8px 12px;
text-align: left;
font-size: 11px;
font-weight: 600;
color: var(--fg-tertiary);
background: var(--surface-tint);
border-bottom: 1px solid var(--edge);
white-space: nowrap;
}
[data-theme="sommet"] .rq-cmp-th--participant {
position: sticky;
left: 0;
z-index: 30;
min-width: 180px;
border-right: 1px solid var(--edge);
}
[data-theme="sommet"] .rq-cmp-th-sub {
display: block;
font-size: 10px;
color: var(--fg-tertiary);
font-weight: 400;
margin-top: 2px;
}
[data-theme="sommet"] .rq-cmp-td {
padding: 8px 12px;
white-space: nowrap;
}
[data-theme="sommet"] .rq-cmp-td--participant {
position: sticky;
left: 0;
min-width: 180px;
border-right: 1px solid var(--edge);
cursor: pointer;
}
[data-theme="sommet"] .rq-cmp-td--participant:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-cmp-name {
font-size: 12px;
font-weight: 500;
color: var(--fg);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
[data-theme="sommet"] .rq-cmp-name:hover span:first-child {
text-decoration: underline;
}
[data-theme="sommet"] .rq-cmp-origin {
font-size: 10px;
color: var(--fg-tertiary);
margin-top: 2px;
}
[data-theme="sommet"] .rq-cmp-rank {
font-size: 10px;
color: var(--fg-tertiary);
margin-top: 2px;
}
[data-theme="sommet"] .rq-cmp-rank-badge {
display: inline-flex;
align-items: center;
padding: 0 4px;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
margin-right: 4px;
}
[data-theme="sommet"] .rq-cmp-rank-badge--recommended {
background: var(--success);
color: var(--surface);
}
[data-theme="sommet"] .rq-cmp-rank-badge--planb {
background: var(--accent-subtle, rgba(99, 102, 241, 0.08));
border: 1px solid var(--accent);
color: var(--accent);
}
[data-theme="sommet"] .rq-cmp-flagged-badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
background: var(--danger-subtle);
color: var(--danger);
}
[data-theme="sommet"] .rq-cmp-cell-val {
font-size: 12px;
font-weight: 500;
color: var(--fg);
display: flex;
align-items: center;
gap: 6px;
}
[data-theme="sommet"] .rq-cmp-cell-rank {
font-size: 10px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-cmp-cell-empty {
color: var(--fg-disabled);
font-size: 11px;
}
[data-theme="sommet"] .rq-cmp-score {
font-size: 12px;
font-family: var(--font-mono, monospace);
color: var(--fg);
}
[data-theme="sommet"] .rq-cmp-select-btn {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
border-radius: 6px;
border: 1px solid var(--edge-strong);
color: var(--fg-secondary);
background: var(--surface);
cursor: pointer;
font-family: inherit;
transition: background 0.12s;
}
[data-theme="sommet"] .rq-cmp-select-btn:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-cmp-select-btn--selected {
border-color: var(--success);
background: var(--success-subtle);
color: var(--success);
}
[data-theme="sommet"] .rq-cmp-status-badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
}
[data-theme="sommet"] .rq-cmp-doc-badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
}
[data-theme="sommet"] .rq-cmp-doc-badge--complete {
background: var(--success-subtle);
color: var(--success);
}
[data-theme="sommet"] .rq-cmp-doc-badge--missing {
background: var(--warning-subtle);
color: var(--warning);
}
[data-theme="sommet"] .rq-cmp-footnote {
margin-top: 8px;
font-size: 11px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-cmp-empty-msg {
border: 1px solid var(--edge);
border-radius: 8px;
padding: 24px;
text-align: center;
font-size: 13px;
color: var(--fg-secondary);
}
/* Row tint variants */
[data-theme="sommet"] .rq-cmp-row--flagged {
background: var(--danger-subtle);
}
[data-theme="sommet"] .rq-cmp-row--positive {
background: var(--success-subtle);
}
[data-theme="sommet"] .rq-cmp-td--participant.rq-cmp-row--flagged {
background: var(--danger-subtle);
}
[data-theme="sommet"] .rq-cmp-td--participant.rq-cmp-row--positive {
background: var(--success-subtle);
}
[data-theme="sommet"] .rq-cmp-td--participant.rq-cmp-row--default {
background: var(--surface);
}
/* Load more sentinel */
[data-theme="sommet"] .rq-cmp-load-more {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 11px;
font-weight: 500;
border-radius: 6px;
border: 1px solid var(--edge);
color: var(--fg-secondary);
background: var(--surface);
cursor: pointer;
font-family: inherit;
transition:
border-color 0.12s,
color 0.12s;
}
[data-theme="sommet"] .rq-cmp-load-more:hover {
border-color: var(--edge-strong);
color: var(--fg);
}
[data-theme="sommet"] .rq-cmp-load-more-hint {
color: var(--fg-tertiary);
}
/* Results sidebar */
[data-theme="sommet"] .rq-results-sidebar {
width: 240px;
flex-shrink: 0;
border-left: 1px solid var(--edge-subtle);
display: flex;
flex-direction: column;
overflow: hidden;
}
[data-theme="sommet"] .rq-side-tabs {
display: flex;
border-bottom: 1px solid var(--edge-subtle);
flex-shrink: 0;
}
[data-theme="sommet"] .rq-side-tab {
flex: 1;
padding: 8px 12px;
font-size: 11px;
font-weight: 500;
text-align: center;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
color: var(--fg-secondary);
background: none;
border-top: none;
border-left: none;
border-right: none;
cursor: pointer;
font-family: inherit;
transition: color 0.12s;
}
[data-theme="sommet"] .rq-side-tab:hover {
color: var(--fg);
}
[data-theme="sommet"] .rq-side-tab.active {
color: var(--fg);
border-bottom-color: var(--fg);
}
[data-theme="sommet"] .rq-side-panel {
flex: 1;
overflow-y: auto;
padding: 12px 14px;
}
[data-theme="sommet"] .rq-side-section {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
margin-bottom: 8px;
}
[data-theme="sommet"] .rq-side-divider {
height: 1px;
background: var(--edge-subtle);
margin: 10px 0;
}
[data-theme="sommet"] .rq-side-progress-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
[data-theme="sommet"] .rq-side-progress-track {
width: 80px;
height: 4px;
background: var(--edge);
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-side-progress-fill {
height: 100%;
border-radius: 2px;
background: var(--success);
}
[data-theme="sommet"] .rq-side-progress-label {
font-size: 11px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-side-stat {
font-size: 11px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-side-prop-row {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 4px 0;
font-size: 11px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-side-prop-label {
color: var(--fg-tertiary);
min-width: 72px;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-side-flag-row {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
}
[data-theme="sommet"] .rq-side-flag-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--danger);
flex-shrink: 0;
}
[data-theme="sommet"] .rq-side-flag-name {
font-size: 11px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-side-empty {
font-size: 11px;
color: var(--fg-disabled);
}
[data-theme="sommet"] .rq-side-mono {
font-family: var(--font-mono, monospace);
}
/* Sidebar chat shell */
[data-theme="sommet"] .rq-side-chat {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 12px 14px;
}
[data-theme="sommet"] .rq-side-chat-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--fg-tertiary);
text-align: center;
line-height: 1.5;
}
[data-theme="sommet"] .rq-side-chat-empty span {
color: var(--fg-disabled);
}
[data-theme="sommet"] .rq-side-chat-input {
border-top: 1px solid var(--edge-subtle);
padding-top: 8px;
margin-top: 8px;
}
[data-theme="sommet"] .rq-side-chat-bar {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--edge-strong);
border-radius: 6px;
padding: 6px 8px;
background: var(--surface);
}
[data-theme="sommet"] .rq-side-chat-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent-deep, var(--accent));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-side-chat-dot-inner {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--surface);
opacity: 0.9;
}
[data-theme="sommet"] .rq-side-chat-input input {
flex: 1;
font-size: 11px;
background: transparent;
border: none;
outline: none;
color: var(--fg);
font-family: inherit;
}
[data-theme="sommet"] .rq-side-chat-input input::-moz-placeholder {
color: var(--fg-disabled);
}
[data-theme="sommet"] .rq-side-chat-input input::placeholder {
color: var(--fg-disabled);
}
[data-theme="sommet"] .rq-side-chat-input input:disabled {
cursor: not-allowed;
}
/* Accept-all mode */
[data-theme="sommet"] .rq-accept-card {
background: var(--surface);
border-radius: 12px;
border: 1px solid var(--edge);
overflow: hidden;
}
[data-theme="sommet"] .rq-accept-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
border-bottom: 1px solid var(--edge);
}
[data-theme="sommet"] .rq-accept-header-left {
display: flex;
align-items: center;
gap: 8px;
}
[data-theme="sommet"] .rq-accept-header-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
[data-theme="sommet"] .rq-accept-header--warning {
background: var(--warning-subtle);
border-bottom-color: var(--warning);
}
[data-theme="sommet"] .rq-accept-header--warning svg {
color: var(--warning);
}
[data-theme="sommet"] .rq-accept-header--warning .rq-accept-header-label {
color: var(--warning);
}
[data-theme="sommet"] .rq-accept-header--positive {
background: var(--success-subtle);
border-bottom-color: var(--success);
}
[data-theme="sommet"] .rq-accept-header--positive svg {
color: var(--success);
}
[data-theme="sommet"] .rq-accept-header--positive .rq-accept-header-label {
color: var(--success);
}
[data-theme="sommet"] .rq-accept-bulk-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
border-radius: 6px;
border: 1px solid var(--success);
background: var(--success-subtle);
color: var(--success);
cursor: pointer;
font-family: inherit;
transition: background 0.12s;
}
[data-theme="sommet"] .rq-accept-bulk-btn:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-accept-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
[data-theme="sommet"] .rq-accept-table thead tr {
background: var(--surface-tint);
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-accept-table th {
padding: 8px 16px;
text-align: left;
font-size: 11px;
font-weight: 600;
color: var(--fg-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
[data-theme="sommet"] .rq-accept-table th:last-child {
text-align: right;
}
[data-theme="sommet"] .rq-accept-table td {
padding: 6px 16px;
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-accept-table tbody tr:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-accept-table td:last-child {
text-align: right;
}
[data-theme="sommet"] .rq-accept-name {
font-weight: 500;
color: var(--fg);
text-decoration: none;
}
[data-theme="sommet"] .rq-accept-name:hover {
color: var(--accent);
text-decoration: underline;
}
[data-theme="sommet"] .rq-accept-website {
font-size: 10px;
color: var(--fg-tertiary);
margin-left: 6px;
}
[data-theme="sommet"] .rq-accept-date {
font-size: 11px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-accept-actions {
display: inline-flex;
gap: 4px;
}
[data-theme="sommet"] .rq-accept-btn {
padding: 2px 8px;
font-size: 11px;
font-weight: 500;
border-radius: 4px;
border: 1px solid;
cursor: pointer;
font-family: inherit;
transition: background 0.12s;
}
[data-theme="sommet"] .rq-accept-btn--accept {
border-color: var(--success);
background: var(--success-subtle);
color: var(--success);
}
[data-theme="sommet"] .rq-accept-btn--accept:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-accept-btn--flag {
border-color: var(--warning);
color: var(--warning);
background: var(--surface);
}
[data-theme="sommet"] .rq-accept-btn--flag:hover {
background: var(--warning-subtle);
}
[data-theme="sommet"] .rq-accept-btn--decline {
border-color: var(--danger);
color: var(--danger);
background: var(--surface);
}
[data-theme="sommet"] .rq-accept-btn--decline:hover {
background: var(--danger-subtle);
}
[data-theme="sommet"] .rq-accept-btn--remind {
border-color: var(--edge);
color: var(--fg-disabled);
background: var(--surface);
cursor: not-allowed;
}
[data-theme="sommet"] .rq-accept-empty {
padding: 16px 24px;
text-align: center;
font-size: 11px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-accept-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ── Grouped pivot table (per_group decision mode) ──
Matches proto request-detail-v2.html unified pivot */
[data-theme="sommet"] .rq-pivot-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
[data-theme="sommet"] .rq-pivot-toolbar-left {
display: flex;
align-items: center;
gap: 6px;
}
[data-theme="sommet"] .rq-pivot-toolbar-right {
display: flex;
align-items: center;
gap: 4px;
}
[data-theme="sommet"] .rq-pivot-toolbar-sep {
width: 1px;
height: 16px;
background: var(--edge);
flex-shrink: 0;
}
[data-theme="sommet"] .rq-pivot-page-label {
font-size: 10px;
color: var(--fg-tertiary);
margin-right: 4px;
}
[data-theme="sommet"] .rq-pivot-nav {
width: 26px;
height: 26px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--fg-tertiary);
transition: all 0.12s;
}
[data-theme="sommet"] .rq-pivot-nav:hover:not(:disabled) {
border-color: var(--edge-strong);
color: var(--fg);
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-pivot-nav:disabled {
opacity: 0.3;
cursor: not-allowed;
}
[data-theme="sommet"] .rq-pivot-nav svg {
width: 14px;
height: 14px;
}
/* View toggle chip */
[data-theme="sommet"] .rq-pivot-view {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
font-size: 11px;
font-weight: 500;
color: var(--fg-tertiary);
cursor: pointer;
transition: all 0.12s;
font-family: inherit;
}
[data-theme="sommet"] .rq-pivot-view:hover {
border-color: var(--edge-strong);
color: var(--fg);
}
[data-theme="sommet"] .rq-pivot-view.active {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-subtle, rgba(99, 102, 241, 0.06));
}
[data-theme="sommet"] .rq-pivot-view svg {
width: 14px;
height: 14px;
}
/* Pivot table */
[data-theme="sommet"] .rq-pivot-wrap {
width: 100%;
overflow-x: auto;
}
[data-theme="sommet"] .rq-pivot {
width: 100%;
border-collapse: collapse;
font-size: 12px;
table-layout: fixed;
}
[data-theme="sommet"] .rq-pivot th {
padding: 8px 10px;
text-align: right;
font-weight: 600;
color: var(--fg-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--edge);
font-size: 10px;
white-space: nowrap;
vertical-align: top;
}
[data-theme="sommet"] .rq-pivot th:first-child {
text-align: left;
width: 220px;
}
[data-theme="sommet"] .rq-pivot td {
padding: 7px 10px;
border-bottom: 1px solid var(--edge-subtle);
text-align: right;
color: var(--fg-secondary);
font-variant-numeric: tabular-nums;
}
[data-theme="sommet"] .rq-pivot td:first-child {
text-align: left;
}
/* Participant header in pivot columns */
[data-theme="sommet"] .rq-pivot-participant {
text-decoration: none;
color: inherit;
display: block;
}
[data-theme="sommet"] .rq-pivot-participant:hover .rq-pivot-participant-name {
color: var(--accent);
text-decoration: underline;
}
[data-theme="sommet"] .rq-pivot-participant-name {
font-size: 11px;
font-weight: 600;
color: var(--fg);
text-transform: none;
letter-spacing: 0;
}
[data-theme="sommet"] .rq-pivot-participant-status {
font-size: 9px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
margin-top: 1px;
}
[data-theme="sommet"] .rq-pivot-participant-status.responded {
color: var(--success);
}
[data-theme="sommet"] .rq-pivot-participant-status.awaiting {
color: var(--fg-tertiary);
}
/* Section separator row */
[data-theme="sommet"] .rq-pivot-section td {
padding: 14px 10px 6px;
border-bottom: none;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
}
/* Row hover highlight (Excel-like) */
[data-theme="sommet"] .rq-pivot tbody tr:not(.rq-pivot-section):hover td {
background: var(--surface-hover);
}
/* Group header row (expandable) */
[data-theme="sommet"] .rq-pivot-group {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
[data-theme="sommet"] .rq-pivot-group td:first-child {
font-weight: 600;
color: var(--fg);
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
}
[data-theme="sommet"] .rq-pivot-group-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
[data-theme="sommet"] .rq-pivot-chevron {
width: 12px;
height: 12px;
color: var(--fg-tertiary);
transition: transform 0.12s;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-pivot-group.expanded .rq-pivot-chevron {
transform: rotate(90deg);
}
/* Rich field expandable node (same font as header rows, not group rows) */
[data-theme="sommet"] .rq-pivot-rich-node {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
[data-theme="sommet"] .rq-pivot-rich-node td {
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-pivot-rich-node td:first-child {
color: var(--fg-tertiary);
font-weight: 500;
}
[data-theme="sommet"] .rq-pivot-rich-node.expanded .rq-pivot-chevron {
transform: rotate(90deg);
}
/* Rich field leaf row */
[data-theme="sommet"] .rq-pivot-rich-leaf td {
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-pivot-rich-leaf td:first-child {
color: var(--fg-tertiary);
}
/* Group total value (collapsed state) */
[data-theme="sommet"] .rq-pivot-total {
font-weight: 600;
color: var(--fg);
}
[data-theme="sommet"] .rq-pivot-total.best {
color: var(--success);
}
[data-theme="sommet"] .rq-pivot-best-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
margin-right: 4px;
vertical-align: middle;
}
/* Verdict hint dot on collapsed group row */
[data-theme="sommet"] .rq-pivot-verdict-hint {
font-size: 7px;
margin-right: 4px;
vertical-align: middle;
}
[data-theme="sommet"] .rq-pivot-verdict-hint.awarded {
color: var(--success);
}
[data-theme="sommet"] .rq-pivot-verdict-hint.shortlisted {
color: var(--accent);
}
[data-theme="sommet"] .rq-pivot-verdict-hint.disqualified {
color: var(--danger);
}
/* Line item rows (hidden by default, shown when group is expanded) */
[data-theme="sommet"] .rq-pivot-line td {
font-size: 12px;
color: var(--fg-secondary);
padding: 5px 10px 5px 42px;
}
[data-theme="sommet"] .rq-pivot-line td:first-child {
padding-left: 42px;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-pivot-line .best {
color: var(--success);
font-weight: 600;
}
/* Header field rows (Request Headers section) */
[data-theme="sommet"] .rq-pivot-header-row td {
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-pivot-header-row td:first-child {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-pivot-header-row .best {
color: var(--success);
font-weight: 600;
}
/* Rich field summary (collapsed object/array count) */
[data-theme="sommet"] .rq-pivot-rich-summary {
font-size: 11px;
color: var(--fg-tertiary);
font-style: italic;
}
/* List view (participants × fields) */
[data-theme="sommet"] .rq-pivot-list {
table-layout: auto;
}
[data-theme="sommet"] .rq-pivot-list thead th {
font-size: 11px;
font-weight: 600;
color: var(--fg-tertiary);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
padding: 8px 10px;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="sommet"] .rq-pivot-list-row td {
padding: 8px 10px;
color: var(--fg-secondary);
font-size: 12.5px;
border-bottom: 1px solid var(--edge);
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .rq-pivot-list thead th:first-child {
position: sticky;
left: 0;
background: var(--surface);
z-index: 2;
max-width: none;
overflow: visible;
}
[data-theme="sommet"] .rq-pivot-list-row td:first-child {
position: sticky;
left: 0;
background: var(--surface);
z-index: 1;
max-width: none;
overflow: visible;
white-space: normal;
}
[data-theme="sommet"] .rq-pivot-list-row:hover td {
background: var(--surface-hover);
}
/* P×G accordion detail rows */
[data-theme="sommet"] .rq-pxg-subgroup td {
padding: 10px 10px 4px 30px;
border-bottom: none;
font-weight: 600;
font-size: 12px;
color: var(--fg);
}
[data-theme="sommet"] .rq-pxg-field td {
padding: 5px 10px 5px 10px;
}
[data-theme="sommet"] .rq-pxg-field-row {
display: flex;
justify-content: space-between;
padding-left: 44px;
padding-right: 10px;
font-size: 12px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-pxg-field-label {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-pxg-section-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-tertiary);
padding-left: 30px;
}
/* Pending cell */
[data-theme="sommet"] .rq-pivot-pending {
color: var(--fg-disabled);
font-style: italic;
}
/* Numeric formatting — mono font for currency / numbers */
[data-theme="sommet"] .rq-pivot-mono {
font-family: var(--font-mono, monospace);
font-variant-numeric: tabular-nums;
}
[data-theme="sommet"] .rq-pivot-num {
font-variant-numeric: tabular-nums;
}
/* Verdict row */
[data-theme="sommet"] .rq-pivot-verdict td {
border-top: 1px solid var(--edge);
padding-top: 6px;
padding-bottom: 6px;
}
[data-theme="sommet"] .rq-pivot-verdict-label {
font-weight: 700;
color: var(--fg);
font-size: 13px;
}
[data-theme="sommet"] .rq-pivot-verdict-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border: 1px solid var(--edge);
border-radius: 6px;
background: var(--surface);
font-size: 11px;
font-weight: 500;
color: var(--fg-secondary);
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
}
[data-theme="sommet"] .rq-pivot-verdict-btn:hover {
border-color: var(--edge-strong);
}
[data-theme="sommet"] .rq-pivot-verdict-btn svg {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-pivot-verdict-btn.awarded {
color: var(--success);
border-color: var(--success);
background: var(--success-subtle);
}
[data-theme="sommet"] .rq-pivot-verdict-btn.rejected {
color: var(--danger);
border-color: var(--danger);
background: var(--danger-subtle);
}
[data-theme="sommet"] .rq-verdict-picker {
position: relative;
display: inline-block;
}
[data-theme="sommet"] .rq-verdict-dropdown-portal {
pointer-events: auto;
}
[data-theme="sommet"] .rq-verdict-menu {
min-width: 140px;
}
[data-theme="sommet"] .rq-verdict-opt--awarded:hover,
[data-theme="sommet"] .rq-verdict-opt--awarded.active {
background: var(--success-subtle, rgba(34, 197, 94, 0.08));
color: var(--success);
font-weight: 500;
}
[data-theme="sommet"] .rq-verdict-opt--rejected:hover,
[data-theme="sommet"] .rq-verdict-opt--rejected.active {
background: var(--danger-subtle, rgba(229, 72, 77, 0.08));
color: var(--danger);
font-weight: 500;
}
/* Rich value peek button (list view) */
[data-theme="sommet"] .rq-rich-peek {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: 1px dashed var(--edge);
border-radius: 4px;
padding: 2px 6px;
font-family: inherit;
font-size: inherit;
color: var(--fg-secondary);
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .rq-rich-peek:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-subtle, rgba(99, 102, 241, 0.04));
}
[data-theme="sommet"] .rq-rich-peek svg {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-rich-peek:hover svg {
color: var(--accent);
}
/* Rich detail modal table */
[data-theme="sommet"] .rq-rich-detail-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
[data-theme="sommet"] .rq-rich-detail-section-cell {
padding: 8px 0 4px;
font-weight: 600;
color: var(--fg);
border-bottom: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-rich-detail-section-row:first-child .rq-rich-detail-section-cell {
padding-top: 0;
}
[data-theme="sommet"] .rq-rich-detail-kv-row td {
border-top: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-rich-detail-key {
padding: 5px 12px 5px 0;
color: var(--fg-tertiary);
white-space: nowrap;
font-weight: 500;
vertical-align: top;
width: 1%;
}
[data-theme="sommet"] .rq-rich-detail-val {
padding: 5px 0;
color: var(--fg);
word-break: break-word;
}
[data-theme="sommet"] .rq-rich-detail-scalar-row td {
padding: 4px 0;
color: var(--fg);
}
/* Participant detail — SOP compact strip */
[data-theme="sommet"] .rq-sop-strip {
margin: 0 24px 16px;
border: 1px solid var(--edge);
border-radius: 8px;
overflow: hidden;
}
[data-theme="sommet"] .rq-sop-strip-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
font-size: 11.5px;
transition: background 0.12s;
}
[data-theme="sommet"] .rq-sop-strip-header:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-sop-badge {
font-size: 8px;
font-weight: 700;
padding: 1px 5px;
border-radius: 4px;
background: var(--accent-subtle);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-sop-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .rq-sop-bc-name {
font-size: 10px;
font-weight: 500;
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-sop-bc-step {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 600;
color: var(--accent);
}
[data-theme="sommet"] .rq-sop-bc-step--done {
color: var(--success);
}
[data-theme="sommet"] .rq-sop-bc-count {
font-size: 10px;
color: var(--fg-disabled);
margin-left: 2px;
}
[data-theme="sommet"] .rq-sop-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
display: inline-block;
flex-shrink: 0;
animation: rq-sop-pulse-anim 2s ease-in-out infinite;
}
@keyframes rq-sop-pulse-anim {
0%,
100% {
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
}
50% {
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0);
}
}
[data-theme="sommet"] .rq-sop-chevron {
flex-shrink: 0;
color: var(--fg-disabled);
transition: transform 0.15s;
}
[data-theme="sommet"] .rq-sop-chevron--open {
transform: rotate(180deg);
}
/* SOP expanded — step list */
[data-theme="sommet"] .rq-sop-detail {
padding: 0 12px 10px;
}
[data-theme="sommet"] .rq-sop-detail-step {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
font-size: 11.5px;
}
[data-theme="sommet"] .rq-sop-detail-name {
display: flex;
align-items: center;
gap: 5px;
color: var(--fg-secondary);
font-weight: 500;
}
[data-theme="sommet"] .rq-sop-detail-step--completed .rq-sop-detail-name {
color: var(--fg-tertiary);
}
[data-theme="sommet"] .rq-sop-detail-step--planned .rq-sop-detail-name {
color: var(--fg-disabled);
}
[data-theme="sommet"] .rq-sop-detail-desc {
font-size: 10px;
color: var(--success);
}
[data-theme="sommet"] .rq-sop-detail-right {
display: inline-flex;
align-items: center;
gap: 12px;
margin-left: auto;
flex-shrink: 0;
}
[data-theme="sommet"] .rq-sop-history-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 500;
color: var(--accent);
text-decoration: none;
padding: 2px 6px;
border-radius: 4px;
transition: background 0.12s;
}
[data-theme="sommet"] .rq-sop-history-link:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-sop-history-link svg {
width: 11px;
height: 11px;
stroke-width: 2;
}
/* SOP expanded — automations */
[data-theme="sommet"] .rq-sop-automations {
padding: 8px 12px 4px;
border-top: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .rq-sop-auto-label {
font-size: 10px;
font-weight: 600;
color: var(--fg-disabled);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
[data-theme="sommet"] .rq-sop-auto-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: var(--fg-secondary);
margin-bottom: 4px;
text-decoration: none;
padding: 3px 6px;
margin-left: -6px;
border-radius: 4px;
transition: background 0.12s;
}
[data-theme="sommet"] a.rq-sop-auto-item:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .rq-sop-auto-name {
color: var(--fg-secondary);
}
[data-theme="sommet"] .rq-sop-auto-history {
margin-left: auto;
font-weight: 500;
color: var(--accent);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════
Shared form primitives — from proto settings.css
TODO: Promote to global when sommet goes default
═══════════════════════════════════════════════════════════════════ */
[data-theme="sommet"] .form-field {
margin-bottom: 18px;
}
[data-theme="sommet"] .form-field label {
display: block;
font-size: 11.5px;
font-weight: 500;
color: var(--fg-secondary);
margin-bottom: 5px;
}
[data-theme="sommet"] .form-field label .required {
color: var(--danger);
}
[data-theme="sommet"] .form-field label .optional {
font-weight: 400;
color: var(--fg-tertiary);
}
[data-theme="sommet"] .form-field input,
[data-theme="sommet"] .form-field select,
[data-theme="sommet"] .form-field textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--edge);
border-radius: 6px;
font-family: inherit;
font-size: 13px;
color: var(--fg);
background: var(--surface);
transition: border-color 0.12s;
line-height: 1.5;
}
[data-theme="sommet"] .form-field input:focus,
[data-theme="sommet"] .form-field select:focus,
[data-theme="sommet"] .form-field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-subtle);
}
[data-theme="sommet"] .form-field input:disabled,
[data-theme="sommet"] .form-field select:disabled,
[data-theme="sommet"] .form-field textarea:disabled {
background: var(--surface-tint);
color: var(--fg-tertiary);
cursor: not-allowed;
}
[data-theme="sommet"] .form-field textarea {
resize: vertical;
min-height: 56px;
}
[data-theme="sommet"] .form-field select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2371717A' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
[data-theme="sommet"] .form-hint {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: 4px;
line-height: 1.4;
}
[data-theme="sommet"] .form-actions {
margin-top: 24px;
display: flex;
align-items: center;
gap: 8px;
}
/* Datetime picker overrides — match Sommet compact form sizing */
[data-theme="sommet"] .form-field input[x-ref="datePickerInput"] {
height: auto; /* override h-10 */
}
[data-theme="sommet"] .form-field [x-ref="datePickerInput"] + div svg {
width: 16px;
height: 16px; /* calendar icon: 16px instead of 24px */
}
[data-theme="sommet"] .form-field [x-ref="datePickerInput"] + div {
padding: 8px 10px; /* align icon vertically with smaller input */
}
[data-theme="sommet"] .btn-primary {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
padding: 7px 16px;
border-radius: 6px;
border: none;
background: var(--accent);
color: white;
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .btn-primary:hover {
filter: brightness(0.92);
}
[data-theme="sommet"] .btn-primary svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
[data-theme="sommet"] .btn-outline {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
padding: 6px 12px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
color: var(--fg-secondary);
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .btn-outline:hover {
background: var(--surface-hover);
border-color: var(--edge-strong);
}
[data-theme="sommet"] .btn-outline svg {
width: 13px;
height: 13px;
stroke-width: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════
Request wizard — wiz-* classes
═══════════════════════════════════════════════════════════════════ */
/* Layout */
[data-theme="sommet"] .wiz-shell {
display: flex;
width: 100%;
height: 100%;
min-height: 0;
background: var(--surface);
}
[data-theme="sommet"] .wiz-left {
width: 560px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--edge-subtle);
}
[data-theme="sommet"] .wiz-right {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--surface-tint);
position: relative;
}
/* Top bar */
[data-theme="sommet"] .wiz-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid var(--edge-subtle);
flex-shrink: 0;
}
[data-theme="sommet"] .wiz-topbar-left {
display: flex;
align-items: center;
gap: 10px;
}
[data-theme="sommet"] .wiz-topbar-left h2 {
font-size: 13px;
font-weight: 600;
color: var(--fg);
margin: 0;
}
[data-theme="sommet"] .wiz-badge {
font-size: 9px;
font-weight: 600;
padding: 2px 6px;
border-radius: 3px;
background: var(--surface-tint);
color: var(--fg-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
[data-theme="sommet"] .wiz-close {
width: 28px;
height: 28px;
border-radius: 4px;
border: none;
background: none;
color: var(--fg-disabled);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .wiz-close:hover {
background: var(--surface-hover);
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-close svg {
width: 16px;
height: 16px;
stroke-width: 1.5;
}
/* Step rail (horizontal) */
[data-theme="sommet"] .wiz-steps {
display: flex;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid var(--edge-subtle);
gap: 0;
flex-shrink: 0;
}
[data-theme="sommet"] .wiz-step {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
padding: 4px 0;
}
[data-theme="sommet"] .wiz-step-dot {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--edge);
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: var(--fg-disabled);
flex-shrink: 0;
transition: all 0.12s;
}
[data-theme="sommet"] .wiz-step.active .wiz-step-dot {
background: var(--accent);
border-color: var(--accent);
color: white;
}
[data-theme="sommet"] .wiz-step.done .wiz-step-dot {
background: var(--success);
border-color: var(--success);
color: white;
}
[data-theme="sommet"] .wiz-step-label {
font-size: 10px;
font-weight: 500;
color: var(--fg-disabled);
white-space: nowrap;
}
[data-theme="sommet"] .wiz-step.active .wiz-step-label {
color: var(--fg);
font-weight: 600;
}
[data-theme="sommet"] .wiz-step.done .wiz-step-label {
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-step.locked {
cursor: not-allowed;
opacity: 0.5;
}
[data-theme="sommet"] .wiz-step-line {
flex: 1;
height: 1.5px;
background: var(--edge-subtle);
margin: 0 6px;
min-width: 8px;
}
[data-theme="sommet"] .wiz-step-line.done {
background: var(--success);
}
/* Form area */
[data-theme="sommet"] .wiz-form-area {
flex: 1;
overflow-y: auto;
padding: 24px 28px 40px;
}
[data-theme="sommet"] .wiz-form-area .settings-form {
max-width: 560px;
}
[data-theme="sommet"] .wiz-section-title {
font-size: 15px;
font-weight: 600;
color: var(--fg);
margin: 0 0 4px;
}
[data-theme="sommet"] .wiz-section-desc {
font-size: 11.5px;
color: var(--fg-tertiary);
margin: 0 0 20px;
line-height: 1.5;
}
/* Option cards (type/decision mode picker) */
[data-theme="sommet"] .wiz-option-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 8px;
}
[data-theme="sommet"] .wiz-option-card {
padding: 10px 12px;
border: 1.5px solid var(--edge);
border-radius: 6px;
cursor: pointer;
transition: all 0.12s;
}
[data-theme="sommet"] .wiz-option-card:hover {
border-color: var(--edge-strong);
}
[data-theme="sommet"] .wiz-option-card.selected {
border-color: var(--accent);
background: var(--accent-subtle);
}
[data-theme="sommet"] .wiz-option-card-title {
font-size: 11.5px;
font-weight: 600;
color: var(--fg);
margin-bottom: 2px;
}
[data-theme="sommet"] .wiz-option-card-desc {
font-size: 10px;
color: var(--fg-tertiary);
line-height: 1.4;
}
[data-theme="sommet"] .wiz-option-card.selected .wiz-option-card-title {
color: var(--accent);
}
[data-theme="sommet"] .wiz-option-card--disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Bottom nav */
[data-theme="sommet"] .wiz-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-top: 1px solid var(--edge-subtle);
flex-shrink: 0;
}
[data-theme="sommet"] .wiz-bottom-actions {
display: flex;
align-items: center;
gap: 8px;
}
[data-theme="sommet"] .wiz-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 16px;
border-radius: 6px;
border: 1px solid var(--edge);
background: var(--surface);
font-size: 11.5px;
font-weight: 500;
color: var(--fg-secondary);
cursor: pointer;
font-family: inherit;
transition: all 0.12s;
text-decoration: none;
}
[data-theme="sommet"] .wiz-btn:hover {
background: var(--surface-hover);
border-color: var(--edge-strong);
}
[data-theme="sommet"] .wiz-btn svg {
width: 14px;
height: 14px;
stroke-width: 1.5;
}
[data-theme="sommet"] .wiz-btn.primary {
background: var(--fg);
color: white;
border-color: var(--fg);
}
[data-theme="sommet"] .wiz-btn.primary:hover {
filter: brightness(1.15);
}
[data-theme="sommet"] .wiz-btn.launch {
background: var(--accent);
color: white;
border-color: var(--accent);
}
[data-theme="sommet"] .wiz-btn.launch:hover {
filter: brightness(0.92);
}
[data-theme="sommet"] .wiz-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Preview panel */
[data-theme="sommet"] .wiz-preview-header {
padding: 12px 16px;
border-bottom: 1px solid var(--edge-subtle);
font-size: 10px;
font-weight: 600;
color: var(--fg-disabled);
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
}
[data-theme="sommet"] .wiz-preview-body {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
[data-theme="sommet"] .wiz-preview-body > * {
width: 100%;
max-width: 520px;
}
/* Preview null state */
[data-theme="sommet"] .wiz-preview-null {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
gap: 16px;
}
[data-theme="sommet"] .wiz-null-illust {
position: relative;
width: 120px;
height: 130px;
animation: wiz-null-float 4s ease-in-out infinite;
}
@keyframes wiz-null-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
[data-theme="sommet"] .wiz-null-env {
position: absolute;
border-radius: 8px;
border: 1.5px solid;
}
[data-theme="sommet"] .wiz-null-env-1 {
width: 90px;
height: 60px;
bottom: 0;
left: 15px;
background: #e4dcf5;
border-color: #d0c4ea;
}
[data-theme="sommet"] .wiz-null-env-2 {
width: 90px;
height: 60px;
bottom: 10px;
left: 8px;
background: #f2e8da;
border-color: #e5d4bd;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="sommet"] .wiz-null-env-3 {
width: 90px;
height: 60px;
bottom: 20px;
left: 0;
background: var(--surface);
border-color: var(--edge);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="sommet"] .wiz-null-env-3::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50px;
height: 24px;
transform: translateX(-50%);
border-bottom: 1.5px solid var(--edge);
background:
linear-gradient(135deg, transparent 48%, var(--edge) 48%, var(--edge) 52%, transparent 52%),
linear-gradient(225deg, transparent 48%, var(--edge) 48%, var(--edge) 52%, transparent 52%);
background-size: 50% 100%;
background-position: left, right;
background-repeat: no-repeat;
}
[data-theme="sommet"] .wiz-null-env-3::after {
content: "";
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
height: 5px;
background: var(--surface-hover);
border-radius: 3px;
box-shadow: 0 -9px 0 0 var(--surface-hover);
}
[data-theme="sommet"] .wiz-null-sparkle {
position: absolute;
top: 8px;
right: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddeadd;
border: 1.5px solid #c4d9c4;
animation: wiz-sparkle-pulse 2s ease-in-out infinite;
}
@keyframes wiz-sparkle-pulse {
0%,
100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
[data-theme="sommet"] .wiz-preview-null-title {
font-size: 14px;
font-weight: 600;
color: var(--fg);
}
[data-theme="sommet"] .wiz-preview-null-text {
font-size: 11.5px;
color: var(--fg-disabled);
max-width: 220px;
line-height: 1.5;
}
/* ── Wizard shared primitives ── */
[data-theme="sommet"] .wiz-divider {
height: 1px;
background: var(--edge);
margin: 20px 0;
}
[data-theme="sommet"] .wiz-hint {
font-size: var(--text-xs);
color: var(--fg-muted);
margin-top: 4px;
line-height: 1.4;
}
[data-theme="sommet"] .wiz-hint code {
font-family: var(--font-mono, monospace);
font-size: 10px;
padding: 1px 4px;
border-radius: 3px;
background: var(--surface-hover);
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-link {
font-size: var(--text-xs);
color: var(--accent);
font-weight: var(--weight-medium, 500);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 3px;
text-decoration: none;
background: none;
border: none;
font-family: inherit;
}
[data-theme="sommet"] .wiz-link:hover {
text-decoration: underline;
}
[data-theme="sommet"] .wiz-link svg {
width: 11px;
height: 11px;
stroke-width: 1.5;
}
/* ── Wizard cards ── */
[data-theme="sommet"] .wiz-card {
border: 1px solid var(--edge);
border-radius: var(--radius-md, 8px);
overflow: hidden;
margin-bottom: 16px;
}
[data-theme="sommet"] .wiz-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--surface-hover);
border-bottom: 1px solid var(--edge);
font-size: 11px;
font-weight: 600;
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-card-header .wiz-card-meta {
font-weight: 400;
color: var(--fg-muted);
font-size: 10px;
}
[data-theme="sommet"] .wiz-card-body {
padding: 16px;
}
[data-theme="sommet"] .wiz-card-footer {
padding: 10px 14px;
border-top: 1px solid var(--edge);
background: var(--surface-hover);
font-size: 11px;
color: var(--fg-muted);
}
/* ── Alert banners ── */
[data-theme="sommet"] .wiz-alert {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
margin-bottom: 16px;
border-radius: var(--radius-md, 8px);
border: 1px solid var(--edge);
background: var(--surface-hover);
font-size: 11px;
color: var(--fg-secondary);
line-height: 1.5;
}
[data-theme="sommet"] .wiz-alert svg {
flex-shrink: 0;
margin-top: 1px;
}
[data-theme="sommet"] .wiz-alert.error {
border-color: var(--danger-edge, var(--danger));
background: var(--danger-surface, #fef2f2);
color: var(--danger);
}
[data-theme="sommet"] .wiz-alert.success {
border-color: var(--success-edge, var(--success));
background: var(--success-surface, #f0fdf4);
color: var(--success);
}
[data-theme="sommet"] .wiz-alert.locked {
border-color: var(--edge);
background: var(--surface-hover);
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-alert.info {
border: 1px dashed var(--bdr-info, #5cb8d6);
background: var(--bg-info-subtle, #ebf5fb);
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-alert.info strong {
color: var(--content-info, #2b7a9e);
}
[data-theme="sommet"] .wiz-alert.info code {
font-family: var(--font-mono, monospace);
font-size: 10px;
background: var(--surface);
padding: 1px 4px;
border-radius: 3px;
}
/* Import JSON drop area */
[data-theme="sommet"] .wiz-import-drop {
border: 1px dashed var(--bdr-info, #5cb8d6);
background: var(--bg-info-subtle, #ebf5fb);
border-radius: var(--radius-md, 8px);
padding: 16px;
margin-bottom: 16px;
transition:
background 0.15s,
border-color 0.15s;
}
[data-theme="sommet"] .wiz-import-drop.dragover {
border-color: var(--content-info, #2b7a9e);
background: var(--bg-info, #d6eaf2);
}
[data-theme="sommet"] .wiz-import-drop-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: var(--text-sm, 13px);
color: var(--content-info, #2b7a9e);
}
[data-theme="sommet"] .wiz-import-drop textarea {
font-family: var(--font-mono, monospace);
font-size: 11px;
width: 100%;
border: 1px solid var(--edge);
border-radius: var(--radius-sm, 6px);
padding: 8px;
background: var(--surface);
color: var(--fg);
resize: vertical;
}
[data-theme="sommet"] .wiz-import-drop textarea:focus {
outline: none;
border-color: var(--bdr-info, #5cb8d6);
}
/* ── Card option grid (Step 1 — Type & Decision Mode) ── */
[data-theme="sommet"] .wiz-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
[data-theme="sommet"] .wiz-card-option {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 14px 16px;
border-radius: var(--radius-lg, 10px);
border: 1.5px solid var(--edge);
background: var(--surface-bg);
cursor: pointer;
text-align: left;
transition:
border-color 0.15s,
background 0.15s;
}
[data-theme="sommet"] .wiz-card-option:hover:not(:disabled) {
background: var(--surface-hover, var(--row-hover));
}
[data-theme="sommet"] .wiz-card-option.active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 6%, transparent);
}
[data-theme="sommet"] .wiz-card-option:disabled {
opacity: 0.5;
cursor: not-allowed;
}
[data-theme="sommet"] .wiz-card-option-title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--fg);
}
[data-theme="sommet"] .wiz-card-option.active .wiz-card-option-title {
color: var(--accent);
}
[data-theme="sommet"] .wiz-card-option-desc {
font-size: var(--text-xs);
color: var(--fg-muted);
line-height: 1.4;
}
/* ── Review card (Step 5) ── */
[data-theme="sommet"] .wiz-review-card {
border: 1px solid var(--edge);
border-radius: var(--radius-lg, 10px);
overflow: hidden;
}
[data-theme="sommet"] .wiz-review-card-header {
padding: 14px 16px;
border-bottom: 1px solid var(--edge);
display: flex;
align-items: center;
justify-content: space-between;
}
[data-theme="sommet"] .wiz-review-card-title {
font-size: var(--text-md, 15px);
font-weight: var(--weight-semibold, 600);
color: var(--fg);
}
[data-theme="sommet"] .wiz-review-card-subtitle {
font-size: var(--text-xs, 11px);
color: var(--fg-muted);
margin-top: 2px;
}
[data-theme="sommet"] .wiz-review-card-body {
padding: 14px 16px;
}
[data-theme="sommet"] .wiz-review-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
[data-theme="sommet"] .wiz-review-stat-label {
font-size: 9px;
font-weight: var(--weight-semibold, 600);
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
[data-theme="sommet"] .wiz-review-stat-value {
font-size: var(--text-md, 15px);
font-weight: var(--weight-semibold, 600);
color: var(--fg);
}
[data-theme="sommet"] .wiz-review-stat-note {
font-weight: var(--weight-normal, 400);
color: var(--fg-muted);
font-size: var(--text-xs, 11px);
}
[data-theme="sommet"] .wiz-review-next-section {
border-top: 1px solid var(--edge);
padding-top: 12px;
}
[data-theme="sommet"] .wiz-review-next-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 6px;
}
[data-theme="sommet"] .wiz-review-next-item {
display: flex;
gap: 6px;
align-items: flex-start;
font-size: var(--text-xs, 11px);
color: var(--fg-secondary);
line-height: 1.6;
}
[data-theme="sommet"] .wiz-review-next-item svg {
flex-shrink: 0;
margin-top: 1px;
color: var(--accent, #3b82f6);
}
/* ── Wizard tabs ── */
[data-theme="sommet"] .wiz-tabs {
display: flex;
border-bottom: 1px solid var(--edge);
background: var(--surface);
padding: 8px 14px 0;
gap: 2px;
}
[data-theme="sommet"] .wiz-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
font-size: 11px;
font-weight: 500;
color: var(--fg-secondary);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: color 0.12s;
background: none;
border-top: none;
border-left: none;
border-right: none;
font-family: inherit;
white-space: nowrap;
}
[data-theme="sommet"] .wiz-tab:hover {
color: var(--fg);
}
[data-theme="sommet"] .wiz-tab.active {
color: var(--fg);
border-bottom-color: var(--fg);
}
[data-theme="sommet"] .wiz-tab svg {
width: 11px;
height: 11px;
stroke-width: 2;
}
/* ── Participant chip grid ── */
[data-theme="sommet"] .wiz-participants-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
[data-theme="sommet"] .wiz-p-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: var(--radius-md, 8px);
background: var(--surface-hover);
font-size: var(--text-xs);
font-weight: 500;
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-p-chip .wiz-p-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 7px;
font-weight: 700;
color: white;
border: none;
}
[data-theme="sommet"] .wiz-p-chip .wiz-p-remove {
width: 14px;
height: 14px;
border: none;
background: none;
color: var(--fg-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
}
[data-theme="sommet"] .wiz-p-chip .wiz-p-remove:hover {
color: var(--danger);
background: var(--surface-hover);
}
/* ── Participant count / actions ── */
[data-theme="sommet"] .wiz-p-count {
font-size: var(--text-xs);
color: var(--fg-muted);
margin-bottom: 8px;
}
[data-theme="sommet"] .wiz-p-count strong {
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-p-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-top: 8px;
}
[data-theme="sommet"] .wiz-p-action-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: var(--radius-sm, 6px);
border: 1px solid var(--edge);
background: var(--surface);
font-size: var(--text-xs);
font-weight: var(--weight-medium, 500);
color: var(--fg-secondary);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all 0.12s;
}
[data-theme="sommet"] .wiz-p-action-btn:hover {
border-color: var(--edge-strong);
background: var(--surface-hover);
}
[data-theme="sommet"] .wiz-p-action-btn:disabled,
[data-theme="sommet"] .wiz-p-action-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
[data-theme="sommet"] .wiz-p-action-btn svg {
width: 12px;
height: 12px;
stroke-width: 1.5;
}
/* ── Participant list ── */
[data-theme="sommet"] .wiz-p-list-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-size: var(--text-xs);
border-bottom: 1px solid var(--edge-subtle, var(--edge));
transition: background 0.08s;
}
[data-theme="sommet"] .wiz-p-list-row:last-child {
border-bottom: none;
}
[data-theme="sommet"] .wiz-p-list-row:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .wiz-p-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
color: white;
flex-shrink: 0;
background: var(--surface-hover);
border: 1px solid var(--edge);
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-p-name {
flex: 1;
font-weight: 500;
color: var(--fg);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .wiz-p-meta {
font-size: 11px;
color: var(--fg-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px;
}
[data-theme="sommet"] .wiz-p-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: var(--radius-sm, 6px);
flex-shrink: 0;
}
[data-theme="sommet"] .wiz-p-id {
border: 1px solid var(--edge);
color: var(--fg-muted);
font-size: 10px;
padding: 2px 6px;
border-radius: var(--radius-sm, 6px);
font-family: var(--font-mono, monospace);
flex-shrink: 0;
}
[data-theme="sommet"] .wiz-p-remove {
padding: 2px;
color: var(--fg-muted);
cursor: pointer;
background: none;
border: none;
border-radius: var(--radius-sm, 6px);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="sommet"] .wiz-p-remove:hover {
color: var(--danger);
}
/* ── Participant search modal ── */
[data-theme="sommet"] .pm-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 800;
display: none;
justify-content: center;
align-items: center;
}
[data-theme="sommet"] .pm-overlay.visible {
display: flex;
}
[data-theme="sommet"] .pm-dialog {
background: var(--surface);
border-radius: var(--radius-lg, 12px);
width: 560px;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
[data-theme="sommet"] .pm-header {
padding: 16px 20px;
border-bottom: 1px solid var(--edge);
display: flex;
align-items: center;
gap: 10px;
}
[data-theme="sommet"] .pm-header h3 {
font-size: var(--text-md);
font-weight: 600;
flex: 1;
margin: 0;
}
[data-theme="sommet"] .pm-close {
width: 28px;
height: 28px;
border: none;
background: none;
color: var(--fg-muted);
cursor: pointer;
border-radius: var(--radius-sm, 6px);
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .pm-close:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .pm-search {
padding: 12px 20px;
border-bottom: 1px solid var(--edge-subtle, var(--edge));
}
[data-theme="sommet"] .pm-search input {
width: 100%;
padding: 8px 10px 8px 32px;
border: 1px solid var(--edge);
border-radius: var(--radius-md, 8px);
font: inherit;
font-size: var(--text-sm);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
10px center no-repeat;
}
[data-theme="sommet"] .pm-search input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-subtle, rgba(37, 99, 235, 0.1));
}
[data-theme="sommet"] .pm-stats {
padding: 6px 20px;
font-size: 10px;
color: var(--fg-muted);
display: flex;
gap: 12px;
border-bottom: 1px solid var(--edge-subtle, var(--edge));
}
[data-theme="sommet"] .pm-stats strong {
color: var(--fg-secondary);
}
[data-theme="sommet"] .pm-list {
flex: 1;
overflow-y: auto;
padding: 4px 0;
}
[data-theme="sommet"] .pm-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 20px;
cursor: pointer;
transition: background 0.12s;
}
[data-theme="sommet"] .pm-item:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .pm-item.selected {
background: var(--accent-subtle, rgba(37, 99, 235, 0.05));
}
[data-theme="sommet"] .pm-item-check {
width: 16px;
height: 16px;
border: 1.5px solid var(--edge);
border-radius: 3px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .pm-item.selected .pm-item-check {
background: var(--accent);
border-color: var(--accent);
}
[data-theme="sommet"] .pm-item.selected .pm-item-check::after {
content: "";
display: block;
width: 8px;
height: 5px;
border-left: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg) translateY(-1px);
}
[data-theme="sommet"] .pm-item-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: white;
flex-shrink: 0;
}
[data-theme="sommet"] .pm-item-info {
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .pm-item-name {
font-size: var(--text-sm);
font-weight: 500;
color: var(--fg);
}
[data-theme="sommet"] .pm-item-meta {
font-size: 10px;
color: var(--fg-muted);
}
[data-theme="sommet"] .pm-item-tags {
display: flex;
gap: 4px;
flex-shrink: 0;
}
[data-theme="sommet"] .pm-item-tag {
font-size: 9px;
padding: 1px 5px;
border-radius: 3px;
background: var(--surface-hover);
color: var(--fg-muted);
}
[data-theme="sommet"] .pm-footer {
padding: 12px 20px;
border-top: 1px solid var(--edge);
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
[data-theme="sommet"] .pm-footer .pm-sel-count {
font-size: var(--text-xs);
color: var(--fg-muted);
margin-right: auto;
}
[data-theme="sommet"] .pm-footer button {
padding: 7px 16px;
border-radius: var(--radius-md, 8px);
border: 1px solid var(--edge);
font: inherit;
font-size: var(--text-sm);
cursor: pointer;
}
[data-theme="sommet"] .pm-footer .pm-cancel {
background: var(--surface);
color: var(--fg-secondary);
}
[data-theme="sommet"] .pm-footer .pm-confirm {
background: var(--accent);
color: white;
border-color: var(--accent);
font-weight: 500;
}
[data-theme="sommet"] .pm-footer .pm-confirm:hover {
opacity: 0.9;
}
/* ── CSV modal ── */
[data-theme="sommet"] .csv-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 800;
display: none;
justify-content: center;
align-items: center;
}
[data-theme="sommet"] .csv-overlay.visible {
display: flex;
}
[data-theme="sommet"] .csv-dialog {
background: var(--surface);
border-radius: var(--radius-lg, 12px);
width: 520px;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
[data-theme="sommet"] .csv-header {
padding: 16px 20px;
border-bottom: 1px solid var(--edge);
display: flex;
align-items: center;
gap: 10px;
}
[data-theme="sommet"] .csv-header h3 {
font-size: var(--text-md);
font-weight: 600;
flex: 1;
margin: 0;
}
[data-theme="sommet"] .csv-close {
width: 28px;
height: 28px;
border: none;
background: none;
color: var(--fg-muted);
cursor: pointer;
border-radius: var(--radius-sm, 6px);
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .csv-close:hover {
background: var(--surface-hover);
color: var(--fg);
}
[data-theme="sommet"] .csv-body {
padding: 16px 20px;
flex: 1;
overflow-y: auto;
}
[data-theme="sommet"] .csv-desc {
font-size: var(--text-sm);
color: var(--fg-muted);
margin-bottom: 12px;
line-height: 1.5;
}
[data-theme="sommet"] .csv-desc strong {
color: var(--fg-secondary);
}
[data-theme="sommet"] .csv-body textarea {
width: 100%;
font-family: var(--font-mono, monospace);
font-size: 11px;
min-height: 120px;
resize: vertical;
}
[data-theme="sommet"] .csv-footer {
padding: 12px 20px;
border-top: 1px solid var(--edge);
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
[data-theme="sommet"] .csv-footer button {
padding: 7px 16px;
border-radius: var(--radius-md, 8px);
border: 1px solid var(--edge);
font: inherit;
font-size: var(--text-sm);
cursor: pointer;
}
[data-theme="sommet"] .csv-footer .csv-cancel {
background: var(--surface);
color: var(--fg-secondary);
}
[data-theme="sommet"] .csv-footer .csv-confirm {
background: var(--accent);
color: white;
border-color: var(--accent);
font-weight: 500;
}
/* ── Schema sub-section headers ── */
[data-theme="sommet"] .schema-sub-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
margin-top: 20px;
}
[data-theme="sommet"] .schema-sub-header:first-child {
margin-top: 0;
}
[data-theme="sommet"] .schema-sub-label {
font-size: 10px;
font-weight: 600;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 5px;
}
[data-theme="sommet"] .schema-sub-label svg {
width: 12px;
height: 12px;
stroke-width: 1.5;
}
[data-theme="sommet"] .schema-sub-count {
font-family: var(--font-mono, monospace);
font-size: 9px;
padding: 1px 5px;
background: var(--surface-hover);
border-radius: 8px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .schema-sub-desc {
font-size: var(--text-xs);
color: var(--fg-muted);
margin-bottom: 10px;
line-height: 1.4;
}
/* ── Schema line table ── */
[data-theme="sommet"] .schema-line-table {
width: 100%;
border-collapse: collapse;
}
[data-theme="sommet"] .schema-line-table th {
font-size: 9px;
font-weight: 600;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: left;
padding: 0 0 6px;
border-bottom: 1px solid var(--edge);
}
[data-theme="sommet"] .schema-line-table td {
padding: 5px 4px 5px 0;
border-bottom: 1px solid var(--edge-subtle, var(--edge));
font-size: var(--text-sm, 13px);
color: var(--fg-secondary);
vertical-align: middle;
}
[data-theme="sommet"] .schema-line-table td:last-child {
text-align: right;
padding-right: 0;
}
[data-theme="sommet"] .schema-line-table input[type="text"],
[data-theme="sommet"] .schema-line-table select {
padding: 5px 8px;
border: 1px solid var(--edge);
border-radius: var(--radius-sm, 6px);
font-size: var(--text-xs);
font-family: inherit;
color: var(--fg-secondary);
background: var(--surface);
width: 100%;
}
[data-theme="sommet"] .schema-line-table input:focus {
outline: none;
border-color: var(--accent);
}
/* ── Schema dropdown (Alpine custom select) ── */
[data-theme="sommet"] .sd-wrap {
position: relative;
}
[data-theme="sommet"] .sd-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
padding: 5px 8px;
border: 1px solid var(--edge);
border-radius: var(--radius-sm, 6px);
font-size: var(--text-xs);
font-family: inherit;
color: var(--fg-secondary);
background: var(--surface);
width: 100%;
cursor: pointer;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
[data-theme="sommet"] .sd-trigger:hover {
border-color: var(--fg-muted);
}
[data-theme="sommet"] .sd-trigger.open {
border-color: var(--accent);
}
[data-theme="sommet"] .sd-trigger svg {
width: 10px;
height: 10px;
flex-shrink: 0;
stroke-width: 2;
color: var(--fg-muted);
transition: transform 0.12s;
}
[data-theme="sommet"] .sd-trigger.open svg {
transform: rotate(180deg);
}
[data-theme="sommet"] .sd-menu {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: var(--radius-sm, 6px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 50;
padding: 3px;
min-width: 100%;
max-height: 240px;
overflow-y: auto;
}
[data-theme="sommet"] .sd-menu.sd-up {
top: auto;
bottom: calc(100% + 2px);
}
/* Full-size variant — matches .form-field input sizing (vs the compact default) */
[data-theme="sommet"] .sd-field .sd-trigger {
padding: 8px 12px;
font-size: 13px;
border-radius: 6px;
}
[data-theme="sommet"] .sd-field .sd-option {
padding: 8px 12px;
font-size: 13px;
}
[data-theme="sommet"] .sd-option {
padding: 5px 8px;
font-size: var(--text-xs);
color: var(--fg-secondary);
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
}
[data-theme="sommet"] .sd-option:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .sd-option.selected {
color: var(--accent);
font-weight: 600;
}
[data-theme="sommet"] .sd-search-input,
[data-theme="sommet"] .schema-line-table input[type="text"].sd-search-input,
[data-theme="sommet"] .form-field input[type="text"].sd-search-input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
outline: none;
padding: 0;
margin: 0;
font: inherit;
color: var(--fg-secondary);
cursor: pointer;
text-overflow: ellipsis;
width: auto;
}
[data-theme="sommet"] .sd-trigger.open .sd-search-input {
cursor: text;
}
[data-theme="sommet"] .sd-search-input:focus,
[data-theme="sommet"] .sd-search-input:focus-visible,
[data-theme="sommet"] .schema-line-table input[type="text"].sd-search-input:focus,
[data-theme="sommet"] .form-field input[type="text"].sd-search-input:focus,
[data-theme="sommet"] .form-field input[type="text"].sd-search-input:focus-visible {
outline: none;
box-shadow: none;
border: none;
}
[data-theme="sommet"] .sd-search-input::-moz-placeholder {
color: var(--fg-muted);
}
[data-theme="sommet"] .sd-search-input::placeholder {
color: var(--fg-muted);
}
[data-theme="sommet"] .sd-empty {
padding: 6px 8px;
font-size: var(--text-xs);
color: var(--fg-muted);
text-align: center;
}
/* Compact variant for formula scope */
[data-theme="sommet"] .sd-trigger.sd-compact {
font-size: 10px;
padding: 2px 6px;
}
[data-theme="sommet"] .schema-line-remove {
width: 22px;
height: 22px;
border: none;
background: none;
color: var(--fg-disabled);
cursor: pointer;
border-radius: var(--radius-sm, 6px);
display: inline-flex;
align-items: center;
justify-content: center;
}
[data-theme="sommet"] .schema-line-remove:hover {
color: var(--danger);
background: var(--surface-hover);
}
[data-theme="sommet"] .schema-line-remove svg {
width: 13px;
height: 13px;
stroke-width: 1.5;
}
/* ── Groups list ── */
[data-theme="sommet"] .schema-group-list {
display: flex;
flex-direction: column;
gap: 4px;
}
[data-theme="sommet"] .schema-group-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border: 1px solid var(--edge-subtle, var(--edge));
border-radius: var(--radius-sm, 6px);
background: var(--surface-hover);
font-size: var(--text-xs);
}
[data-theme="sommet"] .schema-group-item .schema-group-name {
font-weight: 600;
color: var(--fg);
flex: 1;
min-width: 0;
}
[data-theme="sommet"] .schema-group-item .schema-group-name[contenteditable]:focus {
outline: none;
}
[data-theme="sommet"] .schema-group-item .schema-group-input {
border: none;
background: none;
font-size: var(--text-xs);
font-weight: 600;
color: var(--fg);
flex: 1;
min-width: 0;
padding: 0;
font-family: inherit;
}
[data-theme="sommet"] .schema-group-item .schema-group-input:focus {
outline: none;
}
/* ── Formula builder ── */
[data-theme="sommet"] .formula-builder {
border: 1px solid var(--edge);
border-radius: var(--radius-md, 8px);
margin-bottom: 8px;
}
[data-theme="sommet"] .formula-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
background: var(--surface-hover);
border-bottom: 1px solid var(--edge-subtle, var(--edge));
border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
}
[data-theme="sommet"] .formula-header-left {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
[data-theme="sommet"] .formula-name-input {
border: none;
background: none;
font-size: var(--text-xs);
font-weight: 600;
color: var(--fg);
padding: 2px 4px;
border-radius: 3px;
width: 140px;
font-family: inherit;
}
[data-theme="sommet"] .formula-name-input:focus {
outline: none;
background: var(--surface);
box-shadow: 0 0 0 1px var(--accent);
}
[data-theme="sommet"] .formula-star {
border: none;
background: none;
color: var(--fg-muted);
cursor: pointer;
display: flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: var(--radius-sm, 6px);
transition: all 0.12s;
flex-shrink: 0;
}
[data-theme="sommet"] .formula-star:hover {
color: var(--warning, #e79d13);
}
[data-theme="sommet"] .formula-star.active {
color: var(--warning, #e79d13);
}
[data-theme="sommet"] .formula-star svg {
width: 13px;
height: 13px;
stroke-width: 1.5;
}
[data-theme="sommet"] .formula-star.active svg {
fill: var(--warning, #e79d13);
}
[data-theme="sommet"] .formula-scope-wrap {
position: relative;
margin-left: 4px;
}
[data-theme="sommet"] .formula-remove {
width: 22px;
height: 22px;
border: none;
background: none;
color: var(--fg-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: var(--radius-sm, 6px);
transition: all 0.12s;
}
[data-theme="sommet"] .formula-remove:hover {
color: var(--danger);
background: var(--surface-hover);
}
[data-theme="sommet"] .formula-remove svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
/* Chip-based formula expression */
[data-theme="sommet"] .formula-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px 10px;
align-items: center;
min-height: 36px;
position: relative;
cursor: text;
}
[data-theme="sommet"] .formula-chips:focus-within {
background: var(--surface-hover);
}
[data-theme="sommet"] .formula-chip {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px 8px;
border-radius: var(--radius-sm, 6px);
font-size: 10px;
font-weight: 500;
cursor: default;
line-height: 1;
white-space: nowrap;
}
[data-theme="sommet"] .formula-chip.var {
background: var(--accent-subtle, rgba(37, 99, 235, 0.06));
border: 1px solid var(--accent-edge, rgba(37, 99, 235, 0.2));
color: var(--accent);
font-family: var(--font-mono, monospace);
}
[data-theme="sommet"] .formula-chip.var button {
border: none;
background: none;
color: var(--accent-edge, rgba(37, 99, 235, 0.4));
cursor: pointer;
font-size: 11px;
padding: 0 0 0 2px;
line-height: 1;
}
[data-theme="sommet"] .formula-chip.var button:hover {
color: var(--danger);
}
[data-theme="sommet"] .formula-chip.op {
background: none;
color: var(--fg-muted);
font-family: var(--font-mono, monospace);
font-weight: 600;
padding: 3px 1px;
}
[data-theme="sommet"] .formula-chip.fn {
background: var(--illust-lavender, #ede9fe);
border: 1px solid var(--illust-lavender-deep, #c4b5fd);
color: #6b21a8;
font-family: var(--font-mono, monospace);
font-weight: 600;
}
[data-theme="sommet"] .formula-chip-input {
border: none;
background: none;
outline: none;
font-size: var(--text-xs);
color: var(--fg);
width: 24px;
min-width: 24px;
max-width: 120px;
font-family: inherit;
padding: 3px 0;
}
[data-theme="sommet"] .formula-chip-input::-moz-placeholder {
color: var(--fg-muted);
font-size: 14px;
}
[data-theme="sommet"] .formula-chip-input::placeholder {
color: var(--fg-muted);
font-size: 14px;
}
/* Formula autocomplete dropdown */
[data-theme="sommet"] .fx-autocomplete {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.12));
max-height: 220px;
overflow-y: auto;
z-index: 100;
display: none;
}
[data-theme="sommet"] .fx-autocomplete.visible {
display: block;
}
[data-theme="sommet"] .fx-ac-group-label {
padding: 6px 10px 2px;
font-size: 8px;
font-weight: 600;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
[data-theme="sommet"] .fx-ac-item {
padding: 5px 10px;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--fg-secondary);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
[data-theme="sommet"] .fx-ac-item:hover,
[data-theme="sommet"] .fx-ac-item.active {
background: var(--accent-subtle, rgba(37, 99, 235, 0.05));
color: var(--accent);
}
[data-theme="sommet"] .fx-ac-item .fx-ac-label {
font-family: inherit;
font-size: var(--text-xs);
color: var(--fg-muted);
margin-left: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .fx-ac-divider {
height: 1px;
background: var(--edge-subtle, var(--edge));
margin: 2px 0;
}
/* ── SOP step rows ── */
[data-theme="sommet"] .wiz-sop-step {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--edge-subtle, var(--edge));
}
[data-theme="sommet"] .wiz-sop-step:last-child {
border-bottom: none;
}
[data-theme="sommet"] .wiz-sop-dot {
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
border: 1px dashed var(--edge);
background: var(--surface);
font-size: 8px;
font-weight: 600;
color: var(--fg-muted);
}
[data-theme="sommet"] .wiz-sop-name {
font-size: var(--text-xs);
font-weight: 500;
color: var(--fg);
}
[data-theme="sommet"] .wiz-sop-desc {
font-size: 11px;
color: var(--fg-muted);
margin-top: 2px;
line-height: 1.45;
}
[data-theme="sommet"] .wiz-sop-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: var(--radius-sm, 6px);
font-size: 10px;
font-weight: 500;
flex-shrink: 0;
text-decoration: none;
}
/* ── Token insert chips ── */
[data-theme="sommet"] .wiz-token-chip {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: var(--radius-sm, 6px);
font-size: 10px;
font-weight: 500;
border: 1px solid var(--edge);
background: var(--surface-hover);
color: var(--fg-secondary);
cursor: pointer;
font-family: inherit;
transition: all 0.1s;
}
[data-theme="sommet"] .wiz-token-chip:hover {
background: var(--surface);
color: var(--fg);
border-color: var(--edge-strong);
}
/* ── Email chip (CC/BCC) ── */
[data-theme="sommet"] .wiz-email-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
border: 1px solid var(--edge);
background: var(--surface-hover);
font-size: 11px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-email-chip button {
flex-shrink: 0;
color: var(--fg-muted);
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
padding: 0;
margin-left: 2px;
}
[data-theme="sommet"] .wiz-email-chip button:hover {
color: var(--danger);
}
/* ── Inline form row (for CC/BCC inputs) ── */
[data-theme="sommet"] .wiz-inline-field {
display: flex;
align-items: center;
gap: 8px;
}
[data-theme="sommet"] .wiz-inline-field label {
font-size: var(--text-xs);
color: var(--fg-muted);
min-width: 28px;
}
[data-theme="sommet"] .wiz-inline-field input {
flex: 1;
padding: 6px 10px;
border: 1px solid var(--edge);
border-radius: var(--radius-md, 8px);
font-size: var(--text-xs);
font-family: inherit;
color: var(--fg);
background: var(--surface);
}
[data-theme="sommet"] .wiz-inline-field input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
[data-theme="sommet"] .wiz-inline-field input::-moz-placeholder {
color: var(--fg-disabled);
}
[data-theme="sommet"] .wiz-inline-field input::placeholder {
color: var(--fg-disabled);
}
/* ── Drop zone ── */
[data-theme="sommet"] .wiz-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px;
border: 2px dashed var(--edge);
border-radius: var(--radius-md, 8px);
cursor: pointer;
transition: all 0.12s;
text-align: center;
}
[data-theme="sommet"] .wiz-dropzone:hover {
border-color: var(--accent);
background: var(--surface-hover);
}
[data-theme="sommet"] .wiz-dropzone.selected {
border-color: var(--accent);
background: var(--surface-hover);
}
[data-theme="sommet"] .wiz-dropzone svg {
color: var(--fg-muted);
margin-bottom: 6px;
}
[data-theme="sommet"] .wiz-dropzone-label {
font-size: 11px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .wiz-dropzone-hint {
font-size: 10px;
color: var(--fg-muted);
margin-top: 4px;
}
/* ── Empty state (inside cards) ── */
[data-theme="sommet"] .wiz-empty {
padding: 24px 12px;
text-align: center;
font-size: 12px;
color: var(--fg-muted);
}
/* ── Preview sections (wp-*) ── */
[data-theme="sommet"] .wp-section {
margin-bottom: 16px;
}
[data-theme="sommet"] .wp-label {
font-size: 10px;
font-weight: 600;
color: var(--fg-disabled);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 5px;
}
[data-theme="sommet"] .wp-value {
font-size: 13px;
color: var(--fg);
line-height: 1.5;
}
[data-theme="sommet"] .wp-prop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px solid var(--edge-subtle, var(--edge));
}
[data-theme="sommet"] .wp-prop-label {
font-size: 11.5px;
color: var(--fg-disabled);
display: flex;
align-items: center;
gap: 5px;
}
[data-theme="sommet"] .wp-prop-label svg {
width: 12px;
height: 12px;
stroke-width: 1.5;
}
[data-theme="sommet"] .wp-prop-value {
font-size: 11.5px;
color: var(--fg-secondary);
font-weight: 500;
}
[data-theme="sommet"] .wp-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border-radius: var(--radius-sm, 6px);
font-size: 11.5px;
font-weight: 500;
background: var(--surface-hover);
color: var(--fg-secondary);
margin: 2px 2px 2px 0;
}
[data-theme="sommet"] .wp-chip-avatar {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 6px;
font-weight: 700;
color: white;
}
[data-theme="sommet"] .wp-field-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
font-size: 11.5px;
color: var(--fg-secondary);
border-bottom: 1px solid var(--edge-subtle, var(--edge));
}
[data-theme="sommet"] .wp-field-name {
font-weight: 500;
color: var(--fg-secondary);
}
[data-theme="sommet"] .wp-field-type {
font-family: var(--font-mono, monospace);
font-size: 10px;
color: var(--fg-disabled);
}
/* Preview accordion (for groups → response fields) */
[data-theme="sommet"] .wp-accordion {
margin-bottom: 2px;
}
[data-theme="sommet"] .wp-accordion-trigger {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 5px 0;
border: none;
background: none;
font-size: var(--text-sm, 13px);
font-weight: 500;
color: var(--fg-secondary);
cursor: pointer;
font-family: inherit;
}
[data-theme="sommet"] .wp-accordion-trigger:hover {
color: var(--fg);
}
[data-theme="sommet"] .wp-accordion-trigger svg {
flex-shrink: 0;
transition: transform 0.15s;
}
[data-theme="sommet"] .wp-accordion-count {
font-size: var(--text-xs);
font-weight: 400;
color: var(--fg-muted);
margin-left: auto;
}
[data-theme="sommet"] .wp-accordion-body {
padding-left: 16px;
padding-bottom: 4px;
}
[data-theme="sommet"] .wp-message {
padding: 10px 12px;
border-radius: var(--radius-md, 8px);
background: var(--surface);
border: 1px solid var(--edge);
font-size: var(--text-sm, 13px);
color: var(--fg-secondary);
line-height: 1.6;
white-space: pre-wrap;
}
[data-theme="sommet"] .sm-action-card {
display: flex;
flex-direction: column;
width: 400px;
max-height: 400px;
flex-shrink: 0;
padding: 20px;
border-radius: 12px;
border: 1px solid var(--edge);
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: box-shadow 0.15s ease;
}
[data-theme="sommet"] .sm-action-card:hover {
box-shadow: var(--shadow-md);
}
[data-theme="sommet"] .sm-action-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 16px;
}
[data-theme="sommet"] .sm-action-card-body {
flex: 1;
font-size: 14px;
line-height: 1.5;
color: var(--fg);
}
[data-theme="sommet"] .sm-action-card-body .prose {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
[data-theme="sommet"] .sm-action-card-impact {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-size: 14px;
}
[data-theme="sommet"] .sm-action-card-impact-label {
color: var(--fg-secondary);
}
[data-theme="sommet"] .sm-action-card-impact-value {
font-weight: 700;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="sommet"] .sm-action-card-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
}
/* ── Buttons ── */
[data-theme="sommet"] .sm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 12px;
font-size: 14px;
font-weight: 500;
font-family: var(--font-sans);
border-radius: 6px;
cursor: pointer;
transition:
background 0.12s,
border-color 0.12s;
border: 1px solid transparent;
line-height: 1;
}
[data-theme="sommet"] .sm-btn svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
[data-theme="sommet"] .sm-btn-primary {
background: var(--surface-inverse);
color: var(--fg-inverse);
border-color: var(--surface-inverse);
}
[data-theme="sommet"] .sm-btn-primary:hover {
background: #27272a; /* zinc-800 */
}
[data-theme="sommet"] .sm-btn-secondary {
background: var(--surface);
color: var(--fg);
border-color: var(--edge);
}
[data-theme="sommet"] .sm-btn-secondary:hover {
background: var(--surface-hover);
}
[data-theme="sommet"] .sm-btn-danger {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
[data-theme="sommet"] .sm-btn-danger:hover {
background: var(--danger-fg);
}
[data-theme="sommet"] .sm-btn-danger:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Priority badge ── */
[data-theme="sommet"] .sm-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1;
}
[data-theme="sommet"] .sm-badge svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
[data-theme="sommet"] .sm-badge--critical {
background: var(--danger-subtle);
color: var(--danger-fg);
border-color: var(--danger-border);
}
[data-theme="sommet"] .sm-badge--high {
background: var(--warning-subtle);
color: var(--warning-fg);
border-color: var(--warning-border);
}
[data-theme="sommet"] .sm-badge--medium {
background: var(--warning-subtle);
color: var(--warning-fg);
border-color: var(--warning-border);
}
[data-theme="sommet"] .sm-badge--low {
background: var(--surface-hover);
color: var(--fg-secondary);
border-color: var(--edge);
}
/* ── Record chip (shipment / order links) ── */
[data-theme="sommet"] .sm-chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
[data-theme="sommet"] .sm-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
transition: box-shadow 0.12s;
}
[data-theme="sommet"] .sm-chip:hover {
box-shadow: var(--shadow-sm);
}
[data-theme="sommet"] .sm-chip svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
[data-theme="sommet"] .sm-chip--shipment {
background: var(--accent-subtle);
color: var(--accent);
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.15);
}
[data-theme="sommet"] .sm-chip--order {
background: var(--surface-hover);
color: var(--fg-secondary);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* ── Dismiss modal ── */
[data-theme="sommet"] .sm-modal-backdrop {
background: var(--surface);
opacity: 0.7;
}
[data-theme="sommet"] .sm-modal-panel {
background: var(--surface);
border: 1px solid var(--edge);
box-shadow: var(--shadow-panel);
}
[data-theme="sommet"] .sm-modal-icon-danger {
color: var(--danger);
}
[data-theme="sommet"] .sm-modal-title {
color: var(--fg);
font-weight: 700;
line-height: 1;
}
[data-theme="sommet"] .sm-modal-subtitle {
font-size: 12px;
color: var(--fg-secondary);
}
[data-theme="sommet"] .sm-modal-body-text {
color: var(--fg-secondary);
padding-left: 8px;
margin-bottom: 24px;
}
[data-theme="sommet"] .sm-modal-footer {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--edge);
}
[data-theme="sommet"] .sm-modal-footer .sm-btn {
flex: 1;
justify-content: center;
}
/* ── Warning callout ── */
[data-theme="sommet"] .sm-callout-warning {
display: flex;
gap: 8px;
padding: 12px;
border-radius: 6px;
background: var(--warning-subtle);
border: 1px solid var(--warning-border);
font-size: 12px;
color: var(--warning-fg);
}
[data-theme="sommet"] .sm-callout-warning svg {
flex-shrink: 0;
}
[data-theme="sommet"] .sm-callout-warning-title {
font-weight: 500;
margin-bottom: 4px;
}
[data-theme="sommet"] .sm-callout-warning-list {
list-style: disc;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
/* ── Misc text helpers (linter-safe, no inline style color) ── */
[data-theme="sommet"] .sm-text-link {
font-size: 11px;
color: var(--accent);
background: none;
border: none;
cursor: pointer;
padding-left: 4px;
}
[data-theme="sommet"] .sm-text-link:hover {
text-decoration: underline;
}
[data-theme="sommet"] .sm-text-empty {
font-size: 12px;
color: var(--fg-tertiary);
font-style: italic;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/* ! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: var(--font-mono), ui-monospace, monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #2563eb;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #6b7280;
opacity: 1;
}
input::placeholder,textarea::placeholder {
color: #6b7280;
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-date-and-time-value {
min-height: 1.5em;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
padding-top: 0;
padding-bottom: 0;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[multiple],[size]:where(select:not([size="1"])) {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
-webkit-print-color-adjust: unset;
print-color-adjust: unset;
}
[type='checkbox'],[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #2563eb;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
[type='checkbox'] {
border-radius: 0px;
}
[type='radio'] {
border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,[type='radio']:checked {
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[type='checkbox']:checked {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[type='radio']:checked {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
border-color: transparent;
background-color: currentColor;
}
[type='checkbox']:indeterminate {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
@media (forced-colors: active) {
[type='checkbox']:indeterminate {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}
[type='file'] {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type='file']:focus {
outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color;
}
:root {
--font-sans:
"Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
}
/* Define geistsans font face properly */
@font-face {
font-family: "Geist Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../../fonts/geistsans.woff2") format("woff2");
}
.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
}
* {
border-color: hsl(var(--border));
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-feature-settings:
"rlig" 1,
"calt" 1;
}
/* generic 'card' div used across the entire app */
.theme-card {
margin-left: auto;
margin-right: auto;
max-width: 24rem;
border-radius: var(--radius);
border-width: 1px;
background-color: hsl(var(--card));
padding: 1.5rem;
color: hsl(var(--card-foreground));
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.theme-card .theme-card-headline {
font-size: 1.5rem;
line-height: 2rem;
}
.theme-card .theme-card-headline {
font-weight: 600;
}
.theme-card .theme-card-headline {
line-height: 1;
}
.theme-card .theme-card-headline {
letter-spacing: -0.5px;
}
.theme-card .theme-card-subheadline {
margin-top: 0.375rem;
}
.theme-card .theme-card-subheadline {
font-size: 0.875rem;
line-height: 1.25rem;
}
.theme-card .theme-card-subheadline {
color: hsl(var(--muted-foreground));
}
/* wrapper div used in Django genereated forms to ensure styling is applied */
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
display: flex;
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
height: 2.5rem;
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
width: 100%;
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
border-radius: calc(var(--radius) - 2px);
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
border-width: 1px;
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
border-color: hsl(var(--input));
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
background-color: hsl(var(--background));
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
font-size: 0.875rem;
line-height: 1.25rem;
}
.fieldWrapper input[type="text"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="email"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="url"],
.fieldWrapper input[type="tel"] {
--tw-ring-offset-color: hsl(var(--background));
}
.fieldWrapper input[type="text"]::file-selector-button,
.fieldWrapper input[type="password"]::file-selector-button,
.fieldWrapper input[type="email"]::file-selector-button,
.fieldWrapper input[type="number"]::file-selector-button,
.fieldWrapper input[type="url"]::file-selector-button,
.fieldWrapper input[type="tel"]::file-selector-button {
border-width: 0px;
}
.fieldWrapper input[type="text"]::file-selector-button,
.fieldWrapper input[type="password"]::file-selector-button,
.fieldWrapper input[type="email"]::file-selector-button,
.fieldWrapper input[type="number"]::file-selector-button,
.fieldWrapper input[type="url"]::file-selector-button,
.fieldWrapper input[type="tel"]::file-selector-button {
background-color: transparent;
}
.fieldWrapper input[type="text"]::file-selector-button,
.fieldWrapper input[type="password"]::file-selector-button,
.fieldWrapper input[type="email"]::file-selector-button,
.fieldWrapper input[type="number"]::file-selector-button,
.fieldWrapper input[type="url"]::file-selector-button,
.fieldWrapper input[type="tel"]::file-selector-button {
font-size: 0.875rem;
line-height: 1.25rem;
}
.fieldWrapper input[type="text"]::file-selector-button,
.fieldWrapper input[type="password"]::file-selector-button,
.fieldWrapper input[type="email"]::file-selector-button,
.fieldWrapper input[type="number"]::file-selector-button,
.fieldWrapper input[type="url"]::file-selector-button,
.fieldWrapper input[type="tel"]::file-selector-button {
font-weight: 500;
}
.fieldWrapper input[type="text"]::-moz-placeholder, .fieldWrapper input[type="password"]::-moz-placeholder, .fieldWrapper input[type="email"]::-moz-placeholder, .fieldWrapper input[type="number"]::-moz-placeholder, .fieldWrapper input[type="url"]::-moz-placeholder, .fieldWrapper input[type="tel"]::-moz-placeholder {
color: hsl(var(--muted-foreground));
}
.fieldWrapper input[type="text"]::placeholder,
.fieldWrapper input[type="password"]::placeholder,
.fieldWrapper input[type="email"]::placeholder,
.fieldWrapper input[type="number"]::placeholder,
.fieldWrapper input[type="url"]::placeholder,
.fieldWrapper input[type="tel"]::placeholder {
color: hsl(var(--muted-foreground));
}
.fieldWrapper input[type="text"]:focus-visible,
.fieldWrapper input[type="password"]:focus-visible,
.fieldWrapper input[type="email"]:focus-visible,
.fieldWrapper input[type="number"]:focus-visible,
.fieldWrapper input[type="url"]:focus-visible,
.fieldWrapper input[type="tel"]:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
}
.fieldWrapper input[type="text"]:focus-visible,
.fieldWrapper input[type="password"]:focus-visible,
.fieldWrapper input[type="email"]:focus-visible,
.fieldWrapper input[type="number"]:focus-visible,
.fieldWrapper input[type="url"]:focus-visible,
.fieldWrapper input[type="tel"]:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.fieldWrapper input[type="text"]:focus-visible,
.fieldWrapper input[type="password"]:focus-visible,
.fieldWrapper input[type="email"]:focus-visible,
.fieldWrapper input[type="number"]:focus-visible,
.fieldWrapper input[type="url"]:focus-visible,
.fieldWrapper input[type="tel"]:focus-visible {
--tw-ring-color: hsl(var(--ring));
}
.fieldWrapper input[type="text"]:focus-visible,
.fieldWrapper input[type="password"]:focus-visible,
.fieldWrapper input[type="email"]:focus-visible,
.fieldWrapper input[type="number"]:focus-visible,
.fieldWrapper input[type="url"]:focus-visible,
.fieldWrapper input[type="tel"]:focus-visible {
--tw-ring-offset-width: 0px;
}
.fieldWrapper input[type="text"]:disabled,
.fieldWrapper input[type="password"]:disabled,
.fieldWrapper input[type="email"]:disabled,
.fieldWrapper input[type="number"]:disabled,
.fieldWrapper input[type="url"]:disabled,
.fieldWrapper input[type="tel"]:disabled {
cursor: not-allowed;
}
.fieldWrapper input[type="text"]:disabled,
.fieldWrapper input[type="password"]:disabled,
.fieldWrapper input[type="email"]:disabled,
.fieldWrapper input[type="number"]:disabled,
.fieldWrapper input[type="url"]:disabled,
.fieldWrapper input[type="tel"]:disabled {
opacity: 0.5;
}
.fieldWrapper select {
margin: 0px;
}
.fieldWrapper select {
display: block;
}
.fieldWrapper select {
height: 2.5rem;
}
.fieldWrapper select {
width: 100%;
}
.fieldWrapper select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.fieldWrapper select {
border-radius: 0.25rem;
}
.fieldWrapper select {
border-width: 1px;
}
.fieldWrapper select {
border-style: solid;
}
.fieldWrapper select {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.fieldWrapper select {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fieldWrapper select {
background-clip: padding-box;
}
.fieldWrapper select {
background-repeat: no-repeat;
}
.fieldWrapper select {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fieldWrapper select {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.fieldWrapper select {
font-size: 0.875rem;
line-height: 1.25rem;
}
.fieldWrapper select {
font-size: 1rem;
line-height: 1.5rem;
}
.fieldWrapper select {
font-weight: 400;
}
.fieldWrapper select {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.fieldWrapper select {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.fieldWrapper select {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fieldWrapper select {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fieldWrapper select:focus {
border-color: hsl(var(--ring));
}
.fieldWrapper select:focus {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fieldWrapper select:focus {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.fieldWrapper select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.fieldWrapper select:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.fieldWrapper select:focus {
--tw-ring-color: hsl(var(--ring));
}
.fieldWrapper select:focus {
--tw-ring-offset-width: 0px;
}
.fieldWrapper select:disabled {
cursor: not-allowed;
}
.fieldWrapper select:disabled {
opacity: 0.5;
}
.fieldWrapper div.choices__inner {
border-radius: 0.25rem;
}
.fieldWrapper div.choices__inner {
border-width: 1px;
}
.fieldWrapper div.choices__inner {
border-style: solid;
}
.fieldWrapper div.choices__inner {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.fieldWrapper div.choices__inner {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fieldWrapper div.choices__inner {
font-size: 0.875rem;
line-height: 1.25rem;
}
.fieldWrapper .help,
.fieldWrapper ul {
font-size: 0.75rem;
line-height: 1rem;
}
.fieldWrapper .help,
.fieldWrapper ul {
color: hsl(var(--muted-foreground));
}
.fieldWrapper ul.errorlist {
position: absolute;
}
.fieldWrapper ul.errorlist {
right: 0px;
}
.fieldWrapper ul.errorlist {
list-style-type: none;
}
.fieldWrapper ul.errorlist {
padding-left: 0px;
}
.fieldWrapper ul.errorlist {
font-weight: 500;
}
.fieldWrapper ul.errorlist {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.fieldWrapper ul.errorlist {
bottom: -14px;
}
.fieldWrapper .help-block {
font-size: 0.75rem;
line-height: 1rem;
}
.fieldWrapper .help-block {
font-weight: 500;
}
.fieldWrapper .help-block {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
/* Error state styling for form fields */
.fieldWrapper {
position: relative;
}
.fieldWrapper.has-error input[type="text"],
.fieldWrapper.has-error input[type="password"],
.fieldWrapper.has-error input[type="email"],
.fieldWrapper.has-error input[type="number"],
.fieldWrapper.has-error input[type="url"],
.fieldWrapper.has-error input[type="tel"],
.fieldWrapper.has-error select {
position: relative;
}
.fieldWrapper.has-error input[type="text"],
.fieldWrapper.has-error input[type="password"],
.fieldWrapper.has-error input[type="email"],
.fieldWrapper.has-error input[type="number"],
.fieldWrapper.has-error input[type="url"],
.fieldWrapper.has-error input[type="tel"],
.fieldWrapper.has-error select {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.fieldWrapper.has-error input[type="text"]:focus,
.fieldWrapper.has-error input[type="password"]:focus,
.fieldWrapper.has-error input[type="email"]:focus,
.fieldWrapper.has-error input[type="number"]:focus,
.fieldWrapper.has-error input[type="url"]:focus,
.fieldWrapper.has-error input[type="tel"]:focus,
.fieldWrapper.has-error select:focus {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.fieldWrapper.has-error input[type="text"]:focus,
.fieldWrapper.has-error input[type="password"]:focus,
.fieldWrapper.has-error input[type="email"]:focus,
.fieldWrapper.has-error input[type="number"]:focus,
.fieldWrapper.has-error input[type="url"]:focus,
.fieldWrapper.has-error input[type="tel"]:focus,
.fieldWrapper.has-error select:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}
.navigation {
display: grid;
cursor: pointer;
align-items: flex-start;
padding: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
}
.navigation .navigation-menu {
display: flex;
}
.navigation .navigation-menu {
flex-direction: column;
}
.navigation .navigation-menu {
gap: 0.25rem;
}
.navigation .navigation-menu {
border-left-width: 1px;
}
.navigation .navigation-menu {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.navigation .navigation-item {
display: flex;
}
.navigation .navigation-item {
cursor: pointer;
}
.navigation .navigation-item {
align-items: center;
}
.navigation .navigation-item {
gap: 0.5rem;
}
.navigation .navigation-item {
border-radius: var(--radius);
}
.navigation .navigation-item {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.navigation .navigation-item {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.navigation .navigation-item {
color: hsl(var(--muted-foreground));
}
.navigation .navigation-item {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.navigation .navigation-item:hover {
background-color: hsl(var(--muted) / 1);
}
.navigation .navigation-item:hover {
color: hsl(var(--primary));
}
.navigation .navigation-item svg path {
stroke: currentColor;
}
.colored-icon {
display: flex;
height: 1.25rem;
width: 1.25rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: calc(var(--radius) - 2px);
border-width: 1px;
border-color: transparent;
background-color: hsl(var(--primary));
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-size: 0.5625rem;
font-weight: 600;
color: hsl(var(--primary-foreground));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.colored-icon:hover {
background-color: hsl(var(--primary) / 0.8);
}
.colored-icon:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: hsl(var(--ring));
--tw-ring-offset-width: 2px;
}
.content-px {
padding-left: 24px;
padding-right: 24px;
}
.content-py {
padding-top: 24px;
padding-bottom: 24px;
}
/* AG-Grid Styles */
.ag-theme-quartz {
--ag-borders: none;
--ag-wrapper-border-radius: none;
--ag-odd-row-background-color: #e4e4e71a;
--ag-column-first: #333;
}
.ag-theme-quartz .ag-even-column {
text-align: right;
}
.ag-theme-quartz .ag-odd-column {
background-color: hsl(var(--muted) / 0.4);
}
.ag-theme-quartz .ag-odd-column {
text-align: right;
}
.ag-full-screen {
height: calc(100vh - 90px);
}
/* Add some basic styles for the skeleton loader */
.skeleton {
background: #ddd;
height: 1em;
width: 100%;
border-radius: 4px;
animation: pulse 1.5s infinite;
}
.skeleton.short {
width: 50%;
}
.skeleton.medium {
width: 75%;
}
.skeleton.long {
width: 100%;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
/* JSON Viewer Styles */
.json-item {
line-height: 1.5;
}
.\!container {
width: 100% !important;
margin-right: auto !important;
margin-left: auto !important;
padding-right: 2rem !important;
padding-left: 2rem !important;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
padding-left: 2rem;
}
@media (min-width: 1400px) {
.\!container {
max-width: 1400px !important;
}
.container {
max-width: 1400px;
}
}
.form-input,.form-textarea,.form-select,.form-multiselect {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}
.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #2563eb;
}
.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
color: #6b7280;
opacity: 1;
}
.form-input::placeholder,.form-textarea::placeholder {
color: #6b7280;
opacity: 1;
}
.form-input::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
.form-input::-webkit-date-and-time-value {
min-height: 1.5em;
text-align: inherit;
}
.form-input::-webkit-datetime-edit {
display: inline-flex;
}
.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
padding-top: 0;
padding-bottom: 0;
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.form-select:where([size]:not([size="1"])) {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
-webkit-print-color-adjust: unset;
print-color-adjust: unset;
}
.prose {
color: #1f1f1f;
max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: #27426a;
text-decoration: underline;
font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: #1f1f1f;
font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-inline-start-width: 0.25rem;
border-inline-start-color: var(--tw-prose-quote-borders);
quotes: "\201C""\201D""\2018""\2019";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-inline-start: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: #1f1f1f;
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 900;
color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: #1f1f1f;
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 800;
color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: #1f1f1f;
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: #1f1f1f;
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: 0.875em;
border-radius: 0.3125rem;
padding-top: 0.1875em;
padding-inline-end: 0.375em;
padding-bottom: 0.1875em;
padding-inline-start: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: #555555;
font-weight: 600;
font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: 0.375rem;
padding-top: 0.8571429em;
padding-inline-end: 1.1428571em;
padding-bottom: 0.8571429em;
padding-inline-start: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: 0.875em;
line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: 0.5714286em;
padding-bottom: 0.5714286em;
padding-inline-start: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
text-align: start;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-captions);
font-size: 0.875em;
line-height: 1.4285714;
margin-top: 0.8571429em;
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
padding-inline-start: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-end: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-top: 0.5714286em;
padding-inline-end: 0.5714286em;
padding-bottom: 0.5714286em;
padding-inline-start: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-end: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 0;
}
.prose :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: #1f1f1f;
}
.prose :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: #1f1f1f;
}
.prose-sm {
font-size: 0.875rem;
line-height: 1.7142857;
}
.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.1428571em;
margin-bottom: 1.1428571em;
}
.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 1.2857143em;
line-height: 1.5555556;
margin-top: 0.8888889em;
margin-bottom: 0.8888889em;
}
.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.3333333em;
margin-bottom: 1.3333333em;
padding-inline-start: 1.1111111em;
}
.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 2.1428571em;
margin-top: 0;
margin-bottom: 0.8em;
line-height: 1.2;
}
.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 1.4285714em;
margin-top: 1.6em;
margin-bottom: 0.8em;
line-height: 1.4;
}
.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 1.2857143em;
margin-top: 1.5555556em;
margin-bottom: 0.4444444em;
line-height: 1.5555556;
}
.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.4285714em;
margin-bottom: 0.5714286em;
line-height: 1.4285714;
}
.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
}
.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
}
.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
}
.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 0.8571429em;
border-radius: 0.3125rem;
padding-top: 0.1428571em;
padding-inline-end: 0.3571429em;
padding-bottom: 0.1428571em;
padding-inline-start: 0.3571429em;
}
.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 0.8571429em;
}
.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 0.9em;
}
.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 0.8888889em;
}
.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 0.8571429em;
line-height: 1.6666667;
margin-top: 1.6666667em;
margin-bottom: 1.6666667em;
border-radius: 0.25rem;
padding-top: 0.6666667em;
padding-inline-end: 1em;
padding-bottom: 0.6666667em;
padding-inline-start: 1em;
}
.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.1428571em;
margin-bottom: 1.1428571em;
padding-inline-start: 1.5714286em;
}
.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.1428571em;
margin-bottom: 1.1428571em;
padding-inline-start: 1.5714286em;
}
.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.2857143em;
margin-bottom: 0.2857143em;
}
.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0.4285714em;
}
.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0.4285714em;
}
.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5714286em;
margin-bottom: 0.5714286em;
}
.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.1428571em;
}
.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5714286em;
margin-bottom: 0.5714286em;
}
.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.1428571em;
margin-bottom: 1.1428571em;
}
.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.1428571em;
}
.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.2857143em;
padding-inline-start: 1.5714286em;
}
.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2.8571429em;
margin-bottom: 2.8571429em;
}
.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 0.8571429em;
line-height: 1.5;
}
.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-end: 1em;
padding-bottom: 0.6666667em;
padding-inline-start: 1em;
}
.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0;
}
.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-end: 0;
}
.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-top: 0.6666667em;
padding-inline-end: 1em;
padding-bottom: 0.6666667em;
padding-inline-start: 1em;
}
.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0;
}
.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-end: 0;
}
.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
}
.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-size: 0.8571429em;
line-height: 1.3333333;
margin-top: 0.6666667em;
}
.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.-bottom-0\.5 {
bottom: -0.125rem;
}
.-bottom-1 {
bottom: -0.25rem;
}
.-left-\[13px\] {
left: -13px;
}
.-left-\[23px\] {
left: -23px;
}
.-right-0\.5 {
right: -0.125rem;
}
.-right-1 {
right: -0.25rem;
}
.-top-0\.5 {
top: -0.125rem;
}
.-top-5 {
top: -1.25rem;
}
.bottom-0 {
bottom: 0px;
}
.bottom-1 {
bottom: 0.25rem;
}
.bottom-2 {
bottom: 0.5rem;
}
.bottom-3 {
bottom: 0.75rem;
}
.bottom-4 {
bottom: 1rem;
}
.bottom-6 {
bottom: 1.5rem;
}
.bottom-\[-12px\] {
bottom: -12px;
}
.bottom-\[-2px\] {
bottom: -2px;
}
.bottom-\[-7px\] {
bottom: -7px;
}
.bottom-\[2px\] {
bottom: 2px;
}
.bottom-\[44px\] {
bottom: 44px;
}
.bottom-\[5px\] {
bottom: 5px;
}
.bottom-full {
bottom: 100%;
}
.left-0 {
left: 0px;
}
.left-0\.5 {
left: 0.125rem;
}
.left-1\/2 {
left: 50%;
}
.left-2 {
left: 0.5rem;
}
.left-3 {
left: 0.75rem;
}
.left-4 {
left: 1rem;
}
.left-6 {
left: 1.5rem;
}
.left-\[-15px\] {
left: -15px;
}
.left-\[10px\] {
left: 10px;
}
.left-\[11px\] {
left: 11px;
}
.left-\[15px\] {
left: 15px;
}
.left-\[18px\] {
left: 18px;
}
.left-\[20px\] {
left: 20px;
}
.left-\[235px\] {
left: 235px;
}
.left-\[6px\] {
left: 6px;
}
.right-0 {
right: 0px;
}
.right-1\.5 {
right: 0.375rem;
}
.right-2 {
right: 0.5rem;
}
.right-3 {
right: 0.75rem;
}
.right-4 {
right: 1rem;
}
.right-5 {
right: 1.25rem;
}
.right-6 {
right: 1.5rem;
}
.right-\[10px\] {
right: 10px;
}
.right-\[3px\] {
right: 3px;
}
.right-\[5px\] {
right: 5px;
}
.right-full {
right: 100%;
}
.top-0 {
top: 0px;
}
.top-0\.5 {
top: 0.125rem;
}
.top-1 {
top: 0.25rem;
}
.top-1\.5 {
top: 0.375rem;
}
.top-1\/2 {
top: 50%;
}
.top-2 {
top: 0.5rem;
}
.top-2\.5 {
top: 0.625rem;
}
.top-20 {
top: 5rem;
}
.top-3 {
top: 0.75rem;
}
.top-4 {
top: 1rem;
}
.top-5 {
top: 1.25rem;
}
.top-6 {
top: 1.5rem;
}
.top-\[-24px\] {
top: -24px;
}
.top-\[10px\] {
top: 10px;
}
.top-\[15px\] {
top: 15px;
}
.top-\[1px\] {
top: 1px;
}
.top-\[22px\] {
top: 22px;
}
.top-\[32px\] {
top: 32px;
}
.top-full {
top: 100%;
}
.z-0 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
.z-\[1000\] {
z-index: 1000;
}
.z-\[1001\] {
z-index: 1001;
}
.z-\[100\] {
z-index: 100;
}
.z-\[101\] {
z-index: 101;
}
.z-\[102\] {
z-index: 102;
}
.z-\[110\] {
z-index: 110;
}
.z-\[120\] {
z-index: 120;
}
.z-\[1\] {
z-index: 1;
}
.z-\[200\] {
z-index: 200;
}
.z-\[2\] {
z-index: 2;
}
.z-\[500\] {
z-index: 500;
}
.z-\[50\] {
z-index: 50;
}
.z-\[51\] {
z-index: 51;
}
.z-\[52\] {
z-index: 52;
}
.z-\[60\] {
z-index: 60;
}
.z-\[70\] {
z-index: 70;
}
.z-\[98\] {
z-index: 98;
}
.z-\[9998\] {
z-index: 9998;
}
.z-\[999999\] {
z-index: 999999;
}
.z-\[9999\] {
z-index: 9999;
}
.z-\[999\] {
z-index: 999;
}
.z-\[99\] {
z-index: 99;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-10 {
grid-column: span 10 / span 10;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-5 {
grid-column: span 5 / span 5;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.col-span-7 {
grid-column: span 7 / span 7;
}
.col-span-8 {
grid-column: span 8 / span 8;
}
.row-span-2 {
grid-row: span 2 / span 2;
}
.m-0 {
margin: 0px;
}
.m-3 {
margin: 0.75rem;
}
.-mx-1 {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.-mx-4 {
margin-left: -1rem;
margin-right: -1rem;
}
.-mx-6 {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.-mx-px {
margin-left: -1px;
margin-right: -1px;
}
.-my-1 {
margin-top: -0.25rem;
margin-bottom: -0.25rem;
}
.-my-2 {
margin-top: -0.5rem;
margin-bottom: -0.5rem;
}
.mx-0\.5 {
margin-left: 0.125rem;
margin-right: 0.125rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-2\.5 {
margin-top: 0.625rem;
margin-bottom: 0.625rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-\[10px\] {
margin-top: 10px;
margin-bottom: 10px;
}
.-mb-0\.5 {
margin-bottom: -0.125rem;
}
.-mb-4 {
margin-bottom: -1rem;
}
.-mb-px {
margin-bottom: -1px;
}
.-ml-0\.5 {
margin-left: -0.125rem;
}
.-ml-1 {
margin-left: -0.25rem;
}
.-ml-3 {
margin-left: -0.75rem;
}
.-mr-0\.5 {
margin-right: -0.125rem;
}
.-mr-px {
margin-right: -1px;
}
.-mt-0\.5 {
margin-top: -0.125rem;
}
.-mt-4 {
margin-top: -1rem;
}
.-mt-px {
margin-top: -1px;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-0\.5 {
margin-bottom: 0.125rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-1\.5 {
margin-bottom: 0.375rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-2\.5 {
margin-bottom: 0.625rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-\[3px\] {
margin-bottom: 3px;
}
.mb-\[6px\] {
margin-bottom: 6px;
}
.mb-px {
margin-bottom: 1px;
}
.ml-0\.5 {
margin-left: 0.125rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-1\.5 {
margin-left: 0.375rem;
}
.ml-11 {
margin-left: 2.75rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.ml-7 {
margin-left: 1.75rem;
}
.ml-\[-78px\] {
margin-left: -78px;
}
.ml-\[78px\] {
margin-left: 78px;
}
.ml-auto {
margin-left: auto;
}
.mr-0\.5 {
margin-right: 0.125rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-5 {
margin-right: 1.25rem;
}
.mr-\[0\.5\] {
margin-right: 0.5;
}
.mr-auto {
margin-right: auto;
}
.ms-2 {
margin-inline-start: 0.5rem;
}
.mt-0 {
margin-top: 0px;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-1\.5 {
margin-top: 0.375rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-\[1px\] {
margin-top: 1px;
}
.mt-\[2px\] {
margin-top: 2px;
}
.mt-\[3px\] {
margin-top: 3px;
}
.mt-\[8px\] {
margin-top: 8px;
}
.mt-auto {
margin-top: auto;
}
.mt-px {
margin-top: 1px;
}
.box-border {
box-sizing: border-box;
}
.box-content {
box-sizing: content-box;
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.flow-root {
display: flow-root;
}
.grid {
display: grid;
}
.contents {
display: contents;
}
.hidden {
display: none;
}
.size-3\.5 {
width: 0.875rem;
height: 0.875rem;
}
.size-4 {
width: 1rem;
height: 1rem;
}
.size-5 {
width: 1.25rem;
height: 1.25rem;
}
.h-0 {
height: 0px;
}
.h-0\.5 {
height: 0.125rem;
}
.h-1 {
height: 0.25rem;
}
.h-1\.5 {
height: 0.375rem;
}
.h-10 {
height: 2.5rem;
}
.h-11 {
height: 2.75rem;
}
.h-12 {
height: 3rem;
}
.h-14 {
height: 3.5rem;
}
.h-16 {
height: 4rem;
}
.h-2 {
height: 0.5rem;
}
.h-2\.5 {
height: 0.625rem;
}
.h-20 {
height: 5rem;
}
.h-24 {
height: 6rem;
}
.h-28 {
height: 7rem;
}
.h-3 {
height: 0.75rem;
}
.h-3\.5 {
height: 0.875rem;
}
.h-32 {
height: 8rem;
}
.h-4 {
height: 1rem;
}
.h-40 {
height: 10rem;
}
.h-5 {
height: 1.25rem;
}
.h-6 {
height: 1.5rem;
}
.h-64 {
height: 16rem;
}
.h-7 {
height: 1.75rem;
}
.h-8 {
height: 2rem;
}
.h-9 {
height: 2.25rem;
}
.h-\[100dvh\] {
height: 100dvh;
}
.h-\[10px\] {
height: 10px;
}
.h-\[12px\] {
height: 12px;
}
.h-\[14px\] {
height: 14px;
}
.h-\[18px\] {
height: 18px;
}
.h-\[1px\] {
height: 1px;
}
.h-\[200px\] {
height: 200px;
}
.h-\[22px\] {
height: 22px;
}
.h-\[24px\] {
height: 24px;
}
.h-\[250px\] {
height: 250px;
}
.h-\[26px\] {
height: 26px;
}
.h-\[28px\] {
height: 28px;
}
.h-\[30px\] {
height: 30px;
}
.h-\[32px\] {
height: 32px;
}
.h-\[3px\] {
height: 3px;
}
.h-\[400px\] {
height: 400px;
}
.h-\[40px\] {
height: 40px;
}
.h-\[42px\] {
height: 42px;
}
.h-\[44px\] {
height: 44px;
}
.h-\[450px\] {
height: 450px;
}
.h-\[500px\] {
height: 500px;
}
.h-\[530px\] {
height: 530px;
}
.h-\[57px\] {
height: 57px;
}
.h-\[5px\] {
height: 5px;
}
.h-\[60px\] {
height: 60px;
}
.h-\[60vh\] {
height: 60vh;
}
.h-\[6px\] {
height: 6px;
}
.h-\[75px\] {
height: 75px;
}
.h-\[7px\] {
height: 7px;
}
.h-\[80px\] {
height: 80px;
}
.h-\[88vh\] {
height: 88vh;
}
.h-\[95vh\] {
height: 95vh;
}
.h-\[calc\(100\%-25px\)\] {
height: calc(100% - 25px);
}
.h-\[calc\(100\%-30px\)\] {
height: calc(100% - 30px);
}
.h-\[calc\(100vh-10rem\)\] {
height: calc(100vh - 10rem);
}
.h-\[calc\(100vh-theme\(spacing\.32\)\)\] {
height: calc(100vh - 8rem);
}
.h-auto {
height: auto;
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.h-screen {
height: 100vh;
}
.max-h-0 {
max-height: 0px;
}
.max-h-24 {
max-height: 6rem;
}
.max-h-32 {
max-height: 8rem;
}
.max-h-40 {
max-height: 10rem;
}
.max-h-48 {
max-height: 12rem;
}
.max-h-52 {
max-height: 13rem;
}
.max-h-56 {
max-height: 14rem;
}
.max-h-64 {
max-height: 16rem;
}
.max-h-72 {
max-height: 18rem;
}
.max-h-96 {
max-height: 24rem;
}
.max-h-\[120px\] {
max-height: 120px;
}
.max-h-\[125px\] {
max-height: 125px;
}
.max-h-\[180px\] {
max-height: 180px;
}
.max-h-\[280px\] {
max-height: 280px;
}
.max-h-\[320px\] {
max-height: 320px;
}
.max-h-\[400px\] {
max-height: 400px;
}
.max-h-\[480px\] {
max-height: 480px;
}
.max-h-\[500px\] {
max-height: 500px;
}
.max-h-\[70vh\] {
max-height: 70vh;
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.max-h-\[90vh\] {
max-height: 90vh;
}
.max-h-\[calc\(100vh-18rem\)\] {
max-height: calc(100vh - 18rem);
}
.max-h-\[calc\(100vh-4rem\)\] {
max-height: calc(100vh - 4rem);
}
.max-h-\[calc\(80vh\)\] {
max-height: calc(80vh);
}
.max-h-full {
max-height: 100%;
}
.max-h-screen {
max-height: 100vh;
}
.min-h-0 {
min-height: 0px;
}
.min-h-\[10\%\] {
min-height: 10%;
}
.min-h-\[200px\] {
min-height: 200px;
}
.min-h-\[25\%\] {
min-height: 25%;
}
.min-h-\[250px\] {
min-height: 250px;
}
.min-h-\[25vh\] {
min-height: 25vh;
}
.min-h-\[26px\] {
min-height: 26px;
}
.min-h-\[28px\] {
min-height: 28px;
}
.min-h-\[300px\] {
min-height: 300px;
}
.min-h-\[320px\] {
min-height: 320px;
}
.min-h-\[32px\] {
min-height: 32px;
}
.min-h-\[34px\] {
min-height: 34px;
}
.min-h-\[36px\] {
min-height: 36px;
}
.min-h-\[370px\] {
min-height: 370px;
}
.min-h-\[38px\] {
min-height: 38px;
}
.min-h-\[400px\] {
min-height: 400px;
}
.min-h-\[40px\] {
min-height: 40px;
}
.min-h-\[5\%\] {
min-height: 5%;
}
.min-h-\[500px\] {
min-height: 500px;
}
.min-h-\[50px\] {
min-height: 50px;
}
.min-h-\[570px\] {
min-height: 570px;
}
.min-h-\[60px\] {
min-height: 60px;
}
.min-h-\[60vh\] {
min-height: 60vh;
}
.min-h-\[6rem\] {
min-height: 6rem;
}
.min-h-\[75px\] {
min-height: 75px;
}
.min-h-\[80px\] {
min-height: 80px;
}
.min-h-\[88px\] {
min-height: 88px;
}
.min-h-\[90px\] {
min-height: 90px;
}
.min-h-full {
min-height: 100%;
}
.min-h-screen {
min-height: 100vh;
}
.w-0 {
width: 0px;
}
.w-1 {
width: 0.25rem;
}
.w-1\.5 {
width: 0.375rem;
}
.w-1\/12 {
width: 8.333333%;
}
.w-1\/2 {
width: 50%;
}
.w-1\/3 {
width: 33.333333%;
}
.w-1\/4 {
width: 25%;
}
.w-10 {
width: 2.5rem;
}
.w-11 {
width: 2.75rem;
}
.w-12 {
width: 3rem;
}
.w-14 {
width: 3.5rem;
}
.w-16 {
width: 4rem;
}
.w-2 {
width: 0.5rem;
}
.w-2\.5 {
width: 0.625rem;
}
.w-2\/12 {
width: 16.666667%;
}
.w-2\/3 {
width: 66.666667%;
}
.w-20 {
width: 5rem;
}
.w-24 {
width: 6rem;
}
.w-28 {
width: 7rem;
}
.w-3 {
width: 0.75rem;
}
.w-3\.5 {
width: 0.875rem;
}
.w-3\/12 {
width: 25%;
}
.w-3\/4 {
width: 75%;
}
.w-32 {
width: 8rem;
}
.w-36 {
width: 9rem;
}
.w-4 {
width: 1rem;
}
.w-4\/12 {
width: 33.333333%;
}
.w-4\/5 {
width: 80%;
}
.w-40 {
width: 10rem;
}
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
.w-5\/6 {
width: 83.333333%;
}
.w-52 {
width: 13rem;
}
.w-56 {
width: 14rem;
}
.w-6 {
width: 1.5rem;
}
.w-60 {
width: 15rem;
}
.w-64 {
width: 16rem;
}
.w-7 {
width: 1.75rem;
}
.w-72 {
width: 18rem;
}
.w-8 {
width: 2rem;
}
.w-9 {
width: 2.25rem;
}
.w-96 {
width: 24rem;
}
.w-\[100px\] {
width: 100px;
}
.w-\[120px\] {
width: 120px;
}
.w-\[12px\] {
width: 12px;
}
.w-\[14px\] {
width: 14px;
}
.w-\[150px\] {
width: 150px;
}
.w-\[17rem\] {
width: 17rem;
}
.w-\[180px\] {
width: 180px;
}
.w-\[18px\] {
width: 18px;
}
.w-\[1px\] {
width: 1px;
}
.w-\[22px\] {
width: 22px;
}
.w-\[22rem\] {
width: 22rem;
}
.w-\[240px\] {
width: 240px;
}
.w-\[24px\] {
width: 24px;
}
.w-\[250px\] {
width: 250px;
}
.w-\[260px\] {
width: 260px;
}
.w-\[300px\] {
width: 300px;
}
.w-\[30px\] {
width: 30px;
}
.w-\[320px\] {
width: 320px;
}
.w-\[32px\] {
width: 32px;
}
.w-\[3px\] {
width: 3px;
}
.w-\[400px\] {
width: 400px;
}
.w-\[450px\] {
width: 450px;
}
.w-\[46\%\] {
width: 46%;
}
.w-\[480px\] {
width: 480px;
}
.w-\[500px\] {
width: 500px;
}
.w-\[512px\] {
width: 512px;
}
.w-\[55\%\] {
width: 55%;
}
.w-\[550px\] {
width: 550px;
}
.w-\[600px\] {
width: 600px;
}
.w-\[60vw\] {
width: 60vw;
}
.w-\[640px\] {
width: 640px;
}
.w-\[650px\] {
width: 650px;
}
.w-\[68px\] {
width: 68px;
}
.w-\[6px\] {
width: 6px;
}
.w-\[700px\] {
width: 700px;
}
.w-\[70px\] {
width: 70px;
}
.w-\[75\%\] {
width: 75%;
}
.w-\[78\%\] {
width: 78%;
}
.w-\[7px\] {
width: 7px;
}
.w-\[80\%\] {
width: 80%;
}
.w-\[800px\] {
width: 800px;
}
.w-\[80px\] {
width: 80px;
}
.w-\[900px\] {
width: 900px;
}
.w-\[92\%\] {
width: 92%;
}
.w-\[95vw\] {
width: 95vw;
}
.w-\[960px\] {
width: 960px;
}
.w-auto {
width: auto;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.w-max {
width: -moz-max-content;
width: max-content;
}
.w-px {
width: 1px;
}
.w-screen {
width: 100vw;
}
.min-w-0 {
min-width: 0px;
}
.min-w-\[1000px\] {
min-width: 1000px;
}
.min-w-\[100px\] {
min-width: 100px;
}
.min-w-\[120px\] {
min-width: 120px;
}
.min-w-\[130px\] {
min-width: 130px;
}
.min-w-\[150px\] {
min-width: 150px;
}
.min-w-\[160px\] {
min-width: 160px;
}
.min-w-\[180px\] {
min-width: 180px;
}
.min-w-\[18px\] {
min-width: 18px;
}
.min-w-\[200px\] {
min-width: 200px;
}
.min-w-\[20px\] {
min-width: 20px;
}
.min-w-\[250px\] {
min-width: 250px;
}
.min-w-\[300px\] {
min-width: 300px;
}
.min-w-\[400px\] {
min-width: 400px;
}
.min-w-\[500px\] {
min-width: 500px;
}
.min-w-\[56px\] {
min-width: 56px;
}
.min-w-\[600px\] {
min-width: 600px;
}
.min-w-\[720px\] {
min-width: 720px;
}
.min-w-\[72px\] {
min-width: 72px;
}
.min-w-\[800px\] {
min-width: 800px;
}
.min-w-\[80px\] {
min-width: 80px;
}
.min-w-\[836px\] {
min-width: 836px;
}
.min-w-\[860px\] {
min-width: 860px;
}
.min-w-\[8rem\] {
min-width: 8rem;
}
.min-w-\[90px\] {
min-width: 90px;
}
.min-w-full {
min-width: 100%;
}
.min-w-max {
min-width: -moz-max-content;
min-width: max-content;
}
.min-w-min {
min-width: -moz-min-content;
min-width: min-content;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-6xl {
max-width: 72rem;
}
.max-w-\[1000px\] {
max-width: 1000px;
}
.max-w-\[100vw\] {
max-width: 100vw;
}
.max-w-\[1200px\] {
max-width: 1200px;
}
.max-w-\[120px\] {
max-width: 120px;
}
.max-w-\[140px\] {
max-width: 140px;
}
.max-w-\[14ch\] {
max-width: 14ch;
}
.max-w-\[160px\] {
max-width: 160px;
}
.max-w-\[180px\] {
max-width: 180px;
}
.max-w-\[18ch\] {
max-width: 18ch;
}
.max-w-\[18rem\] {
max-width: 18rem;
}
.max-w-\[20ch\] {
max-width: 20ch;
}
.max-w-\[220px\] {
max-width: 220px;
}
.max-w-\[24ch\] {
max-width: 24ch;
}
.max-w-\[250px\] {
max-width: 250px;
}
.max-w-\[280px\] {
max-width: 280px;
}
.max-w-\[28ch\] {
max-width: 28ch;
}
.max-w-\[300px\] {
max-width: 300px;
}
.max-w-\[340px\] {
max-width: 340px;
}
.max-w-\[350px\] {
max-width: 350px;
}
.max-w-\[384px\] {
max-width: 384px;
}
.max-w-\[400px\] {
max-width: 400px;
}
.max-w-\[40ch\] {
max-width: 40ch;
}
.max-w-\[410px\] {
max-width: 410px;
}
.max-w-\[450px\] {
max-width: 450px;
}
.max-w-\[500px\] {
max-width: 500px;
}
.max-w-\[600px\] {
max-width: 600px;
}
.max-w-\[800px\] {
max-width: 800px;
}
.max-w-\[calc\(100vw-2rem\)\] {
max-width: calc(100vw - 2rem);
}
.max-w-full {
max-width: 100%;
}
.max-w-lg {
max-width: 32rem;
}
.max-w-md {
max-width: 28rem;
}
.max-w-none {
max-width: none;
}
.max-w-screen-md {
max-width: 768px;
}
.max-w-screen-xl {
max-width: 1280px;
}
.max-w-sm {
max-width: 24rem;
}
.max-w-xl {
max-width: 36rem;
}
.max-w-xs {
max-width: 20rem;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-\[0_0_100px\] {
flex: 0 0 100px;
}
.flex-\[0_0_160px\] {
flex: 0 0 160px;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-none {
flex: none;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.grow {
flex-grow: 1;
}
.table-fixed {
table-layout: fixed;
}
.caption-bottom {
caption-side: bottom;
}
.border-collapse {
border-collapse: collapse;
}
.origin-bottom-left {
transform-origin: bottom left;
}
.origin-bottom-right {
transform-origin: bottom right;
}
.origin-center {
transform-origin: center;
}
.origin-top-left {
transform-origin: top left;
}
.origin-top-right {
transform-origin: top right;
}
.-translate-x-0\.5 {
--tw-translate-x: -0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-2 {
--tw-translate-x: -0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-4 {
--tw-translate-x: -1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-0\.5 {
--tw-translate-y: -0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-2 {
--tw-translate-y: -0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full {
--tw-translate-y: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
--tw-translate-x: 0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-2\.5 {
--tw-translate-x: 0.625rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4 {
--tw-translate-x: 1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6 {
--tw-translate-x: 1.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[18px\] {
--tw-translate-x: 18px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[2px\] {
--tw-translate-x: 2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
--tw-translate-x: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
--tw-translate-y: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-2 {
--tw-translate-y: 0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-2\.5 {
--tw-translate-y: 0.625rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4 {
--tw-translate-y: 1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-1\/2\] {
--tw-translate-y: -1/2;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[2px\] {
--tw-translate-y: 2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-full {
--tw-translate-y: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-px {
--tw-translate-y: 1px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-45 {
--tw-rotate: -45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
--tw-rotate: -90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-\[45deg\] {
--tw-rotate: -45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-0 {
--tw-rotate: 0deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[-90deg\] {
--tw-rotate: -90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.animate-\[sommet-empty-fade-in_0\.4s_ease\] {
animation: sommet-empty-fade-in 0.4s ease;
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.animate-ping {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {
50% {
opacity: .5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.cursor-auto {
cursor: auto;
}
.cursor-default {
cursor: default;
}
.cursor-help {
cursor: help;
}
.cursor-move {
cursor: move;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-text {
cursor: text;
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.select-text {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.resize-none {
resize: none;
}
.resize-y {
resize: vertical;
}
.resize {
resize: both;
}
.scroll-mt-4 {
scroll-margin-top: 1rem;
}
.list-inside {
list-style-position: inside;
}
.list-disc {
list-style-type: disc;
}
.list-none {
list-style-type: none;
}
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.columns-3 {
-moz-columns: 3;
columns: 3;
}
.grid-flow-row {
grid-auto-flow: row;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-\[120px_1fr\] {
grid-template-columns: 120px 1fr;
}
.grid-cols-\[220px_1fr\] {
grid-template-columns: 220px 1fr;
}
.grid-cols-\[24px_minmax\(240px\2c 1fr\)_170px_110px_150px_140px\] {
grid-template-columns: 24px minmax(240px,1fr) 170px 110px 150px 140px;
}
.grid-cols-\[250px_1fr\] {
grid-template-columns: 250px 1fr;
}
.grid-cols-\[260px_1fr\] {
grid-template-columns: 260px 1fr;
}
.grid-cols-\[72px_12px_1fr\] {
grid-template-columns: 72px 12px 1fr;
}
.grid-cols-\[72px_1fr\] {
grid-template-columns: 72px 1fr;
}
.grid-cols-\[80px_1fr\] {
grid-template-columns: 80px 1fr;
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.place-items-center {
place-items: center;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-0 {
gap: 0px;
}
.gap-0\.5 {
gap: 0.125rem;
}
.gap-1 {
gap: 0.25rem;
}
.gap-1\.5 {
gap: 0.375rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-2\.5 {
gap: 0.625rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-\[10px\] {
gap: 10px;
}
.gap-\[1px\] {
gap: 1px;
}
.gap-\[20px\] {
gap: 20px;
}
.gap-\[2px\] {
gap: 2px;
}
.gap-\[3px\] {
gap: 3px;
}
.gap-\[5px\] {
gap: 5px;
}
.gap-\[6px\] {
gap: 6px;
}
.gap-\[7px\] {
gap: 7px;
}
.gap-x-0\.5 {
-moz-column-gap: 0.125rem;
column-gap: 0.125rem;
}
.gap-x-1\.5 {
-moz-column-gap: 0.375rem;
column-gap: 0.375rem;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-x-4 {
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
.gap-y-0\.5 {
row-gap: 0.125rem;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.gap-y-1\.5 {
row-gap: 0.375rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.gap-y-4 {
row-gap: 1rem;
}
.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(-0.375rem * var(--tw-space-x-reverse));
margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.125rem * var(--tw-space-x-reverse));
margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-\[color\:var\(--edge-subtle\)\] > :not([hidden]) ~ :not([hidden]) {
border-color: var(--edge-subtle);
}
.divide-bdr-secondary > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(213 213 213 / var(--tw-divide-opacity));
}
.divide-bdr-tertiary > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(238 238 238 / var(--tw-divide-opacity));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
border-color: hsl(var(--border));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-divide-opacity));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}
.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-divide-opacity));
}
.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(229 229 229 / var(--tw-divide-opacity));
}
.self-start {
align-self: flex-start;
}
.self-center {
align-self: center;
}
.self-stretch {
align-self: stretch;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overscroll-contain {
overscroll-behavior: contain;
}
.scroll-smooth {
scroll-behavior: smooth;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.text-ellipsis {
text-overflow: ellipsis;
}
.whitespace-normal {
white-space: normal;
}
.whitespace-nowrap {
white-space: nowrap;
}
.whitespace-pre-line {
white-space: pre-line;
}
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.text-wrap {
text-wrap: wrap;
}
.text-nowrap {
text-wrap: nowrap;
}
.text-pretty {
text-wrap: pretty;
}
.break-words {
overflow-wrap: break-word;
}
.break-all {
word-break: break-all;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-\[10px\] {
border-radius: 10px;
}
.rounded-\[1px\] {
border-radius: 1px;
}
.rounded-\[2px\] {
border-radius: 2px;
}
.rounded-\[3px\] {
border-radius: 3px;
}
.rounded-\[4px\] {
border-radius: 4px;
}
.rounded-\[5px\] {
border-radius: 5px;
}
.rounded-\[6px\] {
border-radius: 6px;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: var(--radius);
}
.rounded-md {
border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-b-md {
border-bottom-right-radius: calc(var(--radius) - 2px);
border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-l-lg {
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
}
.rounded-l-md {
border-top-left-radius: calc(var(--radius) - 2px);
border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.rounded-r-md {
border-top-right-radius: calc(var(--radius) - 2px);
border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-s-lg {
border-start-start-radius: var(--radius);
border-end-start-radius: var(--radius);
}
.rounded-t-lg {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.rounded-t-md {
border-top-left-radius: calc(var(--radius) - 2px);
border-top-right-radius: calc(var(--radius) - 2px);
}
.\!rounded-br-none {
border-bottom-right-radius: 0px !important;
}
.border {
border-width: 1px;
}
.border-0 {
border-width: 0px;
}
.border-2 {
border-width: 2px;
}
.border-\[1px\] {
border-width: 1px;
}
.border-\[2px\] {
border-width: 2px;
}
.border-\[3px\] {
border-width: 3px;
}
.border-b {
border-bottom-width: 1px;
}
.border-b-0 {
border-bottom-width: 0px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-b-4 {
border-bottom-width: 4px;
}
.border-b-\[1\.5px\] {
border-bottom-width: 1.5px;
}
.border-l {
border-left-width: 1px;
}
.border-l-0 {
border-left-width: 0px;
}
.border-l-2 {
border-left-width: 2px;
}
.border-l-4 {
border-left-width: 4px;
}
.border-l-\[3px\] {
border-left-width: 3px;
}
.border-r {
border-right-width: 1px;
}
.border-r-0 {
border-right-width: 0px;
}
.border-t {
border-top-width: 1px;
}
.border-t-0 {
border-top-width: 0px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-t-4 {
border-top-width: 4px;
}
.border-solid {
border-style: solid;
}
.border-dashed {
border-style: dashed;
}
.border-none {
border-style: none;
}
.border-\[color\:var\(--accent\)\] {
border-color: var(--accent);
}
.border-\[color\:var\(--accent-muted\)\] {
border-color: var(--accent-muted);
}
.border-\[color\:var\(--edge\)\] {
border-color: var(--edge);
}
.border-\[color\:var\(--edge-strong\)\] {
border-color: var(--edge-strong);
}
.border-\[color\:var\(--edge-subtle\)\] {
border-color: var(--edge-subtle);
}
.border-\[color\:var\(--surface-inverse-overlay-hover\)\] {
border-color: var(--surface-inverse-overlay-hover);
}
.border-\[color\:var\(--warning-border\)\] {
border-color: var(--warning-border);
}
.border-amber-200 {
--tw-border-opacity: 1;
border-color: rgb(253 230 138 / var(--tw-border-opacity));
}
.border-bdr-brand-deep {
--tw-border-opacity: 1;
border-color: rgb(20 113 111 / var(--tw-border-opacity));
}
.border-bdr-brand-subtle {
--tw-border-opacity: 1;
border-color: rgb(138 168 161 / var(--tw-border-opacity));
}
.border-bdr-brand-subtle\/50 {
border-color: rgb(138 168 161 / 0.5);
}
.border-bdr-disabled {
--tw-border-opacity: 1;
border-color: rgb(238 238 238 / var(--tw-border-opacity));
}
.border-bdr-focus {
--tw-border-opacity: 1;
border-color: rgb(124 191 255 / var(--tw-border-opacity));
}
.border-bdr-info {
--tw-border-opacity: 1;
border-color: rgb(87 169 255 / var(--tw-border-opacity));
}
.border-bdr-info\/20 {
border-color: rgb(87 169 255 / 0.2);
}
.border-bdr-info\/30 {
border-color: rgb(87 169 255 / 0.3);
}
.border-bdr-negative {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.border-bdr-negative\/30 {
border-color: rgb(239 68 68 / 0.3);
}
.border-bdr-notice {
--tw-border-opacity: 1;
border-color: rgb(245 158 11 / var(--tw-border-opacity));
}
.border-bdr-positive {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.border-bdr-primary {
--tw-border-opacity: 1;
border-color: rgb(189 189 189 / var(--tw-border-opacity));
}
.border-bdr-secondary {
--tw-border-opacity: 1;
border-color: rgb(213 213 213 / var(--tw-border-opacity));
}
.border-bdr-tertiary {
--tw-border-opacity: 1;
border-color: rgb(238 238 238 / var(--tw-border-opacity));
}
.border-bdr-tertiary\/60 {
border-color: rgb(238 238 238 / 0.6);
}
.border-bdr-tertiary\/70 {
border-color: rgb(238 238 238 / 0.7);
}
.border-bg-hover {
--tw-border-opacity: 1;
border-color: rgb(247 247 247 / var(--tw-border-opacity));
}
.border-bg-primary {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-blue-200 {
--tw-border-opacity: 1;
border-color: rgb(191 219 254 / var(--tw-border-opacity));
}
.border-blue-400 {
--tw-border-opacity: 1;
border-color: rgb(96 165 250 / var(--tw-border-opacity));
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.border-border {
border-color: hsl(var(--border));
}
.border-content-negative {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.border-content-primary {
--tw-border-opacity: 1;
border-color: rgb(31 31 31 / var(--tw-border-opacity));
}
.border-content-secondary {
--tw-border-opacity: 1;
border-color: rgb(85 85 85 / var(--tw-border-opacity));
}
.border-content-tertiary {
--tw-border-opacity: 1;
border-color: rgb(112 112 112 / var(--tw-border-opacity));
}
.border-edge {
border-color: var(--edge);
}
.border-edge-strong {
border-color: var(--edge-strong);
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-green-300 {
--tw-border-opacity: 1;
border-color: rgb(134 239 172 / var(--tw-border-opacity));
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.border-indigo-100 {
--tw-border-opacity: 1;
border-color: rgb(224 231 255 / var(--tw-border-opacity));
}
.border-indigo-200 {
--tw-border-opacity: 1;
border-color: rgb(199 210 254 / var(--tw-border-opacity));
}
.border-indigo-300 {
--tw-border-opacity: 1;
border-color: rgb(165 180 252 / var(--tw-border-opacity));
}
.border-indigo-600 {
--tw-border-opacity: 1;
border-color: rgb(79 70 229 / var(--tw-border-opacity));
}
.border-input {
border-color: hsl(var(--input));
}
.border-orange-200 {
--tw-border-opacity: 1;
border-color: rgb(254 215 170 / var(--tw-border-opacity));
}
.border-orange-300 {
--tw-border-opacity: 1;
border-color: rgb(253 186 116 / var(--tw-border-opacity));
}
.border-orange-400 {
--tw-border-opacity: 1;
border-color: rgb(251 146 60 / var(--tw-border-opacity));
}
.border-primary {
border-color: hsl(var(--primary));
}
.border-primary\/30 {
border-color: hsl(var(--primary) / 0.3);
}
.border-red-200 {
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
.border-red-300 {
--tw-border-opacity: 1;
border-color: rgb(252 165 165 / var(--tw-border-opacity));
}
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.border-transparent {
border-color: transparent;
}
.border-yellow-300 {
--tw-border-opacity: 1;
border-color: rgb(253 224 71 / var(--tw-border-opacity));
}
.border-b-transparent {
border-bottom-color: transparent;
}
.border-l-bdr-brand-subtle {
--tw-border-opacity: 1;
border-left-color: rgb(138 168 161 / var(--tw-border-opacity));
}
.bg-\[color\:var\(--accent\)\] {
background-color: var(--accent);
}
.bg-\[color\:var\(--accent-subtle\)\] {
background-color: var(--accent-subtle);
}
.bg-\[color\:var\(--danger\)\] {
background-color: var(--danger);
}
.bg-\[color\:var\(--danger-subtle\)\] {
background-color: var(--danger-subtle);
}
.bg-\[color\:var\(--edge\)\] {
background-color: var(--edge);
}
.bg-\[color\:var\(--edge-strong\)\] {
background-color: var(--edge-strong);
}
.bg-\[color\:var\(--fg-inverse\)\] {
background-color: var(--fg-inverse);
}
.bg-\[color\:var\(--info-subtle\)\] {
background-color: var(--info-subtle);
}
.bg-\[color\:var\(--success-subtle\)\] {
background-color: var(--success-subtle);
}
.bg-\[color\:var\(--surface\)\] {
background-color: var(--surface);
}
.bg-\[color\:var\(--surface-alt\)\] {
background-color: var(--surface-alt);
}
.bg-\[color\:var\(--surface-inverse\)\] {
background-color: var(--surface-inverse);
}
.bg-\[color\:var\(--surface-inverse-overlay\)\] {
background-color: var(--surface-inverse-overlay);
}
.bg-\[color\:var\(--surface-tint\)\] {
background-color: var(--surface-tint);
}
.bg-\[color\:var\(--warning\)\] {
background-color: var(--warning);
}
.bg-\[color\:var\(--warning-border\)\] {
background-color: var(--warning-border);
}
.bg-\[color\:var\(--warning-subtle\)\] {
background-color: var(--warning-subtle);
}
.bg-accent {
background-color: hsl(var(--accent));
}
.bg-amber-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}
.bg-amber-50 {
--tw-bg-opacity: 1;
background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}
.bg-amber-500 {
--tw-bg-opacity: 1;
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}
.bg-amber-600 {
--tw-bg-opacity: 1;
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
}
.bg-background {
background-color: hsl(var(--background));
}
.bg-bdr-brand-deep {
--tw-bg-opacity: 1;
background-color: rgb(20 113 111 / var(--tw-bg-opacity));
}
.bg-bdr-info {
--tw-bg-opacity: 1;
background-color: rgb(87 169 255 / var(--tw-bg-opacity));
}
.bg-bdr-info\/10 {
background-color: rgb(87 169 255 / 0.1);
}
.bg-bdr-secondary {
--tw-bg-opacity: 1;
background-color: rgb(213 213 213 / var(--tw-bg-opacity));
}
.bg-bdr-tertiary {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}
.bg-bg-brand-deep {
--tw-bg-opacity: 1;
background-color: rgb(78 169 165 / var(--tw-bg-opacity));
}
.bg-bg-brand-deep-hover {
--tw-bg-opacity: 1;
background-color: rgb(20 113 111 / var(--tw-bg-opacity));
}
.bg-bg-brand-subtle {
--tw-bg-opacity: 1;
background-color: rgb(240 245 243 / var(--tw-bg-opacity));
}
.bg-bg-brand-subtle\/30 {
background-color: rgb(240 245 243 / 0.3);
}
.bg-bg-brand-subtle\/50 {
background-color: rgb(240 245 243 / 0.5);
}
.bg-bg-disabled {
--tw-bg-opacity: 1;
background-color: rgb(163 163 163 / var(--tw-bg-opacity));
}
.bg-bg-disabled\/10 {
background-color: rgb(163 163 163 / 0.1);
}
.bg-bg-hover {
--tw-bg-opacity: 1;
background-color: rgb(247 247 247 / var(--tw-bg-opacity));
}
.bg-bg-hover\/30 {
background-color: rgb(247 247 247 / 0.3);
}
.bg-bg-hover\/40 {
background-color: rgb(247 247 247 / 0.4);
}
.bg-bg-hover\/50 {
background-color: rgb(247 247 247 / 0.5);
}
.bg-bg-hover\/60 {
background-color: rgb(247 247 247 / 0.6);
}
.bg-bg-hover\/80 {
background-color: rgb(247 247 247 / 0.8);
}
.bg-bg-info {
--tw-bg-opacity: 1;
background-color: rgb(169 210 255 / var(--tw-bg-opacity));
}
.bg-bg-info-pressed {
--tw-bg-opacity: 1;
background-color: rgb(233 244 255 / var(--tw-bg-opacity));
}
.bg-bg-info-subtle {
--tw-bg-opacity: 1;
background-color: rgb(233 244 255 / var(--tw-bg-opacity));
}
.bg-bg-info-subtle\/50 {
background-color: rgb(233 244 255 / 0.5);
}
.bg-bg-inverse {
--tw-bg-opacity: 1;
background-color: rgb(31 31 31 / var(--tw-bg-opacity));
}
.bg-bg-inverse-hover {
--tw-bg-opacity: 1;
background-color: rgb(85 85 85 / var(--tw-bg-opacity));
}
.bg-bg-inverse\/20 {
background-color: rgb(31 31 31 / 0.2);
}
.bg-bg-inverse\/30 {
background-color: rgb(31 31 31 / 0.3);
}
.bg-bg-inverse\/50 {
background-color: rgb(31 31 31 / 0.5);
}
.bg-bg-negative {
--tw-bg-opacity: 1;
background-color: rgb(215 38 38 / var(--tw-bg-opacity));
}
.bg-bg-negative-subtle {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.bg-bg-negative-subtle\/50 {
background-color: rgb(254 226 226 / 0.5);
}
.bg-bg-negative\/10 {
background-color: rgb(215 38 38 / 0.1);
}
.bg-bg-notice {
--tw-bg-opacity: 1;
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}
.bg-bg-notice-subtle {
--tw-bg-opacity: 1;
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}
.bg-bg-notice\/10 {
background-color: rgb(245 158 11 / 0.1);
}
.bg-bg-positive {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.bg-bg-positive-subtle {
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}
.bg-bg-positive\/10 {
background-color: rgb(34 197 94 / 0.1);
}
.bg-bg-pressed {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}
.bg-bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-bg-primary\/50 {
background-color: rgb(255 255 255 / 0.5);
}
.bg-bg-primary\/70 {
background-color: rgb(255 255 255 / 0.7);
}
.bg-bg-primary\/80 {
background-color: rgb(255 255 255 / 0.8);
}
.bg-bg-secondary {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}
.bg-bg-secondary\/30 {
background-color: rgb(238 238 238 / 0.3);
}
.bg-bg-secondary\/40 {
background-color: rgb(238 238 238 / 0.4);
}
.bg-bg-secondary\/60 {
background-color: rgb(238 238 238 / 0.6);
}
.bg-bg-selected {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}
.bg-bg-tertiary {
--tw-bg-opacity: 1;
background-color: rgb(213 213 213 / var(--tw-bg-opacity));
}
.bg-border {
background-color: hsl(var(--border));
}
.bg-card {
background-color: hsl(var(--card));
}
.bg-content-brand {
--tw-bg-opacity: 1;
background-color: rgb(209 255 0 / var(--tw-bg-opacity));
}
.bg-content-brand-deep {
--tw-bg-opacity: 1;
background-color: rgb(78 169 165 / var(--tw-bg-opacity));
}
.bg-content-info-bold {
--tw-bg-opacity: 1;
background-color: rgb(47 140 255 / var(--tw-bg-opacity));
}
.bg-content-negative {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-content-primary-inverse {
--tw-bg-opacity: 1;
background-color: rgb(247 247 247 / var(--tw-bg-opacity));
}
.bg-content-primary\/30 {
background-color: rgb(31 31 31 / 0.3);
}
.bg-content-secondary {
--tw-bg-opacity: 1;
background-color: rgb(85 85 85 / var(--tw-bg-opacity));
}
.bg-current {
background-color: currentColor;
}
.bg-cyan-500 {
--tw-bg-opacity: 1;
background-color: rgb(6 182 212 / var(--tw-bg-opacity));
}
.bg-emerald-500 {
--tw-bg-opacity: 1;
background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}
.bg-fuchsia-500 {
--tw-bg-opacity: 1;
background-color: rgb(217 70 239 / var(--tw-bg-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-indigo-100 {
--tw-bg-opacity: 1;
background-color: rgb(224 231 255 / var(--tw-bg-opacity));
}
.bg-indigo-50 {
--tw-bg-opacity: 1;
background-color: rgb(238 242 255 / var(--tw-bg-opacity));
}
.bg-indigo-500 {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}
.bg-indigo-600 {
--tw-bg-opacity: 1;
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}
.bg-lime-500 {
--tw-bg-opacity: 1;
background-color: rgb(132 204 22 / var(--tw-bg-opacity));
}
.bg-muted {
background-color: hsl(var(--muted));
}
.bg-muted\/30 {
background-color: hsl(var(--muted) / 0.3);
}
.bg-muted\/40 {
background-color: hsl(var(--muted) / 0.4);
}
.bg-muted\/50 {
background-color: hsl(var(--muted) / 0.5);
}
.bg-muted\/60 {
background-color: hsl(var(--muted) / 0.6);
}
.bg-muted\/80 {
background-color: hsl(var(--muted) / 0.8);
}
.bg-orange-100 {
--tw-bg-opacity: 1;
background-color: rgb(255 237 213 / var(--tw-bg-opacity));
}
.bg-orange-400\/10 {
background-color: rgb(251 146 60 / 0.1);
}
.bg-orange-50 {
--tw-bg-opacity: 1;
background-color: rgb(255 247 237 / var(--tw-bg-opacity));
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity));
}
.bg-pink-100 {
--tw-bg-opacity: 1;
background-color: rgb(252 231 243 / var(--tw-bg-opacity));
}
.bg-pink-50 {
--tw-bg-opacity: 1;
background-color: rgb(253 242 248 / var(--tw-bg-opacity));
}
.bg-pink-500 {
--tw-bg-opacity: 1;
background-color: rgb(236 72 153 / var(--tw-bg-opacity));
}
.bg-popover {
background-color: hsl(var(--popover));
}
.bg-primary {
background-color: hsl(var(--primary));
}
.bg-primary\/10 {
background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/5 {
background-color: hsl(var(--primary) / 0.05);
}
.bg-purple-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 232 255 / var(--tw-bg-opacity));
}
.bg-purple-50 {
--tw-bg-opacity: 1;
background-color: rgb(151 101 197 / var(--tw-bg-opacity));
}
.bg-purple-500 {
--tw-bg-opacity: 1;
background-color: rgb(168 85 247 / var(--tw-bg-opacity));
}
.bg-rose-500 {
--tw-bg-opacity: 1;
background-color: rgb(244 63 94 / var(--tw-bg-opacity));
}
.bg-secondary {
background-color: hsl(var(--secondary));
}
.bg-sky-500 {
--tw-bg-opacity: 1;
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
}
.bg-slate-500 {
--tw-bg-opacity: 1;
background-color: rgb(100 116 139 / var(--tw-bg-opacity));
}
.bg-stone-500 {
--tw-bg-opacity: 1;
background-color: rgb(120 113 108 / var(--tw-bg-opacity));
}
.bg-surface {
background-color: var(--surface);
}
.bg-transparent {
background-color: transparent;
}
.bg-violet-100 {
--tw-bg-opacity: 1;
background-color: rgb(237 233 254 / var(--tw-bg-opacity));
}
.bg-violet-400\/10 {
background-color: rgb(167 139 250 / 0.1);
}
.bg-violet-50 {
--tw-bg-opacity: 1;
background-color: rgb(245 243 255 / var(--tw-bg-opacity));
}
.bg-violet-500 {
--tw-bg-opacity: 1;
background-color: rgb(139 92 246 / var(--tw-bg-opacity));
}
.bg-zinc-500 {
--tw-bg-opacity: 1;
background-color: rgb(113 113 122 / var(--tw-bg-opacity));
}
.bg-opacity-25 {
--tw-bg-opacity: 0.25;
}
.bg-opacity-40 {
--tw-bg-opacity: 0.4;
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.bg-opacity-70 {
--tw-bg-opacity: 0.7;
}
.bg-opacity-75 {
--tw-bg-opacity: 0.75;
}
.bg-opacity-90 {
--tw-bg-opacity: 0.9;
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-bg-primary {
--tw-gradient-from: #ffffff var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/10 {
--tw-gradient-from: hsl(var(--primary) / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-100 {
--tw-gradient-from: #e0f2fe var(--tw-gradient-from-position);
--tw-gradient-to: rgb(224 242 254 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-30\% {
--tw-gradient-from-position: 30%;
}
.via-bg-primary\/60 {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-sky-50 {
--tw-gradient-to: rgb(240 249 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #f0f9ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-primary\/5 {
--tw-gradient-to: hsl(var(--primary) / 0.05) var(--tw-gradient-to-position);
}
.to-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.fill-current {
fill: currentColor;
}
.stroke-current {
stroke: currentColor;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.p-0 {
padding: 0px;
}
.p-0\.5 {
padding: 0.125rem;
}
.p-1 {
padding: 0.25rem;
}
.p-1\.5 {
padding: 0.375rem;
}
.p-12 {
padding: 3rem;
}
.p-2 {
padding: 0.5rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-3 {
padding: 0.75rem;
}
.p-3\.5 {
padding: 0.875rem;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.p-\[10px\] {
padding: 10px;
}
.p-\[2px\] {
padding: 2px;
}
.p-\[9px\] {
padding: 9px;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-3\.5 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.px-32 {
padding-left: 8rem;
padding-right: 8rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-\[10px\] {
padding-left: 10px;
padding-right: 10px;
}
.px-\[14px\] {
padding-left: 14px;
padding-right: 14px;
}
.px-\[18px\] {
padding-left: 18px;
padding-right: 18px;
}
.px-\[5px\] {
padding-left: 5px;
padding-right: 5px;
}
.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-3\.5 {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-\[10px\] {
padding-top: 10px;
padding-bottom: 10px;
}
.py-\[5px\] {
padding-top: 5px;
padding-bottom: 5px;
}
.py-\[6px\] {
padding-top: 6px;
padding-bottom: 6px;
}
.py-px {
padding-top: 1px;
padding-bottom: 1px;
}
.pb-0 {
padding-bottom: 0px;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pb-1\.5 {
padding-bottom: 0.375rem;
}
.pb-12 {
padding-bottom: 3rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-2\.5 {
padding-bottom: 0.625rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-5 {
padding-bottom: 1.25rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pb-7 {
padding-bottom: 1.75rem;
}
.pl-0 {
padding-left: 0px;
}
.pl-0\.5 {
padding-left: 0.125rem;
}
.pl-1 {
padding-left: 0.25rem;
}
.pl-10 {
padding-left: 2.5rem;
}
.pl-12 {
padding-left: 3rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pl-2\.5 {
padding-left: 0.625rem;
}
.pl-3 {
padding-left: 0.75rem;
}
.pl-4 {
padding-left: 1rem;
}
.pl-5 {
padding-left: 1.25rem;
}
.pl-6 {
padding-left: 1.5rem;
}
.pl-8 {
padding-left: 2rem;
}
.pl-9 {
padding-left: 2.25rem;
}
.pl-\[12\.5px\] {
padding-left: 12.5px;
}
.pl-\[30px\] {
padding-left: 30px;
}
.pl-\[42px\] {
padding-left: 42px;
}
.pl-\[calc\(50\%-160px\)\] {
padding-left: calc(50% - 160px);
}
.pr-1 {
padding-right: 0.25rem;
}
.pr-10 {
padding-right: 2.5rem;
}
.pr-16 {
padding-right: 4rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pr-3 {
padding-right: 0.75rem;
}
.pr-4 {
padding-right: 1rem;
}
.pr-5 {
padding-right: 1.25rem;
}
.pr-6 {
padding-right: 1.5rem;
}
.pr-8 {
padding-right: 2rem;
}
.pr-9 {
padding-right: 2.25rem;
}
.ps-7 {
padding-inline-start: 1.75rem;
}
.pt-0 {
padding-top: 0px;
}
.pt-0\.5 {
padding-top: 0.125rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-1\.5 {
padding-top: 0.375rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-2\.5 {
padding-top: 0.625rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.pt-\[5px\] {
padding-top: 5px;
}
.pt-\[6px\] {
padding-top: 6px;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.align-top {
vertical-align: top;
}
.align-middle {
vertical-align: middle;
}
.align-text-bottom {
vertical-align: text-bottom;
}
.font-geist {
font-family: Geist, var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-mono {
font-family: var(--font-mono), ui-monospace, monospace;
}
.font-sans {
font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-serif {
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.text-\[0\.8rem\] {
font-size: 0.8rem;
}
.text-\[10\.5px\] {
font-size: 10.5px;
}
.text-\[10px\] {
font-size: 10px;
}
.text-\[11\.5px\] {
font-size: 11.5px;
}
.text-\[11px\] {
font-size: 11px;
}
.text-\[12px\] {
font-size: 12px;
}
.text-\[13px\] {
font-size: 13px;
}
.text-\[14px\] {
font-size: 14px;
}
.text-\[15px\] {
font-size: 15px;
}
.text-\[17px\] {
font-size: 17px;
}
.text-\[6px\] {
font-size: 6px;
}
.text-\[7px\] {
font-size: 7px;
}
.text-\[9\.5px\] {
font-size: 9.5px;
}
.text-\[9px\] {
font-size: 9px;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-black {
font-weight: 900;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.normal-case {
text-transform: none;
}
.italic {
font-style: italic;
}
.tabular-nums {
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-4 {
line-height: 1rem;
}
.leading-5 {
line-height: 1.25rem;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-7 {
line-height: 1.75rem;
}
.leading-\[1\.3\] {
line-height: 1.3;
}
.leading-\[1\.45\] {
line-height: 1.45;
}
.leading-\[1\.4\] {
line-height: 1.4;
}
.leading-\[1\.7\] {
line-height: 1.7;
}
.leading-none {
line-height: 1;
}
.leading-normal {
line-height: 1.5;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-snug {
line-height: 1.375;
}
.leading-tight {
line-height: 1.25;
}
.tracking-\[0\.03em\] {
letter-spacing: 0.03em;
}
.tracking-\[0\.05em\] {
letter-spacing: 0.05em;
}
.tracking-normal {
letter-spacing: 0px;
}
.tracking-tight {
letter-spacing: -0.5px;
}
.tracking-wide {
letter-spacing: 0.1px;
}
.tracking-wider {
letter-spacing: 1px;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.text-\[color\:var\(--accent\)\] {
color: var(--accent);
}
.text-\[color\:var\(--danger\)\] {
color: var(--danger);
}
.text-\[color\:var\(--danger-fg\)\] {
color: var(--danger-fg);
}
.text-\[color\:var\(--fg\)\] {
color: var(--fg);
}
.text-\[color\:var\(--fg-disabled\)\] {
color: var(--fg-disabled);
}
.text-\[color\:var\(--fg-inverse\)\] {
color: var(--fg-inverse);
}
.text-\[color\:var\(--fg-secondary\)\] {
color: var(--fg-secondary);
}
.text-\[color\:var\(--fg-tertiary\)\] {
color: var(--fg-tertiary);
}
.text-\[color\:var\(--info\)\] {
color: var(--info);
}
.text-\[color\:var\(--success\)\] {
color: var(--success);
}
.text-\[color\:var\(--warning\)\] {
color: var(--warning);
}
.text-\[color\:var\(--warning-fg\)\] {
color: var(--warning-fg);
}
.text-accent {
color: hsl(var(--accent));
}
.text-accent-foreground {
color: hsl(var(--accent-foreground));
}
.text-amber-400 {
--tw-text-opacity: 1;
color: rgb(251 191 36 / var(--tw-text-opacity));
}
.text-amber-600 {
--tw-text-opacity: 1;
color: rgb(217 119 6 / var(--tw-text-opacity));
}
.text-amber-700 {
--tw-text-opacity: 1;
color: rgb(180 83 9 / var(--tw-text-opacity));
}
.text-amber-800 {
--tw-text-opacity: 1;
color: rgb(146 64 14 / var(--tw-text-opacity));
}
.text-amber-900 {
--tw-text-opacity: 1;
color: rgb(120 53 15 / var(--tw-text-opacity));
}
.text-bg-brand-deep {
--tw-text-opacity: 1;
color: rgb(78 169 165 / var(--tw-text-opacity));
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.text-blue-800 {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity));
}
.text-blue-900 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
}
.text-card-foreground {
color: hsl(var(--card-foreground));
}
.text-content-brand {
--tw-text-opacity: 1;
color: rgb(209 255 0 / var(--tw-text-opacity));
}
.text-content-brand-deep {
--tw-text-opacity: 1;
color: rgb(78 169 165 / var(--tw-text-opacity));
}
.text-content-brand-subtle {
--tw-text-opacity: 1;
color: rgb(60 94 94 / var(--tw-text-opacity));
}
.text-content-disabled {
--tw-text-opacity: 1;
color: rgb(189 189 189 / var(--tw-text-opacity));
}
.text-content-info {
--tw-text-opacity: 1;
color: rgb(124 191 255 / var(--tw-text-opacity));
}
.text-content-info-bold {
--tw-text-opacity: 1;
color: rgb(47 140 255 / var(--tw-text-opacity));
}
.text-content-link {
--tw-text-opacity: 1;
color: rgb(39 66 106 / var(--tw-text-opacity));
}
.text-content-negative {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-content-negative-bold {
--tw-text-opacity: 1;
color: rgb(215 38 38 / var(--tw-text-opacity));
}
.text-content-notice {
--tw-text-opacity: 1;
color: rgb(251 191 36 / var(--tw-text-opacity));
}
.text-content-notice-bold {
--tw-text-opacity: 1;
color: rgb(240 138 6 / var(--tw-text-opacity));
}
.text-content-positive {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-content-positive-bold {
--tw-text-opacity: 1;
color: rgb(30 123 71 / var(--tw-text-opacity));
}
.text-content-primary {
--tw-text-opacity: 1;
color: rgb(31 31 31 / var(--tw-text-opacity));
}
.text-content-primary-inverse {
--tw-text-opacity: 1;
color: rgb(247 247 247 / var(--tw-text-opacity));
}
.text-content-secondary {
--tw-text-opacity: 1;
color: rgb(85 85 85 / var(--tw-text-opacity));
}
.text-content-tertiary {
--tw-text-opacity: 1;
color: rgb(112 112 112 / var(--tw-text-opacity));
}
.text-content-tertiary\/70 {
color: rgb(112 112 112 / 0.7);
}
.text-cyan-800 {
--tw-text-opacity: 1;
color: rgb(21 94 117 / var(--tw-text-opacity));
}
.text-danger {
color: var(--danger);
}
.text-destructive {
color: hsl(var(--destructive));
}
.text-emerald-800 {
--tw-text-opacity: 1;
color: rgb(6 95 70 / var(--tw-text-opacity));
}
.text-fg {
color: var(--fg);
}
.text-fg-secondary {
color: var(--fg-secondary);
}
.text-fg-tertiary {
color: var(--fg-tertiary);
}
.text-foreground {
color: hsl(var(--foreground));
}
.text-fuchsia-800 {
--tw-text-opacity: 1;
color: rgb(134 25 143 / var(--tw-text-opacity));
}
.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity));
}
.text-green-800 {
--tw-text-opacity: 1;
color: rgb(22 101 52 / var(--tw-text-opacity));
}
.text-indigo-500 {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity));
}
.text-indigo-600 {
--tw-text-opacity: 1;
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.text-indigo-700 {
--tw-text-opacity: 1;
color: rgb(67 56 202 / var(--tw-text-opacity));
}
.text-indigo-800 {
--tw-text-opacity: 1;
color: rgb(55 48 163 / var(--tw-text-opacity));
}
.text-lime-800 {
--tw-text-opacity: 1;
color: rgb(63 98 18 / var(--tw-text-opacity));
}
.text-muted-foreground {
color: hsl(var(--muted-foreground));
}
.text-orange-400 {
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity));
}
.text-orange-500 {
--tw-text-opacity: 1;
color: rgb(249 115 22 / var(--tw-text-opacity));
}
.text-orange-600 {
--tw-text-opacity: 1;
color: rgb(234 88 12 / var(--tw-text-opacity));
}
.text-orange-700 {
--tw-text-opacity: 1;
color: rgb(194 65 12 / var(--tw-text-opacity));
}
.text-orange-800 {
--tw-text-opacity: 1;
color: rgb(154 52 18 / var(--tw-text-opacity));
}
.text-pink-500 {
--tw-text-opacity: 1;
color: rgb(236 72 153 / var(--tw-text-opacity));
}
.text-pink-700 {
--tw-text-opacity: 1;
color: rgb(190 24 93 / var(--tw-text-opacity));
}
.text-pink-800 {
--tw-text-opacity: 1;
color: rgb(157 23 77 / var(--tw-text-opacity));
}
.text-popover-foreground {
color: hsl(var(--popover-foreground));
}
.text-primary {
color: hsl(var(--primary));
}
.text-primary-foreground {
color: hsl(var(--primary-foreground));
}
.text-purple-500 {
--tw-text-opacity: 1;
color: rgb(168 85 247 / var(--tw-text-opacity));
}
.text-purple-600 {
--tw-text-opacity: 1;
color: rgb(147 51 234 / var(--tw-text-opacity));
}
.text-purple-700 {
--tw-text-opacity: 1;
color: rgb(126 34 206 / var(--tw-text-opacity));
}
.text-purple-800 {
--tw-text-opacity: 1;
color: rgb(107 33 168 / var(--tw-text-opacity));
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity));
}
.text-red-700 {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity));
}
.text-red-800 {
--tw-text-opacity: 1;
color: rgb(153 27 27 / var(--tw-text-opacity));
}
.text-red-900 {
--tw-text-opacity: 1;
color: rgb(127 29 29 / var(--tw-text-opacity));
}
.text-rose-800 {
--tw-text-opacity: 1;
color: rgb(159 18 57 / var(--tw-text-opacity));
}
.text-secondary-foreground {
color: hsl(var(--secondary-foreground));
}
.text-sky-700 {
--tw-text-opacity: 1;
color: rgb(3 105 161 / var(--tw-text-opacity));
}
.text-sky-800 {
--tw-text-opacity: 1;
color: rgb(7 89 133 / var(--tw-text-opacity));
}
.text-slate-400 {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity));
}
.text-slate-800 {
--tw-text-opacity: 1;
color: rgb(30 41 59 / var(--tw-text-opacity));
}
.text-stone-800 {
--tw-text-opacity: 1;
color: rgb(41 37 36 / var(--tw-text-opacity));
}
.text-teal-800 {
--tw-text-opacity: 1;
color: rgb(17 94 89 / var(--tw-text-opacity));
}
.text-violet-400 {
--tw-text-opacity: 1;
color: rgb(167 139 250 / var(--tw-text-opacity));
}
.text-violet-700 {
--tw-text-opacity: 1;
color: rgb(109 40 217 / var(--tw-text-opacity));
}
.text-violet-800 {
--tw-text-opacity: 1;
color: rgb(91 33 182 / var(--tw-text-opacity));
}
.text-yellow-400 {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.text-yellow-500 {
--tw-text-opacity: 1;
color: rgb(234 179 8 / var(--tw-text-opacity));
}
.text-yellow-600 {
--tw-text-opacity: 1;
color: rgb(202 138 4 / var(--tw-text-opacity));
}
.text-yellow-700 {
--tw-text-opacity: 1;
color: rgb(161 98 7 / var(--tw-text-opacity));
}
.text-yellow-800 {
--tw-text-opacity: 1;
color: rgb(133 77 14 / var(--tw-text-opacity));
}
.text-zinc-800 {
--tw-text-opacity: 1;
color: rgb(39 39 42 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
.line-through {
text-decoration-line: line-through;
}
.no-underline {
text-decoration-line: none;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.placeholder-content-tertiary::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(112 112 112 / var(--tw-placeholder-opacity));
}
.placeholder-content-tertiary::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(112 112 112 / var(--tw-placeholder-opacity));
}
.placeholder-gray-400::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}
.placeholder-gray-400::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}
.placeholder-gray-500::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(107 114 128 / var(--tw-placeholder-opacity));
}
.placeholder-gray-500::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(107 114 128 / var(--tw-placeholder-opacity));
}
.placeholder-red-300::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(252 165 165 / var(--tw-placeholder-opacity));
}
.placeholder-red-300::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(252 165 165 / var(--tw-placeholder-opacity));
}
.accent-content-brand-subtle {
accent-color: #3c5e5e;
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-25 {
opacity: 0.25;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-55 {
opacity: 0.55;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-75 {
opacity: 0.75;
}
.opacity-80 {
opacity: 0.8;
}
.opacity-90 {
opacity: 0.9;
}
.opacity-\[0\.82\] {
opacity: 0.82;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[-4px_0_15px_-3px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
--tw-shadow: -4px 0 15px -3px rgba(0,0,0,0.05);
--tw-shadow-colored: -4px 0 15px -3px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.10\)\2c 0_1px_4px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
--tw-shadow: 0 4px 16px rgba(0,0,0,0.10),0 1px 4px rgba(0,0,0,0.06);
--tw-shadow-colored: 0 4px 16px var(--tw-shadow-color), 0 1px 4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
--tw-shadow: 0 4px 16px rgba(0,0,0,0.2);
--tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_5px_15px_-3px_rgb\(0_0_0_\/_0\.08\)\] {
--tw-shadow: 0 5px 15px -3px rgb(0 0 0 / 0.08);
--tw-shadow-colored: 0 5px 15px -3px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_-8px_12px_-8px_rgba\(0\2c 0\2c 0\2c 0\.15\)\] {
--tw-shadow: inset 0 -8px 12px -8px rgba(0,0,0,0.15);
--tw-shadow-colored: inset 0 -8px 12px -8px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner {
--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline {
outline-style: solid;
}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
--tw-ring-inset: inset;
}
.ring-\[color\:var\(--accent\)\] {
--tw-ring-color: var(--accent);
}
.ring-\[color\:var\(--edge\)\] {
--tw-ring-color: var(--edge);
}
.ring-\[color\:var\(--warning-border\)\] {
--tw-ring-color: var(--warning-border);
}
.ring-bdr-brand-subtle\/50 {
--tw-ring-color: rgb(138 168 161 / 0.5);
}
.ring-bdr-focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(124 191 255 / var(--tw-ring-opacity));
}
.ring-bdr-info {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(87 169 255 / var(--tw-ring-opacity));
}
.ring-bdr-info\/20 {
--tw-ring-color: rgb(87 169 255 / 0.2);
}
.ring-bdr-negative {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}
.ring-bdr-negative\/30 {
--tw-ring-color: rgb(239 68 68 / 0.3);
}
.ring-bdr-notice {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity));
}
.ring-bdr-notice\/30 {
--tw-ring-color: rgb(245 158 11 / 0.3);
}
.ring-bdr-positive {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
}
.ring-bdr-positive\/30 {
--tw-ring-color: rgb(34 197 94 / 0.3);
}
.ring-bdr-secondary {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(213 213 213 / var(--tw-ring-opacity));
}
.ring-bdr-tertiary {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(238 238 238 / var(--tw-ring-opacity));
}
.ring-bdr-tertiary\/50 {
--tw-ring-color: rgb(238 238 238 / 0.5);
}
.ring-bg-info-subtle {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(233 244 255 / var(--tw-ring-opacity));
}
.ring-bg-negative-subtle {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity));
}
.ring-bg-primary {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}
.ring-black {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
}
.ring-blue-500 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
.ring-gray-300 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}
.ring-gray-600\/20 {
--tw-ring-color: rgb(75 85 99 / 0.2);
}
.ring-green-600\/20 {
--tw-ring-color: rgb(22 163 74 / 0.2);
}
.ring-orange-600\/20 {
--tw-ring-color: rgb(234 88 12 / 0.2);
}
.ring-purple-600\/20 {
--tw-ring-color: rgb(147 51 234 / 0.2);
}
.ring-purple-700\/10 {
--tw-ring-color: rgb(126 34 206 / 0.1);
}
.ring-red-600\/20 {
--tw-ring-color: rgb(220 38 38 / 0.2);
}
.ring-violet-600\/20 {
--tw-ring-color: rgb(124 58 237 / 0.2);
}
.ring-yellow-600\/20 {
--tw-ring-color: rgb(202 138 4 / 0.2);
}
.ring-opacity-5 {
--tw-ring-opacity: 0.05;
}
.ring-offset-1 {
--tw-ring-offset-width: 1px;
}
.ring-offset-background {
--tw-ring-offset-color: hsl(var(--background));
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[height\] {
transition-property: height;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-shadow {
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-200 {
transition-delay: 200ms;
}
.duration-100 {
transition-duration: 100ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.duration-150 {
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-700 {
transition-duration: 700ms;
}
.duration-75 {
transition-duration: 75ms;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
transition-timing-function: linear;
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-transform {
will-change: transform;
}
@keyframes enter {
from {
opacity: var(--tw-enter-opacity, 1);
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
}
}
@keyframes exit {
to {
opacity: var(--tw-exit-opacity, 1);
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
}
}
.zoom-in {
--tw-enter-scale: 0;
}
.zoom-out {
--tw-exit-scale: 0;
}
.duration-100 {
animation-duration: 100ms;
}
.duration-1000 {
animation-duration: 1000ms;
}
.duration-150 {
animation-duration: 150ms;
}
.duration-200 {
animation-duration: 200ms;
}
.duration-300 {
animation-duration: 300ms;
}
.duration-700 {
animation-duration: 700ms;
}
.duration-75 {
animation-duration: 75ms;
}
.delay-200 {
animation-delay: 200ms;
}
.ease-in {
animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
animation-timing-function: linear;
}
.ease-out {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
animation-play-state: running;
}
.paused {
animation-play-state: paused;
}
.\[scrollbar-color\:var\(--color-bg-tertiary\)_var\(--color-bg-hover\)\] {
scrollbar-color: var(--color-bg-tertiary) var(--color-bg-hover);
}
.\[scrollbar-width\:thin\] {
scrollbar-width: thin;
}
/* Custom CSS. Move into different file later on */
.eye-toggle[data-hidden="true"] svg.open {
display: none;
}
.eye-toggle[data-hidden="true"] svg.close {
color: #ddd;
opacity: 0.35;
}
.eye-toggle[data-hidden="false"] svg.close {
display: none;
}
.eye-toggle[data-hidden="false"] svg.open {
color: #8f8f8f;
opacity: 0.7;
}
[x-cloak] {
display: none !important;
}
/* Safety net: forces the dashboard loading overlay to hide after 5s in case
Alpine never initializes (script error, blocked module, etc.). */
.dashboard-loading-fallback {
animation: dashboard-loading-fallback 0s 5s forwards;
}
@keyframes dashboard-loading-fallback {
to {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
.mapboxgl-popup {
z-index: 10;
}
.mapboxgl-popup-content {
max-width: 220px;
overflow-wrap: break-word;
}
.workflow-canvas-svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.workflow-canvas-svg.full-page {
width: 500vw;
height: 500vh;
left: -150vw;
top: -150vh;
}
.background-wrapper {
/* Fill the canvas viewport and tile infinitely. Panning is applied via
background-position in updateTransform(), not a transform on a finite
sheet — a finite sheet runs out on large workflows and exposes the page
background once you pan past its edge. */
inset: 0;
background-image: url("/static/svg/background-tile.svg");
background-repeat: repeat;
background-size: 120px 120px;
background-color: #f9f9f9;
}
#card-list th,
#card-list td {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
#card-list td:first-child {
padding-left: 1.5rem;
}
#card-list td:last-child {
padding-right: 1.5rem;
}
#card-list td:not(:first-child):not(:last-child) {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
#card-list tr {
border-bottom: 1px solid #f3f4f6;
/* gray-100 */
}
#card-list tr:not(:first-child) {
border-top: 1px solid #f3f4f6;
}
.dot-separated-list > span + span::before {
content: "•";
padding-right: 0.25rem;
}
.box-animation {
--border-angle: 0deg;
animation: border-angle-rotate 5s infinite linear;
}
.box-animation.b {
background:
linear-gradient(white, white) padding-box,
conic-gradient(from var(--border-angle), #fff 70%, black) border-box;
}
@keyframes border-angle-rotate {
from {
--border-angle: 0deg;
}
to {
--border-angle: 360deg;
}
}
@property --border-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.ag-grid-shaded-row {
background-color: #f7f7f7 !important;
border: none !important;
}
.ag-grid-row {
border: none !important;
}
.ag-row {
background: unset;
}
.ag-row:hover {
cursor: pointer;
}
.sop-steps-scroll::-webkit-scrollbar {
height: 0.5px;
}
.sop-steps-scroll::-webkit-scrollbar-track {
background: transparent;
}
.sop-steps-scroll::-webkit-scrollbar-thumb {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
border-radius: 0.5px;
}
.sop-steps-scroll::-webkit-scrollbar-thumb:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.hexagon-step,
.hexagon-step-custom {
position: relative;
min-width: 100px;
max-width: 300px;
width: auto;
height: 40px;
margin: 0px 6px;
display: flex;
padding: 6px;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.hexagon-step:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* Right triangle (outgoing arrow) - filled with step background color
.hexagon-step::after {
content: "";
position: absolute;
right: -19px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 18px solid transparent;
border-right: unset;
z-index: 2;
margin-right: 1px;
}
.hexagon-step:nth-child(odd)::after {
border-left-color: #f3f4f6;
}
.hexagon-step:nth-child(even)::after {
border-left-color: #ffffff;
}
.hexagon-step::before {
content: "";
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 19px solid #9ca3af;
z-index: 1;
}
.hexagon-step:last-child {
@apply rounded-r-md;
margin-right: 12px;
}
.hexagon-step:last-child::after,
.hexagon-step:last-child::before {
display: none;
}
*/
.hexagon-step-text {
font-size: 0.85rem;
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
max-width: 330px;
text-align: center;
}
/* GridStack cursor styles */
.grid-stack-item:not(.ui-draggable-disabled) > .grid-stack-item-content {
cursor: grab;
}
.grid-stack-dragging {
cursor: grabbing;
}
/* Hide resize handles by default, show only on hover */
.grid-stack-item > .ui-resizable-handle {
opacity: 0;
transition: opacity 0.2s ease;
}
.grid-stack-item:hover > .ui-resizable-handle {
opacity: 1;
}
/* Content styling — edit mode: subtle dashed border; view mode: clean masonry */
.grid-stack-item-content {
background-color: var(--surface, #fff);
border-radius: 8px;
border: 1px dashed var(--edge, #e4e4e7);
overflow: unset !important;
box-sizing: border-box;
padding: 10px;
}
/* View mode (static grid) — no borders, no shadow, pure masonry look */
.grid-stack-static .grid-stack-item-content {
border-color: transparent;
box-shadow: none;
}
/* Custom scrollbar */
[x-ref="progressContainer"]::-webkit-scrollbar {
width: 6px;
}
[x-ref="progressContainer"]::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
[x-ref="progressContainer"]::-webkit-scrollbar-thumb {
background: #cbd5e0;
border-radius: 3px;
}
[x-ref="progressContainer"]::-webkit-scrollbar-thumb:hover {
background: #a0aec0;
}
/* Action Agent Animations */
@keyframes shimmer {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
.animate-shimmer {
animation: shimmer 2s infinite;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(-4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fade-in 0.4s ease-out forwards;
}
@keyframes message-appear {
0% {
opacity: 0;
transform: translateY(8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.chat-message-appear {
animation: message-appear 0.3s ease-out forwards;
}
/* Cursor blink animation */
@keyframes cursor-blink {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
.cursor-blink {
animation: cursor-blink 1s infinite;
}
.chat-timestamp {
text-align: center;
}
.chat-user-message {
background-color: #f0f5f3;
border: 1px solid #8aa8a1;
border-radius: 16px;
color: #3e5f5f;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding: 1rem;
}
.chat-error-message {
background-color: #f5f0f0;
border-radius: 16px;
border: 1px solid #a88a8a;
}
.chat-assistant-message {
background-color: transparent;
border: none;
box-shadow: none;
color: #3e5f5f;
line-height: 1.65;
word-wrap: break-word;
opacity: 1;
inset: 0px;
padding-left: 0.5rem;
padding-top: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(112 112 112 / var(--tw-text-opacity));
}
fieldset:disabled button .chat-assistant-message {
visibility: hidden;
}
.chat-assistant-message p {
margin: 0 0 0.75em 0;
}
.chat-assistant-message p:last-child {
margin-bottom: 0;
}
.chat-assistant-message h1,
.chat-assistant-message h2,
.chat-assistant-message h3,
.chat-assistant-message h4,
.chat-assistant-message h5,
.chat-assistant-message h6 {
font-weight: 600;
font-size: inherit !important;
}
.chat-assistant-message h1:first-child,
.chat-assistant-message h2:first-child,
.chat-assistant-message h3:first-child,
.chat-assistant-message h4:first-child {
margin-top: 0;
}
.chat-assistant-message strong {
font-weight: 800;
}
.chat-assistant-message em {
font-style: italic;
}
.chat-assistant-message ul,
.chat-assistant-message ol {
margin: 0.5em 0 0.75em 0;
padding-left: 1.5em;
}
.chat-assistant-message ul {
list-style: disc outside;
}
.chat-assistant-message ol {
list-style: decimal outside;
}
.chat-assistant-message li {
margin: 0.25em 0;
padding-left: 0.25em;
}
.chat-assistant-message li > ul,
.chat-assistant-message li > ol {
margin: 0.25em 0;
}
.chat-assistant-message a {
color: #2c7a7b;
text-decoration: underline;
text-underline-offset: 2px;
}
.chat-assistant-message a:hover {
color: #285e61;
}
.chat-assistant-message code {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.875em;
background-color: rgba(62, 95, 95, 0.08);
padding: 0.15em 0.35em;
border-radius: 4px;
border: 1px solid rgba(62, 95, 95, 0.12);
white-space: break-spaces;
}
.chat-assistant-message pre {
background-color: #f5f7f7;
border: 1px solid #d9e2e0;
border-radius: 8px;
padding: 0.75em 1em;
margin: 0.75em 0;
overflow-x: auto;
font-size: 0.85em;
line-height: 1.5;
}
.chat-assistant-message pre code {
background-color: transparent;
border: none;
padding: 0;
border-radius: 0;
font-size: inherit;
white-space: pre;
display: block;
}
.chat-assistant-message blockquote {
margin: 0.75em 0;
padding: 0.25em 0 0.25em 0.9em;
border-left: 3px solid #8aa8a1;
color: #5a7a7a;
font-style: italic;
}
.chat-assistant-message blockquote p {
margin-bottom: 0.25em;
}
.chat-assistant-message hr {
border: 0;
border-top: 1px solid #d9e2e0;
margin: 1em 0;
}
.chat-assistant-message table {
border-collapse: collapse;
margin: 0.75em 0;
width: 100%;
font-size: 0.95em;
}
.chat-assistant-message th,
.chat-assistant-message td {
border: 1px solid #d9e2e0;
padding: 0.4em 0.6em;
text-align: left;
vertical-align: top;
}
.chat-assistant-message th {
background-color: #f0f5f3;
font-weight: 600;
}
.chat-assistant-message tr:nth-child(even) td {
background-color: #fafbfb;
}
.chat-assistant-message img {
max-width: 100%;
height: auto;
border-radius: 6px;
margin: 0.5em 0;
}
.chat-assistant-message > *:first-child {
margin-top: 0;
}
.chat-assistant-message > *:last-child {
margin-bottom: 0;
}
.chat-thinking-message {
background-color: transparent;
border: none;
font-style: italic;
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.chat-thinking-message p {
margin-bottom: 10px;
}
/* =========================================================
Chat: thinking text animations
Switch variants by changing the class on the :
chat-thinking-anim--shimmer left-to-right gradient sweep
chat-thinking-anim--pulse opacity fade in/out
chat-thinking-anim--typing trailing dots expand (Claude-style)
Active variant: chat-thinking-anim--shimmer
========================================================= */
/* --- Variant A: shimmer (left-to-right gradient sweep) --- */
@keyframes chat-thinking-shimmer {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
.chat-thinking-anim--shimmer {
background: linear-gradient(90deg, #9ca3af 25%, #d1d5db 50%, #9ca3af 75%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: chat-thinking-shimmer 2s linear infinite;
}
/* --- Variant B: pulse (opacity fade) --- */
@keyframes chat-thinking-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
.chat-thinking-anim--pulse {
animation: chat-thinking-pulse 1.6s ease-in-out infinite;
}
/* --- Variant C: typing dots (Claude-style trailing dots) --- */
@keyframes chat-thinking-dots {
0% {
width: 0;
}
33% {
width: 0.4em;
}
66% {
width: 0.8em;
}
100% {
width: 1.2em;
}
}
.chat-thinking-anim--typing::after {
content: "...";
display: inline-block;
overflow: hidden;
width: 0;
vertical-align: bottom;
animation: chat-thinking-dots 1.2s steps(3, end) infinite;
}
/* Legacy alias — keeps existing usages working during transition */
.chat-thinking-text-shimmer {
background: linear-gradient(90deg, #9ca3af 25%, #d1d5db 50%, #9ca3af 75%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: chat-thinking-shimmer 2s linear infinite;
}
.range-slider input[type="range"]::-webkit-slider-thumb {
pointer-events: all;
width: 16px;
height: 16px;
-webkit-appearance: none;
cursor: pointer;
}
.range-slider input[type="range"]::-moz-range-thumb {
pointer-events: all;
width: 16px;
height: 16px;
cursor: pointer;
}
.ag-center-cols-container {
min-width: 100%;
}
.ag-cell-value.ag-cell.ag-cell-not-inline-editing.ag-cell-normal-height.ag-cell-wrap-text.ag-column-first.ag-column-last {
min-width: 100%;
}
.task-description ul,
.task-description ol {
list-style-position: inside;
list-style-type: disc;
}
.folder-nav-item {
margin-left: 0.75rem;
cursor: pointer;
border-radius: calc(var(--radius) - 2px);
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(85 85 85 / var(--tw-text-opacity));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.folder-nav-item:hover {
--tw-bg-opacity: 1;
background-color: rgb(247 247 247 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(31 31 31 / var(--tw-text-opacity));
}
.folder-nav-item-active {
background-color: hsl(var(--muted));
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(31 31 31 / var(--tw-text-opacity));
}
/* From Uiverse.io by cbolson */
.switch {
--_switch-bg-clr: lightgray;
--_switch-padding: 2px;
--_slider-bg-clr: #ffffff;
/* slider color unchecked - gray */
--_slider-bg-clr-on: #ffffff;
/* slider color checked - green */
--_slider-txt-clr: #374151;
--_label-padding: 0.5rem 1rem;
/* padding around the labels - this gives the switch it's global width and height */
--_switch-easing: cubic-bezier(0.47, 1.64, 0.41, 0.8);
/* easing on toggle switch */
color: #374151;
width: 5rem;
display: flex;
justify-content: center;
border-radius: 9999px;
cursor: pointer;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
position: relative;
isolation: isolate;
}
.switch input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.switch > span {
display: grid;
place-content: center;
transition: opacity 300ms ease-in-out 150ms;
padding: var(--_label-padding);
}
.switch::before,
.switch::after {
content: "";
position: absolute;
border-radius: inherit;
transition: inset 150ms ease-in-out;
}
/* switch slider */
.switch::before {
background-color: var(--_slider-bg-clr);
inset: var(--_switch-padding) 50% var(--_switch-padding) var(--_switch-padding);
transition:
inset 500ms var(--_switch-easing),
background-color 500ms ease-in-out;
z-index: -1;
box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px rgba(255, 255, 255, 0.3);
}
/* switch bg color */
.switch::after {
background-color: var(--_switch-bg-clr);
inset: 0;
z-index: -2;
transition: background-color 300ms ease-in-out;
}
/* switch bg color when checked - change to green */
.switch:has(input:checked)::after {
background-color: #4ade80;
}
/* switch hover & focus */
.switch:focus-within::after {
inset: -0.25rem;
}
.switch:has(input:checked):hover > span:first-of-type,
.switch:has(input:not(:checked)):hover > span:last-of-type {
opacity: 1;
transition-delay: 0ms;
transition-duration: 100ms;
}
/* switch hover */
.switch:has(input:checked):hover::before {
inset: var(--_switch-padding) var(--_switch-padding) var(--_switch-padding) 45%;
}
.switch:has(input:not(:checked)):hover::before {
inset: var(--_switch-padding) 45% var(--_switch-padding) var(--_switch-padding);
}
/* checked - move slider to right */
.switch:has(input:checked)::before {
background-color: var(--_slider-bg-clr-on);
inset: var(--_switch-padding) var(--_switch-padding) var(--_switch-padding) 50%;
}
/* checked - set opacity */
.switch > span:last-of-type {
opacity: 0.75;
}
.switch > input:checked + span:first-of-type {
opacity: 0;
}
.switch > input:checked ~ span:last-of-type {
opacity: 1;
}
/* Workflow list - scaled down version */
.workflow-status-switch {
--_label-padding: 0.4rem 1rem;
--_switch-padding: 1.5px;
font-size: 0.6rem;
font-weight: 500;
}
/* HTMX loading indicator */
.htmx-indicator {
display: none;
}
.htmx-request .htmx-indicator {
display: inline-flex;
}
.htmx-request.htmx-indicator {
display: inline-flex;
}
.action-item-suggestion {
background-color: #f6fbff;
border-color: #e6f1fc;
}
.action-item-suggestion:hover {
background-color: #dfeaf5;
}
/* Read-only fieldset: consistent disabled styling for all field types.
!important overrides Tailwind utilities like bg-bg-primary, disabled:opacity-50 */
fieldset:disabled input:not(.opacity-0),
fieldset:disabled select,
fieldset:disabled textarea:not(.opacity-0),
fieldset:disabled button {
cursor: not-allowed !important;
background-color: rgb(245 245 245) !important;
/* bg-bg-hover / neutral-10 */
opacity: 0.7 !important;
}
fieldset:disabled input::-moz-placeholder, fieldset:disabled textarea::-moz-placeholder {
color: transparent !important;
}
fieldset:disabled input::placeholder,
fieldset:disabled textarea::placeholder {
color: transparent !important;
}
fieldset:disabled button .text-content-tertiary {
visibility: hidden;
}
fieldset:disabled .monaco-editor textarea {
background-color: transparent !important;
}
fieldset:disabled button[title="Remove this selection"],
fieldset:disabled button[title="Add Selection"] {
display: none !important;
}
fieldset:disabled .monaco-editor {
pointer-events: none;
opacity: 0.6 !important;
}
/* ------------------------ DESIGN SYSTEM ------------------------ */
.navigation-item {
border-width: 1px;
border-color: transparent;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.navigation-item.nav-active {
border-radius: calc(var(--radius) - 2px);
}
.navigation-item.nav-active {
--tw-border-opacity: 1;
border-color: rgb(213 213 213 / var(--tw-border-opacity));
}
.navigation-item.nav-active {
--tw-bg-opacity: 1;
background-color: rgb(247 247 247 / var(--tw-bg-opacity));
}
.navigation-item.nav-active {
font-weight: 600;
}
.navigation-item.nav-active {
--tw-text-opacity: 1;
color: rgb(31 31 31 / var(--tw-text-opacity));
}
.main-settings-nav .navigation-item {
position: relative;
}
.main-settings-nav .navigation-item.nav-active {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
#plain-chat .launcher {
margin-bottom: 10px;
}
/* Approval card body expand animation */
@keyframes approval-card-expand {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: no-preference) {
details.group[open] > *:not(summary) {
animation: approval-card-expand 180ms ease-out;
}
}
.file\:mr-2::file-selector-button {
margin-right: 0.5rem;
}
.file\:cursor-pointer::file-selector-button {
cursor: pointer;
}
.file\:rounded::file-selector-button {
border-radius: 0.25rem;
}
.file\:border::file-selector-button {
border-width: 1px;
}
.file\:border-0::file-selector-button {
border-width: 0px;
}
.file\:border-\[color\:var\(--edge-strong\)\]::file-selector-button {
border-color: var(--edge-strong);
}
.file\:bg-\[color\:var\(--surface\)\]::file-selector-button {
background-color: var(--surface);
}
.file\:bg-transparent::file-selector-button {
background-color: transparent;
}
.file\:px-2::file-selector-button {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.file\:py-1::file-selector-button {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.file\:text-\[11px\]::file-selector-button {
font-size: 11px;
}
.file\:text-sm::file-selector-button {
font-size: 0.875rem;
line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
font-weight: 500;
}
.file\:text-\[color\:var\(--fg-secondary\)\]::file-selector-button {
color: var(--fg-secondary);
}
.file\:text-foreground::file-selector-button {
color: hsl(var(--foreground));
}
.placeholder\:text-\[color\:var\(--fg-disabled\)\]::-moz-placeholder {
color: var(--fg-disabled);
}
.placeholder\:text-\[color\:var\(--fg-disabled\)\]::placeholder {
color: var(--fg-disabled);
}
.placeholder\:text-content-disabled::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(189 189 189 / var(--tw-text-opacity));
}
.placeholder\:text-content-disabled::placeholder {
--tw-text-opacity: 1;
color: rgb(189 189 189 / var(--tw-text-opacity));
}
.placeholder\:text-content-tertiary::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(112 112 112 / var(--tw-text-opacity));
}
.placeholder\:text-content-tertiary::placeholder {
--tw-text-opacity: 1;
color: rgb(112 112 112 / var(--tw-text-opacity));
}
.placeholder\:text-fg-placeholder::-moz-placeholder {
color: var(--fg-placeholder);
}
.placeholder\:text-fg-placeholder::placeholder {
color: var(--fg-placeholder);
}
.placeholder\:text-muted-foreground::-moz-placeholder {
color: hsl(var(--muted-foreground));
}
.placeholder\:text-muted-foreground::placeholder {
color: hsl(var(--muted-foreground));
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute;
}
.before\:start-3::before {
content: var(--tw-content);
inset-inline-start: 0.75rem;
}
.before\:top-0::before {
content: var(--tw-content);
top: 0px;
}
.before\:-ms-px::before {
content: var(--tw-content);
margin-inline-start: -1px;
}
.before\:h-full::before {
content: var(--tw-content);
height: 100%;
}
.before\:w-0\.5::before {
content: var(--tw-content);
width: 0.125rem;
}
.before\:bg-bg-hover::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(247 247 247 / var(--tw-bg-opacity));
}
.last\:border-0:last-child {
border-width: 0px;
}
.last\:border-b-0:last-child {
border-bottom-width: 0px;
}
.last\:pb-0:last-child {
padding-bottom: 0px;
}
.empty\:hidden:empty {
display: none;
}
.focus-within\:border-bdr-focus:focus-within {
--tw-border-opacity: 1;
border-color: rgb(124 191 255 / var(--tw-border-opacity));
}
.focus-within\:border-blue-500:focus-within {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.focus-within\:border-indigo-500:focus-within {
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity));
}
.focus-within\:border-transparent:focus-within {
border-color: transparent;
}
.focus-within\:outline-none:focus-within {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus-within\:ring-1:focus-within {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-within\:ring-2:focus-within {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-within\:ring-bdr-focus:focus-within {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(124 191 255 / var(--tw-ring-opacity));
}
.focus-within\:ring-blue-500:focus-within {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
.focus-within\:ring-gray-400:focus-within {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
}
.focus-within\:ring-indigo-500:focus-within {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}
.focus-within\:ring-offset-2:focus-within {
--tw-ring-offset-width: 2px;
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:rounded-md:hover {
border-radius: calc(var(--radius) - 2px);
}
.hover\:border-\[color\:var\(--accent-muted\)\]:hover {
border-color: var(--accent-muted);
}
.hover\:border-\[color\:var\(--edge-focus\)\]:hover {
border-color: var(--edge-focus);
}
.hover\:border-\[color\:var\(--edge-strong\)\]:hover {
border-color: var(--edge-strong);
}
.hover\:border-bdr-focus:hover {
--tw-border-opacity: 1;
border-color: rgb(124 191 255 / var(--tw-border-opacity));
}
.hover\:border-bdr-info:hover {
--tw-border-opacity: 1;
border-color: rgb(87 169 255 / var(--tw-border-opacity));
}
.hover\:border-bdr-negative:hover {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.hover\:border-bdr-positive:hover {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.hover\:border-bdr-primary:hover {
--tw-border-opacity: 1;
border-color: rgb(189 189 189 / var(--tw-border-opacity));
}
.hover\:border-bdr-secondary:hover {
--tw-border-opacity: 1;
border-color: rgb(213 213 213 / var(--tw-border-opacity));
}
.hover\:border-bdr-tertiary:hover {
--tw-border-opacity: 1;
border-color: rgb(238 238 238 / var(--tw-border-opacity));
}
.hover\:border-blue-300:hover {
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
.hover\:border-blue-400:hover {
--tw-border-opacity: 1;
border-color: rgb(96 165 250 / var(--tw-border-opacity));
}
.hover\:border-blue-500:hover {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.hover\:border-content-secondary:hover {
--tw-border-opacity: 1;
border-color: rgb(85 85 85 / var(--tw-border-opacity));
}
.hover\:border-edge-strong:hover {
border-color: var(--edge-strong);
}
.hover\:border-indigo-300:hover {
--tw-border-opacity: 1;
border-color: rgb(165 180 252 / var(--tw-border-opacity));
}
.hover\:border-indigo-500:hover {
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity));
}
.hover\:bg-\[color\:var\(--accent-hover\)\]:hover {
background-color: var(--accent-hover);
}
.hover\:bg-\[color\:var\(--accent-subtle\)\]:hover {
background-color: var(--accent-subtle);
}
.hover\:bg-\[color\:var\(--danger-subtle\)\]:hover {
background-color: var(--danger-subtle);
}
.hover\:bg-\[color\:var\(--surface-inverse-overlay\)\]:hover {
background-color: var(--surface-inverse-overlay);
}
.hover\:bg-\[color\:var\(--surface-inverse-overlay-hover\)\]:hover {
background-color: var(--surface-inverse-overlay-hover);
}
.hover\:bg-\[color\:var\(--surface-tint\)\]:hover {
background-color: var(--surface-tint);
}
.hover\:bg-\[color\:var\(--warning-subtle\)\]:hover {
background-color: var(--warning-subtle);
}
.hover\:bg-accent:hover {
background-color: hsl(var(--accent));
}
.hover\:bg-amber-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}
.hover\:bg-bdr-tertiary:hover {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}
.hover\:bg-bg-brand-deep-hover:hover {
--tw-bg-opacity: 1;
background-color: rgb(20 113 111 / var(--tw-bg-opacity));
}
.hover\:bg-bg-brand-deep-pressed:hover {
--tw-bg-opacity: 1;
background-color: rgb(0 63 60 / var(--tw-bg-opacity));
}
.hover\:bg-bg-brand-subtle:hover {
--tw-bg-opacity: 1;
background-color: rgb(240 245 243 / var(--tw-bg-opacity));
}
.hover\:bg-bg-brand-subtle-hover:hover {
--tw-bg-opacity: 1;
background-color: rgb(220 231 229 / var(--tw-bg-opacity));
}
.hover\:bg-bg-disabled:hover {
--tw-bg-opacity: 1;
background-color: rgb(163 163 163 / var(--tw-bg-opacity));
}
.hover\:bg-bg-hover:hover {
--tw-bg-opacity: 1;
background-color: rgb(247 247 247 / var(--tw-bg-opacity));
}
.hover\:bg-bg-hover\/30:hover {
background-color: rgb(247 247 247 / 0.3);
}
.hover\:bg-bg-hover\/40:hover {
background-color: rgb(247 247 247 / 0.4);
}
.hover\:bg-bg-hover\/50:hover {
background-color: rgb(247 247 247 / 0.5);
}
.hover\:bg-bg-info:hover {
--tw-bg-opacity: 1;
background-color: rgb(169 210 255 / var(--tw-bg-opacity));
}
.hover\:bg-bg-info-pressed:hover {
--tw-bg-opacity: 1;
background-color: rgb(233 244 255 / var(--tw-bg-opacity));
}
.hover\:bg-bg-info-subtle:hover {
--tw-bg-opacity: 1;
background-color: rgb(233 244 255 / var(--tw-bg-opacity));
}
.hover\:bg-bg-info-subtle\/80:hover {
background-color: rgb(233 244 255 / 0.8);
}
.hover\:bg-bg-info\/20:hover {
background-color: rgb(169 210 255 / 0.2);
}
.hover\:bg-bg-inverse:hover {
--tw-bg-opacity: 1;
background-color: rgb(31 31 31 / var(--tw-bg-opacity));
}
.hover\:bg-bg-inverse-hover:hover {
--tw-bg-opacity: 1;
background-color: rgb(85 85 85 / var(--tw-bg-opacity));
}
.hover\:bg-bg-inverse-pressed:hover {
--tw-bg-opacity: 1;
background-color: rgb(112 112 112 / var(--tw-bg-opacity));
}
.hover\:bg-bg-negative:hover {
--tw-bg-opacity: 1;
background-color: rgb(215 38 38 / var(--tw-bg-opacity));
}
.hover\:bg-bg-negative-subtle:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.hover\:bg-bg-negative\/90:hover {
background-color: rgb(215 38 38 / 0.9);
}
.hover\:bg-bg-notice:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}
.hover\:bg-bg-positive:hover {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.hover\:bg-bg-positive-subtle:hover {
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}
.hover\:bg-bg-pressed:hover {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}
.hover\:bg-bg-primary:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:bg-bg-secondary:hover {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}
.hover\:bg-bg-tertiary:hover {
--tw-bg-opacity: 1;
background-color: rgb(213 213 213 / var(--tw-bg-opacity));
}
.hover\:bg-indigo-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(224 231 255 / var(--tw-bg-opacity));
}
.hover\:bg-indigo-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(238 242 255 / var(--tw-bg-opacity));
}
.hover\:bg-indigo-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}
.hover\:bg-indigo-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(67 56 202 / var(--tw-bg-opacity));
}
.hover\:bg-muted:hover {
background-color: hsl(var(--muted));
}
.hover\:bg-muted\/100:hover {
background-color: hsl(var(--muted) / 1);
}
.hover\:bg-muted\/30:hover {
background-color: hsl(var(--muted) / 0.3);
}
.hover\:bg-muted\/50:hover {
background-color: hsl(var(--muted) / 0.5);
}
.hover\:bg-muted\/80:hover {
background-color: hsl(var(--muted) / 0.8);
}
.hover\:bg-orange-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 237 213 / var(--tw-bg-opacity));
}
.hover\:bg-primary\/90:hover {
background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-secondary\/80:hover {
background-color: hsl(var(--secondary) / 0.8);
}
.hover\:bg-slate-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
.hover\:bg-opacity-75:hover {
--tw-bg-opacity: 0.75;
}
.hover\:from-sky-200:hover {
--tw-gradient-from: #bae6fd var(--tw-gradient-from-position);
--tw-gradient-to: rgb(186 230 253 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:via-sky-100:hover {
--tw-gradient-to: rgb(224 242 254 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #e0f2fe var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.hover\:font-bold:hover {
font-weight: 700;
}
.hover\:font-semibold:hover {
font-weight: 600;
}
.hover\:text-\[color\:var\(--accent\)\]:hover {
color: var(--accent);
}
.hover\:text-\[color\:var\(--accent-hover\)\]:hover {
color: var(--accent-hover);
}
.hover\:text-\[color\:var\(--danger\)\]:hover {
color: var(--danger);
}
.hover\:text-\[color\:var\(--fg\)\]:hover {
color: var(--fg);
}
.hover\:text-\[color\:var\(--fg-secondary\)\]:hover {
color: var(--fg-secondary);
}
.hover\:text-accent-foreground:hover {
color: hsl(var(--accent-foreground));
}
.hover\:text-blue-600:hover {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.hover\:text-blue-700:hover {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.hover\:text-blue-800:hover {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity));
}
.hover\:text-blue-900:hover {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
}
.hover\:text-content-brand:hover {
--tw-text-opacity: 1;
color: rgb(209 255 0 / var(--tw-text-opacity));
}
.hover\:text-content-brand-deep:hover {
--tw-text-opacity: 1;
color: rgb(78 169 165 / var(--tw-text-opacity));
}
.hover\:text-content-info-bold:hover {
--tw-text-opacity: 1;
color: rgb(47 140 255 / var(--tw-text-opacity));
}
.hover\:text-content-link-pressed:hover {
--tw-text-opacity: 1;
color: rgb(19 42 78 / var(--tw-text-opacity));
}
.hover\:text-content-negative:hover {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.hover\:text-content-negative-bold:hover {
--tw-text-opacity: 1;
color: rgb(215 38 38 / var(--tw-text-opacity));
}
.hover\:text-content-positive:hover {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.hover\:text-content-positive-bold:hover {
--tw-text-opacity: 1;
color: rgb(30 123 71 / var(--tw-text-opacity));
}
.hover\:text-content-primary:hover {
--tw-text-opacity: 1;
color: rgb(31 31 31 / var(--tw-text-opacity));
}
.hover\:text-content-primary-inverse:hover {
--tw-text-opacity: 1;
color: rgb(247 247 247 / var(--tw-text-opacity));
}
.hover\:text-content-secondary:hover {
--tw-text-opacity: 1;
color: rgb(85 85 85 / var(--tw-text-opacity));
}
.hover\:text-content-tertiary:hover {
--tw-text-opacity: 1;
color: rgb(112 112 112 / var(--tw-text-opacity));
}
.hover\:text-fg-secondary:hover {
color: var(--fg-secondary);
}
.hover\:text-foreground:hover {
color: hsl(var(--foreground));
}
.hover\:text-green-800:hover {
--tw-text-opacity: 1;
color: rgb(22 101 52 / var(--tw-text-opacity));
}
.hover\:text-indigo-600:hover {
--tw-text-opacity: 1;
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.hover\:text-indigo-700:hover {
--tw-text-opacity: 1;
color: rgb(67 56 202 / var(--tw-text-opacity));
}
.hover\:text-indigo-800:hover {
--tw-text-opacity: 1;
color: rgb(55 48 163 / var(--tw-text-opacity));
}
.hover\:text-orange-800:hover {
--tw-text-opacity: 1;
color: rgb(154 52 18 / var(--tw-text-opacity));
}
.hover\:text-purple-800:hover {
--tw-text-opacity: 1;
color: rgb(107 33 168 / var(--tw-text-opacity));
}
.hover\:text-red-500:hover {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.hover\:text-red-600:hover {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity));
}
.hover\:text-red-700:hover {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity));
}
.hover\:text-red-800:hover {
--tw-text-opacity: 1;
color: rgb(153 27 27 / var(--tw-text-opacity));
}
.hover\:text-red-900:hover {
--tw-text-opacity: 1;
color: rgb(127 29 29 / var(--tw-text-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.hover\:no-underline:hover {
text-decoration-line: none;
}
.hover\:opacity-100:hover {
opacity: 1;
}
.hover\:opacity-70:hover {
opacity: 0.7;
}
.hover\:opacity-80:hover {
opacity: 0.8;
}
.hover\:opacity-90:hover {
opacity: 0.9;
}
.hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-sm:hover {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:file\:bg-\[color\:var\(--surface-tint\)\]::file-selector-button:hover {
background-color: var(--surface-tint);
}
.focus\:cursor-text:focus {
cursor: text;
}
.focus\:border-0:focus {
border-width: 0px;
}
.focus\:border-\[color\:var\(--edge-focus\)\]:focus {
border-color: var(--edge-focus);
}
.focus\:border-bdr-brand-deep:focus {
--tw-border-opacity: 1;
border-color: rgb(20 113 111 / var(--tw-border-opacity));
}
.focus\:border-bdr-focus:focus {
--tw-border-opacity: 1;
border-color: rgb(124 191 255 / var(--tw-border-opacity));
}
.focus\:border-bdr-negative:focus {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.focus\:border-bdr-secondary:focus {
--tw-border-opacity: 1;
border-color: rgb(213 213 213 / var(--tw-border-opacity));
}
.focus\:border-blue-500:focus {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.focus\:border-edge-focus:focus {
border-color: var(--edge-focus);
}
.focus\:border-indigo-500:focus {
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity));
}
.focus\:border-primary:focus {
border-color: hsl(var(--primary));
}
.focus\:border-red-500:focus {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
.focus\:border-transparent:focus {
border-color: transparent;
}
.focus\:bg-bg-primary:focus {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.focus\:placeholder-content-disabled:focus::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(189 189 189 / var(--tw-placeholder-opacity));
}
.focus\:placeholder-content-disabled:focus::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(189 189 189 / var(--tw-placeholder-opacity));
}
.focus\:placeholder-gray-400:focus::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}
.focus\:placeholder-gray-400:focus::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-0:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-1:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-accent:focus {
--tw-ring-color: hsl(var(--accent));
}
.focus\:ring-bdr-brand-deep:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(20 113 111 / var(--tw-ring-opacity));
}
.focus\:ring-bdr-brand-subtle:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(138 168 161 / var(--tw-ring-opacity));
}
.focus\:ring-bdr-focus:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(124 191 255 / var(--tw-ring-opacity));
}
.focus\:ring-bdr-negative:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}
.focus\:ring-black:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
}
.focus\:ring-blue-400:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
}
.focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
.focus\:ring-edge-focus:focus {
--tw-ring-color: var(--edge-focus);
}
.focus\:ring-gray-400:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
}
.focus\:ring-gray-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
}
.focus\:ring-gray-700:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
}
.focus\:ring-indigo-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}
.focus\:ring-neutral-200\/60:focus {
--tw-ring-color: rgb(229 229 229 / 0.6);
}
.focus\:ring-neutral-400:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(163 163 163 / var(--tw-ring-opacity));
}
.focus\:ring-neutral-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(115 115 115 / var(--tw-ring-opacity));
}
.focus\:ring-neutral-900:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity));
}
.focus\:ring-orange-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));
}
.focus\:ring-primary:focus {
--tw-ring-color: hsl(var(--primary));
}
.focus\:ring-primary\/20:focus {
--tw-ring-color: hsl(var(--primary) / 0.2);
}
.focus\:ring-red-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}
.focus\:ring-ring:focus {
--tw-ring-color: hsl(var(--ring));
}
.focus\:ring-offset-1:focus {
--tw-ring-offset-width: 1px;
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus-visible\:ring-1:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-bdr-focus:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(124 191 255 / var(--tw-ring-opacity));
}
.focus-visible\:ring-bdr-negative:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}
.focus-visible\:ring-bdr-positive:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
}
.focus-visible\:ring-ring:focus-visible {
--tw-ring-color: hsl(var(--ring));
}
.focus-visible\:ring-offset-2:focus-visible {
--tw-ring-offset-width: 2px;
}
.active\:bg-bg-inverse-pressed:active {
--tw-bg-opacity: 1;
background-color: rgb(112 112 112 / var(--tw-bg-opacity));
}
.active\:bg-bg-pressed:active {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}
.active\:bg-bg-primary:active {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.active\:opacity-80:active {
opacity: 0.8;
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:bg-bg-hover:disabled {
--tw-bg-opacity: 1;
background-color: rgb(247 247 247 / var(--tw-bg-opacity));
}
.disabled\:bg-bg-secondary:disabled {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}
.disabled\:bg-bg-tertiary:disabled {
--tw-bg-opacity: 1;
background-color: rgb(213 213 213 / var(--tw-bg-opacity));
}
.disabled\:text-content-disabled:disabled {
--tw-text-opacity: 1;
color: rgb(189 189 189 / var(--tw-text-opacity));
}
.disabled\:text-content-tertiary:disabled {
--tw-text-opacity: 1;
color: rgb(112 112 112 / var(--tw-text-opacity));
}
.disabled\:opacity-30:disabled {
opacity: 0.3;
}
.disabled\:opacity-40:disabled {
opacity: 0.4;
}
.disabled\:opacity-50:disabled {
opacity: 0.5;
}
.disabled\:hover\:bg-transparent:hover:disabled {
background-color: transparent;
}
.group[open] .group-open\:inline {
display: inline;
}
.group[open] .group-open\:hidden {
display: none;
}
.group[open] .group-open\:rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:visible {
visibility: visible;
}
.group:hover .group-hover\:left-0 {
left: 0px;
}
.group:hover .group-hover\:flex {
display: flex;
}
.group:hover .group-hover\:w-0\.5 {
width: 0.125rem;
}
.group:hover .group-hover\:w-full {
width: 100%;
}
.group:hover .group-hover\:translate-y-0\.5 {
--tw-translate-y: 0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:border-l {
border-left-width: 1px;
}
.group:hover .group-hover\:border-r {
border-right-width: 1px;
}
.group:hover .group-hover\:border-bdr-primary {
--tw-border-opacity: 1;
border-color: rgb(189 189 189 / var(--tw-border-opacity));
}
.group:hover .group-hover\:bg-\[color\:var\(--accent\)\] {
background-color: var(--accent);
}
.group:hover .group-hover\:bg-amber-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-bg-brand-subtle {
--tw-bg-opacity: 1;
background-color: rgb(240 245 243 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-bg-info-subtle {
--tw-bg-opacity: 1;
background-color: rgb(233 244 255 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-bg-negative-subtle {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-bg-positive-subtle {
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-indigo-200 {
--tw-bg-opacity: 1;
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:font-bold {
font-weight: 700;
}
.group\/team:hover .group-hover\/team\:text-content-primary {
--tw-text-opacity: 1;
color: rgb(31 31 31 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-\[color\:var\(--accent\)\] {
color: var(--accent);
}
.group:hover .group-hover\:text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-content-info-bold {
--tw-text-opacity: 1;
color: rgb(47 140 255 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-content-secondary {
--tw-text-opacity: 1;
color: rgb(85 85 85 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-foreground {
color: hsl(var(--foreground));
}
.group:hover .group-hover\:text-indigo-600 {
--tw-text-opacity: 1;
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.group\/team:hover .group-hover\/team\:opacity-100 {
opacity: 1;
}
.group\/tooltip:hover .group-hover\/tooltip\:opacity-100 {
opacity: 1;
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.peer:checked ~ .peer-checked\:translate-x-3 {
--tw-translate-x: 0.75rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.peer:checked ~ .peer-checked\:bg-bg-brand-deep {
--tw-bg-opacity: 1;
background-color: rgb(78 169 165 / var(--tw-bg-opacity));
}
.peer:focus-visible ~ .peer-focus-visible\:ring-2 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-bdr-focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(124 191 255 / var(--tw-ring-opacity));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
opacity: 0.7;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
pointer-events: none;
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
background-color: hsl(var(--primary));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-muted[data-state="open"] {
background-color: hsl(var(--muted));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
background-color: hsl(var(--muted));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
color: hsl(var(--primary-foreground));
}
.data-\[disabled\]\:opacity-50[data-disabled] {
opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
.motion-safe\:transition-\[max-height\] {
transition-property: max-height;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.motion-safe\:transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.motion-safe\:transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.motion-safe\:duration-200 {
transition-duration: 200ms;
}
.motion-safe\:duration-300 {
transition-duration: 300ms;
}
.motion-safe\:ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.motion-safe\:duration-200 {
animation-duration: 200ms;
}
.motion-safe\:duration-300 {
animation-duration: 300ms;
}
.motion-safe\:ease-out {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
.dark\:border-bdr-primary:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(189 189 189 / var(--tw-border-opacity));
}
.dark\:border-orange-700:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(194 65 12 / var(--tw-border-opacity));
}
.dark\:bg-bg-inverse:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 31 31 / var(--tw-bg-opacity));
}
.dark\:bg-orange-950\/30:is(.dark *) {
background-color: rgb(67 20 7 / 0.3);
}
.dark\:text-content-disabled:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(189 189 189 / var(--tw-text-opacity));
}
.dark\:text-content-primary-inverse:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(247 247 247 / var(--tw-text-opacity));
}
.dark\:text-orange-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(253 186 116 / var(--tw-text-opacity));
}
.dark\:text-orange-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity));
}
.dark\:ring-offset-gray-800:is(.dark *) {
--tw-ring-offset-color: #1f2937;
}
.dark\:hover\:bg-bg-inverse:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 31 31 / var(--tw-bg-opacity));
}
.dark\:hover\:text-content-primary-inverse:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(247 247 247 / var(--tw-text-opacity));
}
.dark\:focus\:text-content-primary-inverse:focus:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(247 247 247 / var(--tw-text-opacity));
}
.dark\:focus\:ring-blue-500:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-gray-600:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
}
@media (min-width: 640px) {
.sm\:col-span-2 {
grid-column: span 2 / span 2;
}
.sm\:-mx-6 {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.sm\:my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.sm\:ml-3 {
margin-left: 0.75rem;
}
.sm\:mt-0 {
margin-top: 0px;
}
.sm\:flex {
display: flex;
}
.sm\:table-cell {
display: table-cell;
}
.sm\:grid {
display: grid;
}
.sm\:w-auto {
width: auto;
}
.sm\:w-full {
width: 100%;
}
.sm\:max-w-lg {
max-width: 32rem;
}
.sm\:translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.sm\:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.sm\:scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sm\:flex-row {
flex-direction: row;
}
.sm\:flex-row-reverse {
flex-direction: row-reverse;
}
.sm\:items-center {
align-items: center;
}
.sm\:gap-4 {
gap: 1rem;
}
.sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.25rem * var(--tw-space-x-reverse));
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.sm\:rounded-lg {
border-radius: var(--radius);
}
.sm\:p-0 {
padding: 0px;
}
.sm\:p-6 {
padding: 1.5rem;
}
.sm\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
.sm\:px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.sm\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:pb-4 {
padding-bottom: 1rem;
}
.sm\:pl-6 {
padding-left: 1.5rem;
}
.sm\:pr-6 {
padding-right: 1.5rem;
}
.sm\:text-left {
text-align: left;
}
.sm\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
@media (min-width: 768px) {
.md\:order-1 {
order: 1;
}
.md\:order-2 {
order: 2;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.md\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.md\:grid-cols-\[200px_1fr\] {
grid-template-columns: 200px 1fr;
}
.md\:grid-cols-\[300px_1fr\] {
grid-template-columns: 300px 1fr;
}
}
@media (min-width: 1024px) {
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.lg\:-mx-8 {
margin-left: -2rem;
margin-right: -2rem;
}
.lg\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.lg\:flex {
display: flex;
}
.lg\:hidden {
display: none;
}
.lg\:w-\[250px\] {
width: 250px;
}
.lg\:max-w-none {
max-width: none;
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1280px) {
.xl\:order-1 {
order: 1;
}
.xl\:order-2 {
order: 2;
}
.xl\:col-span-4 {
grid-column: span 4 / span 4;
}
.xl\:col-span-8 {
grid-column: span 8 / span 8;
}
.xl\:grid {
display: grid;
}
.xl\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
padding-right: 0px;
}
.\[\&\:has\(svg\)\]\:pl-11:has(svg) {
padding-left: 2.75rem;
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
--tw-translate-y: 2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
--tw-translate-y: -3px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\>path\]\:stroke-blue-600>svg>path {
stroke: #2563eb;
}
.\[\&\>svg\]\:absolute>svg {
position: absolute;
}
.\[\&\>svg\]\:left-2>svg {
left: 0.5rem;
}
.\[\&\>svg\]\:left-4>svg {
left: 1rem;
}
.\[\&\>svg\]\:top-4>svg {
top: 1rem;
}
.\[\&\>svg\]\:text-foreground>svg {
color: hsl(var(--foreground));
}
.\[\&_h1\]\:font-medium h1 {
font-weight: 500;
}
.\[\&_h2\]\:font-medium h2 {
font-weight: 500;
}
.\[\&_h3\]\:font-medium h3 {
font-weight: 500;
}
.\[\&_h4\]\:font-medium h4 {
font-weight: 500;
}
.\[\&_p\]\:my-1 p {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.\[\&_svg\]\:pointer-events-none svg {
pointer-events: none;
}
.\[\&_svg\]\:size-3 svg {
width: 0.75rem;
height: 0.75rem;
}
.\[\&_svg\]\:size-4 svg {
width: 1rem;
height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg {
flex-shrink: 0;
}
.\[\&_svg\]\:text-content-brand-deep svg {
--tw-text-opacity: 1;
color: rgb(78 169 165 / var(--tw-text-opacity));
}
.\[\&_svg\]\:text-content-tertiary svg {
--tw-text-opacity: 1;
color: rgb(112 112 112 / var(--tw-text-opacity));
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
border-bottom-width: 1px;
}