/* Clees & Ernster — component styles (states live here so React components stay lean) */

/* ---------- Button ---------- */
.ce-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:48px;padding:0 var(--space-3);border-radius:var(--radius-md);border:1px solid transparent;font:500 15px/1 var(--font-sans);letter-spacing:-0.005em;white-space:nowrap;cursor:pointer;text-decoration:none;user-select:none;transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.ce-btn--sm{height:40px;padding:0 var(--space-2);font-size:14px}
.ce-btn--lg{height:56px;padding:0 var(--space-4);font-size:16px}
.ce-btn--block{width:100%}
.ce-btn__icon{display:inline-flex;transition:transform var(--dur-micro) var(--ease-out)}
.ce-btn:hover .ce-btn__icon--end{transform:translateX(3px)}
.ce-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.ce-btn:active{transform:translateY(1px)}
.ce-btn--primary{background:var(--accent);color:var(--text-on-accent)}
.ce-btn--primary:hover,.ce-btn--primary.is-hover{background:var(--accent-hover);box-shadow:var(--shadow-glow)}
.ce-btn--primary:active,.ce-btn--primary.is-active{background:var(--accent-active);box-shadow:none}
.ce-btn--secondary{background:transparent;color:var(--text-1);border-color:var(--border-strong)}
.ce-btn--secondary:hover,.ce-btn--secondary.is-hover{background:var(--surface-2);border-color:var(--text-3)}
.ce-btn--secondary:active,.ce-btn--secondary.is-active{background:var(--surface-3)}
.ce-btn--ghost{background:transparent;color:var(--text-1);padding:0 var(--space-2)}
.ce-btn--ghost:hover,.ce-btn--ghost.is-hover{background:var(--surface-2)}
.ce-btn--ghost:active,.ce-btn--ghost.is-active{background:var(--surface-3)}
.ce-btn.is-focus{box-shadow:var(--shadow-focus)}
.ce-btn:disabled,.ce-btn.is-disabled{background:var(--surface-3);color:var(--text-disabled);border-color:transparent;box-shadow:none;cursor:not-allowed;transform:none}
.ce-btn--ghost:disabled,.ce-btn--ghost.is-disabled{background:transparent}

/* ---------- Badge (status) ---------- */
.ce-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--space-1);border-radius:var(--radius-sm);font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--surface-3);color:var(--text-2)}
.ce-badge__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor}
.ce-badge--accent{background:var(--accent-soft);color:var(--text-accent)}
.ce-badge--success{background:var(--success-soft);color:var(--success)}
.ce-badge--warning{background:var(--warning-soft);color:var(--warning)}
.ce-badge--error{background:var(--error-soft);color:var(--error)}
.ce-badge--solid{background:var(--accent);color:var(--text-on-accent)}

/* ---------- Tag ---------- */
.ce-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border-2);border-radius:var(--radius-xs);font:400 12px/1 var(--font-mono);color:var(--text-2);background:transparent;cursor:default;transition:border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out)}
button.ce-tag{cursor:pointer}
button.ce-tag:hover{border-color:var(--border-strong);color:var(--text-1)}
.ce-tag.is-selected{border-color:var(--border-accent);color:var(--text-1);background:var(--accent-soft)}
.ce-tag__x{opacity:.6;font-size:13px}

/* ---------- Form fields ---------- */
.ce-field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.ce-field__label{font:500 14px/1.3 var(--font-sans);color:var(--text-2)}
.ce-field__req{color:var(--text-accent);margin-left:2px}
.ce-input{width:100%;height:48px;padding:0 var(--space-2);background:var(--surface-3);border:1px solid var(--border-2);border-radius:var(--radius-sm);color:var(--text-1);font:400 16px/1.4 var(--font-sans);transition:border-color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out);appearance:none}
textarea.ce-input{height:auto;min-height:128px;padding:12px var(--space-2);resize:vertical;line-height:1.5}
select.ce-input{padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.ce-input::placeholder{color:var(--text-3)}
.ce-input:hover{border-color:var(--border-strong)}
.ce-input:focus,.ce-input.is-focus{outline:none;border-color:var(--border-accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ce-input:disabled{background:var(--bg-subtle);color:var(--text-disabled);border-color:var(--border-1);cursor:not-allowed}
.ce-field.is-error .ce-input{border-color:var(--error)}
.ce-field.is-error .ce-input:focus{box-shadow:0 0 0 3px var(--error-soft)}
.ce-field__hint{font:400 13px/1.4 var(--font-sans);color:var(--text-3)}
.ce-field__error{display:flex;gap:6px;align-items:baseline;font:400 13px/1.4 var(--font-sans);color:var(--error)}
.ce-field__error::before{content:"!";font:600 11px/1 var(--font-mono);display:inline-grid;place-items:center;width:14px;height:14px;border-radius:var(--radius-pill);border:1px solid currentColor;flex:none;transform:translateY(2px)}
.ce-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font:400 14px/1.5 var(--font-sans);color:var(--text-2)}
.ce-check input{appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-3);display:grid;place-items:center;cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.ce-check input::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.ce-check input:checked{background:var(--accent);border-color:var(--accent)}
.ce-check input:checked::after{opacity:1}
.ce-check input:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.ce-check.is-error input{border-color:var(--error)}

/* ---------- Cards (shared) ---------- */
.ce-card{position:relative;background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.ce-card--interactive{cursor:pointer;text-decoration:none;color:inherit;display:block}
.ce-card--interactive::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--accent-hover);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-expo)}
.ce-card--interactive:hover{border-color:var(--border-2);background:var(--surface-2)}
.ce-card--interactive:hover::before{transform:scaleX(1)}
.ce-card--interactive:hover .ce-link-arrow span{transform:translateX(4px)}
.ce-card--interactive:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.ce-link-arrow{display:inline-flex;align-items:center;gap:var(--space-1);font:500 14px/1 var(--font-sans);color:var(--text-1)}
.ce-link-arrow span{color:var(--text-accent);transition:transform var(--dur-micro) var(--ease-out)}

/* ---------- Header ---------- */
.ce-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);border-bottom:1px solid var(--border-1)}
[data-theme="light"] .ce-header{background:rgba(255,255,255,.8)}
.ce-header__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.ce-nav{display:flex;gap:var(--space-half);align-items:center}
.ce-nav a{position:relative;padding:8px 12px;border-radius:var(--radius-sm);font:400 14px/1 var(--font-sans);color:var(--text-2);text-decoration:none;transition:color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out)}
.ce-nav a:hover{color:var(--text-1);background:var(--surface-2)}
.ce-nav a.is-active{color:var(--text-1)}
.ce-nav a.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:-23px;height:1px;background:var(--accent-hover)}
.ce-header__menu{display:none;width:40px;height:40px;border:1px solid var(--border-2);border-radius:var(--radius-md);background:transparent;color:var(--text-1);font:500 12px/1 var(--font-mono);cursor:pointer}
@media (max-width:900px){.ce-header .ce-nav,.ce-header__cta{display:none}.ce-header__menu{display:inline-grid;place-items:center}}
.ce-header__drawer{position:absolute;left:0;right:0;top:var(--header-h);background:var(--bg-page);border-bottom:1px solid var(--border-1);padding:var(--space-2) var(--margin-mobile) var(--space-4);display:flex;flex-direction:column;gap:var(--space-half)}
.ce-header__drawer a{padding:14px 0;border-bottom:1px solid var(--border-1);color:var(--text-1);text-decoration:none;font:500 18px/1 var(--font-sans);letter-spacing:-0.01em}

/* ---------- Footer ---------- */
.ce-footer__grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--space-6) var(--space-4)}
@media (max-width:900px){.ce-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ce-footer__brand{grid-column:1/-1}}
@media (max-width:480px){.ce-footer__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Table ---------- */
.ce-table-wrap{overflow-x:auto;border:1px solid var(--border-1);border-radius:var(--radius-lg);background:var(--surface-1)}
.ce-table{width:100%;border-collapse:collapse;font:400 14px/1.4 var(--font-sans);color:var(--text-1)}
.ce-table th{text-align:left;padding:14px var(--space-2);font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border-2);white-space:nowrap;background:var(--bg-subtle)}
.ce-table th.is-sortable{cursor:pointer;user-select:none}
.ce-table th.is-sortable:hover{color:var(--text-1)}
.ce-table th.is-sorted{color:var(--text-accent)}
.ce-table td{padding:14px var(--space-2);border-bottom:1px solid var(--border-1);white-space:nowrap}
.ce-table tr:last-child td{border-bottom:0}
.ce-table tbody tr{transition:background-color var(--dur-micro) var(--ease-out)}
.ce-table tbody tr:hover{background:var(--surface-2)}
.ce-table .is-num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ce-table .is-pos{color:var(--success)}
.ce-table .is-neg{color:var(--error)}

/* ---------- Motion helpers ---------- */
[data-ce-reveal]{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}