/* Hexode components (v1, 07/10/2026). Generic pieces ported from the Neruvo components v2.1 (popover, select with filter and multi, command search, list with accordion, menu, tooltip, checkbox, radio, slider, upload, skeleton), plus the Hexode domain pieces at the end: agent conversation, connectors, funnel with the leak, agent row. Needs hexode-ds.css (tokens). Behaviour in hexode-components.js. */ /* ---------- Popover surface (menus, listboxes, palette) ---------- */ .hx-pop{position:absolute;z-index:40;min-width:100%;padding:var(--hx-1);border-radius:16px;background:var(--hx-surface);border:1px solid var(--hx-card-line); box-shadow:0 1px 2px rgb(5 6 8/.06),0 24px 56px -20px rgb(5 6 8/.35);transform-origin:top;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;visibility:hidden; transition:opacity 180ms var(--hx-ease),transform 240ms var(--hx-ease),visibility 0s linear 240ms} .hx-pop.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s} :root[data-theme=dark] .hx-pop,.hx-night .hx-pop{box-shadow:0 0 0 1px rgb(242 244 247/.06),0 24px 56px -20px rgb(0 0 0/.8)} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .hx-pop{box-shadow:0 0 0 1px rgb(242 244 247/.06),0 24px 56px -20px rgb(0 0 0/.8)}} .hx-opt{display:flex;align-items:center;gap:var(--hx-3);min-height:44px;padding:0 var(--hx-3);border-radius:10px;cursor:pointer;color:var(--hx-text);font-size:var(--hx-text-md); transition:background 120ms var(--hx-ease)} .hx-opt small{margin-left:auto;color:var(--hx-text-3);font-size:var(--hx-text-sm)} .hx-opt[aria-selected=true]::after{content:"";width:14px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px);margin-left:auto;flex:none} .hx-opt[aria-selected=true] small{margin-left:auto;margin-right:var(--hx-2)} .hx-opt.is-active{background:var(--hx-surface-2)} .hx-opt[aria-disabled=true]{opacity:.4;cursor:not-allowed} .hx-opt-group{padding:var(--hx-3) var(--hx-3) var(--hx-1);font:500 var(--hx-text-xs)/1 var(--hx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hx-text-3)} .hx-opt .hx-mentor{width:28px;height:28px}.hx-opt .hx-mentor .hx-mark{height:15px} /* ---------- Select (custom listbox) ---------- */ .hx-select{position:relative} .hx-select-btn{width:100%;height:var(--hx-target);display:flex;align-items:center;gap:var(--hx-3);padding:0 var(--hx-4);border-radius:var(--hx-radius-md);border:1px solid var(--hx-line-2); background:var(--hx-surface);color:var(--hx-text);font:var(--hx-text-md) var(--hx-sans);cursor:pointer;text-align:left; transition:border-color var(--hx-state) var(--hx-ease),box-shadow var(--hx-state) var(--hx-ease)} .hx-select-btn:hover{border-color:var(--hx-text-3)} .hx-select-btn[aria-expanded=true]{border-color:var(--hx-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--hx-key) 55%,transparent)} .hx-select-btn .hx-chev{margin-left:auto;width:10px;height:10px;border-right:2px solid var(--hx-text-2);border-bottom:2px solid var(--hx-text-2);transform:rotate(45deg) translateY(-3px);transition:transform 240ms var(--hx-ease)} .hx-select-btn[aria-expanded=true] .hx-chev{transform:rotate(225deg) translateY(-1px)} .hx-select .hx-pop{top:calc(100% + 6px);left:0;max-height:300px;overflow:auto} .hx-select .hx-filter{display:block;width:100%;height:40px;border:0;border-bottom:1px solid var(--hx-line);background:transparent;color:var(--hx-text);padding:0 var(--hx-3); font:var(--hx-text-md) var(--hx-sans);margin-bottom:var(--hx-1)} .hx-select .hx-filter:focus{outline:none} /* multi select chips */ .hx-chips{display:flex;flex-wrap:wrap;gap:var(--hx-1);flex:1;min-width:0} .hx-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 10px;border-radius:999px;background:var(--hx-surface-2);font-size:var(--hx-text-sm);color:var(--hx-text)} .hx-chip button{border:0;background:transparent;color:var(--hx-text-3);width:24px;height:24px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:14px;line-height:1} .hx-chip button:active{transform:scale(.9)} .hx-chip button:hover{background:var(--hx-surface-3);color:var(--hx-text)} .hx-select-btn.is-multi{height:auto;min-height:var(--hx-target);padding:var(--hx-1) var(--hx-4) var(--hx-1) var(--hx-2)} .hx-select-btn .hx-placeholder{color:var(--hx-text-3)} /* ---------- Command search (⌘K) ---------- */ .hx-kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;border:1px solid var(--hx-line-2);border-bottom-width:2px; font:500 12px var(--hx-mono);color:var(--hx-text-2);background:var(--hx-surface)} .hx-search-trigger{display:flex;align-items:center;gap:var(--hx-3);width:100%;height:48px;padding:0 var(--hx-3) 0 var(--hx-4);border-radius:var(--hx-radius-pill);border:1px solid var(--hx-line-2); background:var(--hx-surface);color:var(--hx-text-3);font:var(--hx-text-md) var(--hx-sans);cursor:pointer;transition:border-color var(--hx-state) var(--hx-ease),box-shadow 380ms var(--hx-ease)} .hx-search-trigger:hover{border-color:var(--hx-text-3);box-shadow:var(--hx-shadow)} .hx-search-trigger svg{width:18px;height:18px}.hx-search-trigger .hx-kbd{margin-left:auto} .hx-palette{border:0;padding:0;background:transparent;width:min(680px,calc(100% - 24px));max-height:min(620px,calc(100% - 48px));margin:10vh auto auto;overflow:visible} .hx-palette::backdrop{background:var(--hx-scrim);backdrop-filter:blur(4px)} .hx-palette[open]{animation:hx-pop 300ms var(--hx-ease)} .hx-palette-box{border-radius:24px;background:var(--hx-surface);border:1px solid var(--hx-card-line);box-shadow:0 40px 80px -30px rgb(0 0 0/.55);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;max-height:inherit} .hx-palette-head{display:flex;align-items:center;gap:var(--hx-3);padding:var(--hx-3) var(--hx-4);border-bottom:1px solid var(--hx-line)} .hx-palette-head canvas{width:28px} .hx-palette-head input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--hx-text);font:var(--hx-text-lg) var(--hx-sans)} .hx-palette-head input:focus{outline:none} .hx-palette-head input::-webkit-search-cancel-button,.hx-ask input::-webkit-search-cancel-button{display:none} .hx-palette-list{overflow:auto;padding:var(--hx-2)} .hx-result{display:grid;grid-template-columns:auto 1fr auto;gap:var(--hx-3);align-items:center;padding:var(--hx-3);border-radius:12px;cursor:pointer;color:var(--hx-text);text-decoration:none} .hx-result.is-active{background:var(--hx-surface-2)} .hx-result .ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--hx-surface-2);color:var(--hx-text-2)} .hx-result.is-active .ico{background:var(--hx-surface)} .hx-result b{display:block;font-weight:600;font-size:var(--hx-text-md)} .hx-result span.sub{display:block;font-size:var(--hx-text-sm);color:var(--hx-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hx-result mark{background:linear-gradient(var(--hx-key),var(--hx-key)) no-repeat 0 60%/100% 78%;color:var(--hx-ink);padding:0 2px;border-radius:2px} .hx-answer{margin:var(--hx-2);padding:var(--hx-4);border-radius:16px;border:1px solid color-mix(in srgb,var(--hx-key) 50%,transparent);background:color-mix(in srgb,var(--hx-key) 8%,var(--hx-surface));display:grid;gap:var(--hx-2)} .hx-answer-head{display:flex;align-items:center;gap:var(--hx-2);font-weight:600;font-size:var(--hx-text-sm)} .hx-answer-head canvas{width:22px} .hx-answer p{margin:0;color:var(--hx-text)} .hx-palette-foot{display:flex;gap:var(--hx-4);padding:var(--hx-3) var(--hx-4);border-top:1px solid var(--hx-line);font-size:var(--hx-text-sm);color:var(--hx-text-3)} .hx-palette-foot span{display:inline-flex;align-items:center;gap:6px} .hx-palette-empty{padding:var(--hx-7) var(--hx-5);text-align:center;color:var(--hx-text-2)} /* ---------- Chapters (accordion of the minutes) ---------- */ .hx-chapters{border-radius:var(--hx-radius-lg);border:1px solid var(--hx-card-line);background:var(--hx-surface);box-shadow:var(--hx-shadow);overflow:hidden} .hx-chapter{border-top:1px solid var(--hx-line)}.hx-chapter:first-child{border-top:0} .hx-chapter summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:56px 1fr auto 24px;gap:var(--hx-3);align-items:center;padding:var(--hx-3) var(--hx-5);min-height:64px; transition:background 140ms var(--hx-ease)} .hx-chapter summary::-webkit-details-marker{display:none} .hx-chapter summary:hover{background:var(--hx-surface-2)} .hx-chapter summary b{font-weight:600} .hx-chapter summary .count{display:flex;gap:6px;align-items:center} .hx-chapter summary .count i{width:18px;height:8px} .hx-chapter summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--hx-text-3);border-bottom:2px solid var(--hx-text-3);transform:rotate(45deg);justify-self:center;transition:transform 300ms var(--hx-ease)} .hx-chapter[open] summary::after{transform:rotate(225deg)} .hx-chapter .hx-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 350ms var(--hx-ease)} .hx-chapter[open] .hx-acc-body{grid-template-rows:1fr} .hx-chapter .hx-acc-body>div{overflow:hidden;padding:0 var(--hx-5) 0 calc(56px + var(--hx-5) + var(--hx-3))} .hx-chapter[open] .hx-acc-body>div{padding-bottom:var(--hx-4)} .hx-chapter .bar{height:3px;background:var(--hx-surface-3);border-radius:3px;margin-top:6px;overflow:hidden} .hx-chapter .bar i{display:block;height:100%;background:var(--hx-key);width:var(--w)} /* ---------- Menu and tooltip ---------- */ .hx-menu{position:relative;display:inline-block} .hx-menu .hx-pop{top:calc(100% + 6px);right:0;left:auto;min-width:220px;transform-origin:top right} button.hx-opt{border:0;background:transparent;width:100%;font:inherit;text-align:left} button.hx-opt:focus-visible{outline:2px solid var(--hx-text);outline-offset:-2px} .hx-opt{min-height:44px} .hx-menu .hx-opt.is-danger{color:var(--hx-error)} .hx-menu hr{border:0;border-top:1px solid var(--hx-line);margin:var(--hx-1) 0} [data-hx-tip]{position:relative} [data-hx-tip]::after{content:attr(data-hx-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:6px 10px;border-radius:8px;background:var(--hx-text);color:var(--hx-bg); font:500 var(--hx-text-xs)/1.3 var(--hx-sans);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 140ms var(--hx-ease) 300ms,transform 240ms var(--hx-ease) 300ms;z-index:30} [data-hx-tip]:hover::after,[data-hx-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)} /* ---------- Checkbox and radio ---------- */ .hx-check{display:flex;align-items:center;gap:var(--hx-3);min-height:44px;cursor:pointer;font-size:var(--hx-text-md)} .hx-check input{appearance:none;width:24px;height:24px;margin:0;flex:none;border:1.5px solid var(--hx-line-2);border-radius:7px;background:var(--hx-surface);display:grid;place-items:center;cursor:pointer; transition:background 180ms var(--hx-ease),border-color 180ms var(--hx-ease),transform 140ms var(--hx-ease)} .hx-check input::after{content:"";width:10px;height:5px;border-left:2px solid var(--hx-ink);border-bottom:2px solid var(--hx-ink);transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform 240ms var(--hx-ease)} .hx-check input:checked{background:var(--hx-key);border-color:var(--hx-key)} .hx-check input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)} .hx-check input:active{transform:scale(.9)} .hx-check input[type=radio]{border-radius:50%} .hx-check input[type=radio]::after{width:10px;height:10px;border:0;border-radius:50%;background:var(--hx-ink);transform:scale(0)} .hx-check input[type=radio]:checked::after{transform:scale(1)} .hx-check small{display:block;color:var(--hx-text-3);font-size:var(--hx-text-sm)} /* ---------- Slider ---------- */ .hx-slider{display:grid;gap:var(--hx-2)} .hx-slider-head{display:flex;justify-content:space-between;font-size:var(--hx-text-sm)} .hx-slider-head b{font:500 var(--hx-text-sm) var(--hx-mono)} .hx-slider input{appearance:none;width:100%;height:24px;background:transparent;margin:0;cursor:pointer;--p:50%} .hx-slider input::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--hx-key) var(--p),var(--hx-surface-3) var(--p))} .hx-slider input::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--hx-key) var(--p),var(--hx-surface-3) var(--p))} .hx-slider input::-webkit-slider-thumb{appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--hx-surface);border:2px solid var(--hx-text);box-shadow:var(--hx-shadow);transition:transform 140ms var(--hx-ease)} .hx-slider input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--hx-surface);border:2px solid var(--hx-text)} .hx-slider input:active::-webkit-slider-thumb{transform:scale(1.15)} /* ---------- Upload ---------- */ .hx-drop{display:grid;justify-items:center;gap:var(--hx-3);padding:var(--hx-6) var(--hx-5);border-radius:var(--hx-radius-lg);border:1.5px dashed var(--hx-line-2);background:var(--hx-surface);text-align:center;cursor:pointer; transition:border-color 240ms var(--hx-ease),background 240ms var(--hx-ease),transform 240ms var(--hx-ease)} .hx-drop:hover,.hx-drop.is-over{border-color:var(--hx-text);background:color-mix(in srgb,var(--hx-key) 10%,var(--hx-surface))} .hx-drop.is-over{transform:scale(1.01)} .hx-drop svg{width:32px;height:32px;color:var(--hx-text-2)} .hx-drop p{margin:0;color:var(--hx-text-2)} .hx-file{display:grid;grid-template-columns:auto 1fr auto;gap:var(--hx-3);align-items:center;padding:var(--hx-3) var(--hx-4);border-radius:16px;border:1px solid var(--hx-card-line);background:var(--hx-surface)} .hx-file .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--hx-surface-2)} .hx-file b{display:block;font-size:var(--hx-text-md)} .hx-file .hx-progress-bar{margin-top:6px} /* ---------- Skeleton ---------- */ @keyframes hx-skel{to{background-position:-200% 0}} .hx-skel{border-radius:8px;background:linear-gradient(90deg,var(--hx-surface-2) 0%,var(--hx-surface-3) 40%,var(--hx-surface-2) 80%) 0 0/200% 100%;animation:hx-skel 1.6s linear infinite} @media (max-width:640px){.hx-chip{height:44px;padding-left:12px}.hx-chip button{width:44px;height:44px} .hx-chapter summary{grid-template-columns:48px 1fr 24px}.hx-chapter summary .count{display:none}.hx-chapter .hx-acc-body>div{padding-left:var(--hx-5)}} @media (prefers-reduced-motion:reduce){.hx-skel{animation:none}.hx-pop{transition:none}} /* ================= Hexode domain ================= */ /* ---------- Agent conversation (WhatsApp, with hand-off to a person) ---------- */ .hx-chat{display:grid;gap:var(--hx-2);padding:var(--hx-4);border-radius:var(--hx-radius-lg);background:var(--hx-surface-2);border:1px solid var(--hx-card-line);min-height:320px;align-content:end} .hx-msg{max-width:80%;padding:10px 14px;border-radius:18px;font-size:var(--hx-text-md);line-height:1.45;animation:hx-msg-in 320ms var(--hx-ease) both} .hx-msg time{display:block;margin-top:4px;font:500 12px var(--hx-mono);opacity:.75} .hx-msg.lead{justify-self:start;background:var(--hx-surface);border:1px solid var(--hx-card-line);border-bottom-left-radius:6px} .hx-msg.agent{justify-self:end;background:var(--hx-ink);color:var(--hx-paper);border-bottom-right-radius:6px} :root[data-theme=dark] .hx-msg.agent{background:var(--hx-paper);color:var(--hx-ink)} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .hx-msg.agent{background:var(--hx-paper);color:var(--hx-ink)}} .hx-msg.system{justify-self:center;max-width:100%;background:transparent;border:1px dashed var(--hx-line-2);color:var(--hx-text-2);font-size:var(--hx-text-sm);border-radius:999px;padding:6px 14px} .hx-typing{justify-self:end;display:inline-flex;align-items:center;gap:8px;font-size:var(--hx-text-sm);color:var(--hx-text-2)} .hx-typing canvas{width:26px} @keyframes hx-msg-in{from{opacity:0;transform:translateY(8px) scale(.98)}} /* ---------- Connectors (the brand gesture lives here) ---------- */ .hx-connectors{display:grid;gap:var(--hx-2)} .hx-connector{display:grid;grid-template-columns:44px 1fr auto;gap:var(--hx-3);align-items:center;padding:var(--hx-3) var(--hx-4);border-radius:var(--hx-radius-md);border:1px solid var(--hx-card-line);background:var(--hx-surface); transition:border-color var(--hx-state) var(--hx-ease),box-shadow var(--hx-state) var(--hx-ease)} .hx-connector .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--hx-surface-2);font:600 15px var(--hx-display)} .hx-connector b{display:block} .hx-connector span.sub{font-size:var(--hx-text-sm);color:var(--hx-text-3)} .hx-connector.is-on{border-color:color-mix(in srgb,var(--hx-amber) 70%,transparent);box-shadow:0 18px 40px -26px rgb(37 64 230/.6)} .hx-connector.is-on .ico{background:var(--hx-key);color:var(--hx-ink)} /* the link: two dots that join when the connection is made */ .hx-link{display:inline-flex;align-items:center;width:44px;height:14px;position:relative} .hx-link::before,.hx-link::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--hx-text);position:absolute;top:1px;transition:transform var(--hx-stroke) var(--hx-ease)} .hx-link::before{left:0}.hx-link::after{right:0} .hx-link i{position:absolute;left:6px;right:6px;top:5px;height:4px;border-radius:4px;background:var(--hx-amber);transform:scaleX(0);transition:transform var(--hx-stroke) var(--hx-ease)} .is-on .hx-link i{transform:scaleX(1)} .is-on .hx-link::before{transform:translateX(3px)}.is-on .hx-link::after{transform:translateX(-3px)} /* ---------- Funnel with the leak ---------- */ .hx-funnel{display:grid;gap:var(--hx-3)} .hx-stage{display:grid;grid-template-columns:150px 1fr 72px;gap:var(--hx-3);align-items:center} .hx-stage>span{font-size:var(--hx-text-sm);color:var(--hx-text-2)} .hx-stage>b{font:500 var(--hx-text-sm) var(--hx-mono);text-align:right} .hx-stage .track{height:28px;border-radius:8px;background:var(--hx-surface-2);position:relative;overflow:hidden} .hx-stage .track i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--hx-text);border-radius:8px;transition:width var(--hx-enter) var(--hx-ease)} .hx-stage .leak{grid-column:2/4;margin-top:-6px;font:500 12px var(--hx-mono);color:var(--hx-amber)} :root[data-theme=dark] .hx-stage .leak{color:var(--hx-amber)} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .hx-stage .leak{color:var(--hx-amber)}} @media (max-width:560px){.hx-stage{grid-template-columns:96px 1fr 56px}} /* ---------- Agent row: function, limit, owner ---------- */ .hx-agent{display:grid;grid-template-columns:auto 1fr auto;gap:var(--hx-4);align-items:center;padding:var(--hx-4);border-radius:var(--hx-radius-md);border:1px solid var(--hx-card-line);background:var(--hx-surface)} .hx-agent canvas{width:40px} .hx-agent b{display:block;font:600 16px var(--hx-display)} .hx-agent dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0;font-size:var(--hx-text-sm)} .hx-agent dt{color:var(--hx-text-3)}.hx-agent dd{margin:0;color:var(--hx-text-2)} .hx-agent.is-paused{opacity:.6} @media (max-width:560px){.hx-agent{grid-template-columns:auto 1fr}.hx-agent .hx-toggle{grid-column:1/-1}} .hx-opt{min-height:46px} .hx-progress[hidden]{display:none} /* ================= System screens (client panel) ================= */ /* ---------- Status: a dot carries the color, the word carries the meaning ---------- */ .hx-status{display:inline-flex;align-items:center;gap:8px;font-size:var(--hx-text-sm);color:var(--hx-text);white-space:nowrap} .hx-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hx-text-3);flex:none} .hx-status.is-on::before{background:var(--hx-decision);box-shadow:0 0 0 3px color-mix(in srgb,var(--hx-decision) 25%,transparent)} .hx-status.is-wait::before{background:var(--hx-task)} .hx-status.is-alert::before{background:var(--hx-attention)} /* ---------- Table:
… ---------- */ .hx-table{border-radius:var(--hx-radius-lg);border:1px solid var(--hx-card-line);background:var(--hx-surface);box-shadow:var(--hx-shadow);overflow:visible} .hx-table-scroll{border-radius:0 0 var(--hx-radius-lg) var(--hx-radius-lg)} .hx-table-bar{display:flex;align-items:center;gap:var(--hx-3);flex-wrap:wrap;padding:var(--hx-3) var(--hx-4);border-bottom:1px solid var(--hx-line);min-height:64px} .hx-table-bar .hx-input{height:40px;max-width:260px} .hx-table-bar .count{margin-left:auto;font:500 var(--hx-text-sm) var(--hx-mono);color:var(--hx-text-3)} .hx-bulk{display:none;align-items:center;gap:var(--hx-2);flex-wrap:wrap;width:100%;animation:hx-msg-in 240ms var(--hx-ease)} .hx-table.has-selection .hx-bulk{display:flex} .hx-table.has-selection .hx-table-bar>:not(.hx-bulk){display:none} .hx-bulk b{font-weight:600;margin-right:auto} .hx-table-scroll{overflow-x:auto} .hx-table table{width:100%;border-collapse:collapse;font-size:var(--hx-text-sm)} .hx-table th{position:sticky;top:0;background:var(--hx-surface);text-align:left;font:500 var(--hx-text-xs)/1 var(--hx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hx-text-3); padding:0 var(--hx-4);height:44px;border-bottom:1px solid var(--hx-line);white-space:nowrap} .hx-table th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:44px;border-radius:6px} .hx-table th button:focus-visible{outline:2px solid var(--hx-text);outline-offset:2px} .hx-table th button::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:4px;opacity:.3;transition:transform var(--hx-state) var(--hx-ease),opacity var(--hx-state) var(--hx-ease)} .hx-table th[aria-sort] button{color:var(--hx-text)} .hx-table th[aria-sort] button::after{opacity:1} .hx-table th[aria-sort=ascending] button::after{transform:rotate(180deg) translateY(4px)} .hx-table td{padding:0 var(--hx-4);height:56px;border-bottom:1px solid var(--hx-line);color:var(--hx-text-2);white-space:nowrap} .hx-table td:first-of-type b,.hx-table td b{color:var(--hx-text);font-weight:600} .hx-table tr:last-child td{border-bottom:0} .hx-table tbody tr{transition:background 120ms var(--hx-ease)} .hx-table tbody tr:hover{background:var(--hx-surface-2)} .hx-table tbody tr.is-selected{background:color-mix(in srgb,var(--hx-key) 22%,var(--hx-surface))} .hx-table .num{text-align:right;font-family:var(--hx-mono);font-variant-numeric:tabular-nums} .hx-table th.num button{flex-direction:row-reverse} .hx-table .sel{width:44px;padding-right:0} .hx-table .hx-check{min-height:44px} .hx-table-empty{padding:var(--hx-7) var(--hx-5);text-align:center;color:var(--hx-text-2)} .hx-table-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--hx-3);flex-wrap:wrap;padding:var(--hx-2) var(--hx-4);border-top:1px solid var(--hx-line)} .hx-table-foot>span{font-size:var(--hx-text-sm);color:var(--hx-text-3)} /* phone: every row becomes a card, the header label goes inside the cell */ @media (max-width:720px){ .hx-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .hx-table table,.hx-table tbody,.hx-table tr,.hx-table td{display:block;width:auto} .hx-table tbody tr{position:relative;padding:var(--hx-3) var(--hx-4) var(--hx-3) 64px;border-bottom:1px solid var(--hx-line)} .hx-table tbody tr:last-child{border-bottom:0} .hx-table td{height:auto;border:0;padding:4px 0;white-space:normal;display:flex;justify-content:space-between;gap:var(--hx-3)} .hx-table td.sel{position:absolute;left:var(--hx-4);top:var(--hx-3);padding:0;width:44px} .hx-table td.is-main{min-height:44px;align-items:center;font-size:var(--hx-text-md)} .hx-table td[data-label]::before{content:attr(data-label);font:500 var(--hx-text-xs)/1.6 var(--hx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hx-text-3)} .hx-table td.is-main{font-size:var(--hx-text-md)}.hx-table td.is-main::before{display:none} .hx-table .num{text-align:right} .hx-table-bar .hx-input{max-width:none;flex:1 1 100%} } /* ---------- Pagination: