/* Hydran component styles. One file, class-based, so components stay
   dependency-free and consumers get real :hover/:focus/:disabled states.
   Every value here resolves to a token — never a raw literal. */

/* ---------- Button ---------- */
.hy-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;border:var(--rule-hairline) solid transparent;border-radius:var(--radius-xs);cursor:pointer;text-decoration:none;transition:var(--transition-control),transform var(--dur-instant) var(--ease-standard);white-space:nowrap}
.hy-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hy-btn:active:not(:disabled){transform:translateY(var(--press-offset))}
.hy-btn:disabled,.hy-btn[aria-disabled="true"]{cursor:not-allowed;opacity:.42;transform:none}
.hy-btn--sm{height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--text-2xs)}
.hy-btn--md{height:var(--control-h-md);padding:0 var(--space-5);font-size:var(--text-xs)}
.hy-btn--lg{height:var(--control-h-lg);padding:0 var(--space-6);font-size:var(--text-sm)}
.hy-btn--block{width:100%}
.hy-btn--primary{background:var(--accent);color:var(--text-on-accent)}
.hy-btn--primary:hover:not(:disabled){background:var(--accent-hover)}
.hy-btn--primary:active:not(:disabled){background:var(--accent-press)}
.hy-btn--secondary{background:var(--slate-800);color:var(--white)}
.hy-btn--secondary:hover:not(:disabled){background:var(--slate-900)}
.hy-btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.hy-btn--outline:hover:not(:disabled){background:var(--slate-800);color:var(--white)}
.hy-btn--ghost{background:transparent;color:var(--text-primary)}
.hy-btn--ghost:hover:not(:disabled){background:var(--bg-sunken)}
.hy-btn--danger{background:transparent;color:var(--text-accent);border-color:var(--border-accent)}
.hy-btn--danger:hover:not(:disabled){background:var(--accent);color:var(--white)}
.hy-btn--on-dark.hy-btn--outline{color:var(--white);border-color:var(--border-inverse)}
.hy-btn--on-dark.hy-btn--outline:hover:not(:disabled){background:var(--white);color:var(--slate-800);border-color:var(--white)}
.hy-btn--on-dark.hy-btn--ghost{color:var(--white)}
.hy-btn--on-dark.hy-btn--ghost:hover:not(:disabled){background:rgba(255,255,255,.12)}
.hy-btn--on-dark:focus-visible{box-shadow:var(--focus-ring-inverse)}

/* ---------- IconButton ---------- */
.hy-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:var(--rule-hairline) solid transparent;border-radius:var(--radius-xs);background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition-control)}
.hy-iconbtn:hover:not(:disabled){background:var(--bg-sunken);color:var(--text-primary)}
.hy-iconbtn:active:not(:disabled){transform:translateY(var(--press-offset))}
.hy-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hy-iconbtn:disabled{opacity:.42;cursor:not-allowed}
.hy-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.hy-iconbtn--md{width:var(--control-h-md);height:var(--control-h-md)}
.hy-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.hy-iconbtn--solid{background:var(--accent);color:var(--white)}
.hy-iconbtn--solid:hover:not(:disabled){background:var(--accent-hover);color:var(--white)}
.hy-iconbtn--outline{border-color:var(--border-default)}
.hy-iconbtn--outline:hover:not(:disabled){border-color:var(--border-strong)}
.hy-iconbtn--on-dark{color:var(--text-inverse-muted)}
.hy-iconbtn--on-dark:hover:not(:disabled){background:rgba(255,255,255,.12);color:var(--white)}

/* ---------- Field shell (Input / Select / Textarea) ---------- */
.hy-field{display:flex;flex-direction:column;gap:var(--space-2)}
.hy-field__label{font:var(--type-label);color:var(--text-primary);letter-spacing:var(--tracking-normal)}
.hy-field__req{color:var(--text-accent);margin-left:2px}
.hy-field__hint{font:var(--type-body-sm);color:var(--text-muted)}
.hy-field__error{font:var(--type-body-sm);color:var(--text-accent)}
.hy-input{width:100%;height:var(--control-h-md);padding:0 var(--space-3);font:var(--type-body-sm);color:var(--text-primary);background:var(--bg-surface);border:var(--rule-hairline) solid var(--border-default);border-radius:var(--radius-xs);transition:var(--transition-control)}
textarea.hy-input{height:auto;min-height:112px;padding:var(--space-3);resize:vertical;line-height:var(--leading-normal)}
.hy-input::placeholder{color:var(--text-muted)}
.hy-input:hover:not(:disabled){border-color:var(--slate-300)}
.hy-input:focus{outline:none;border-color:var(--slate-800);box-shadow:var(--focus-ring)}
.hy-input:disabled{background:var(--bg-subtle);color:var(--text-muted);cursor:not-allowed}
.hy-input--invalid,.hy-input--invalid:hover{border-color:var(--accent)}
.hy-input--mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.hy-input--lg{height:var(--control-h-lg);font-size:var(--text-base)}
.hy-select{position:relative;display:block}
.hy-select select{appearance:none;width:100%;cursor:pointer;padding-right:var(--space-10)}
.hy-select__chev{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-secondary);display:flex}

/* ---------- Checkbox / Radio / Switch ---------- */
.hy-choice{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font:var(--type-body-sm);color:var(--text-primary)}
.hy-choice input{position:absolute;opacity:0;width:0;height:0}
.hy-choice__box{flex:none;width:18px;height:18px;margin-top:1px;border:var(--rule-hairline) solid var(--border-default);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;color:var(--white);transition:var(--transition-control)}
.hy-choice__box--check{border-radius:var(--radius-xs)}
.hy-choice__box--radio{border-radius:var(--radius-full)}
.hy-choice:hover .hy-choice__box{border-color:var(--slate-400)}
.hy-choice input:checked+.hy-choice__box{background:var(--accent);border-color:var(--accent)}
.hy-choice input:focus-visible+.hy-choice__box{box-shadow:var(--focus-ring)}
.hy-choice__dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--white);opacity:0}
.hy-choice input:checked+.hy-choice__box .hy-choice__dot{opacity:1}
.hy-choice__tick{opacity:0}
.hy-choice input:checked+.hy-choice__box .hy-choice__tick{opacity:1}
.hy-choice--disabled{opacity:.45;cursor:not-allowed}
.hy-choice__desc{display:block;color:var(--text-muted);font-size:var(--text-xs);margin-top:2px}
.hy-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font:var(--type-body-sm)}
.hy-switch input{position:absolute;opacity:0;width:0;height:0}
.hy-switch__track{flex:none;width:40px;height:22px;border-radius:var(--radius-full);background:var(--slate-300);border:var(--rule-hairline) solid transparent;padding:2px;display:flex;transition:var(--transition-control)}
.hy-switch__knob{width:16px;height:16px;border-radius:var(--radius-full);background:var(--white);box-shadow:var(--shadow-xs);transition:transform var(--dur-fast) var(--ease-standard)}
.hy-switch input:checked+.hy-switch__track{background:var(--accent)}
.hy-switch input:checked+.hy-switch__track .hy-switch__knob{transform:translateX(18px)}
.hy-switch input:focus-visible+.hy-switch__track{box-shadow:var(--focus-ring)}
.hy-switch--disabled{opacity:.45;cursor:not-allowed}

/* ---------- Card ---------- */
.hy-card{position:relative;background:var(--bg-surface);border:var(--rule-hairline) solid var(--border-default);border-radius:var(--radius-none);padding:var(--space-6);transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.hy-card--subtle{background:var(--bg-subtle);border-color:transparent}
.hy-card--inverse{background:var(--bg-inverse);border-color:var(--border-inverse);color:var(--text-inverse)}
.hy-card--inverse .hy-card__title{color:var(--white)}
.hy-card--inverse .hy-card__body{color:var(--text-inverse-muted)}
.hy-card--cut{clip-path:var(--clip-cut-tr)}
.hy-card--rule{border:0;border-top:var(--rule-heavy) solid var(--accent);padding-top:var(--space-5)}
.hy-card--interactive{cursor:pointer}
.hy-card--interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.hy-card--interactive:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hy-card__index{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-accent);letter-spacing:var(--tracking-wide)}
.hy-card__title{font:var(--type-h3);margin:var(--space-3) 0 var(--space-2)}
.hy-card__body{font:var(--type-body-sm);color:var(--text-secondary)}
.hy-card__foot{margin-top:var(--space-5);padding-top:var(--space-4);border-top:var(--rule-hairline) solid var(--border-subtle)}

/* ---------- Badge / Tag ---------- */
.hy-badge{display:inline-flex;align-items:center;gap:var(--space-2);height:22px;padding:0 var(--space-2);font-family:var(--font-display);font-size:var(--text-2xs);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-wider);text-transform:uppercase;border-radius:var(--radius-xs);border:var(--rule-hairline) solid transparent}
.hy-badge__dot{width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}
.hy-badge--neutral{background:var(--slate-100);color:var(--slate-600)}
.hy-badge--accent{background:var(--accent);color:var(--white)}
.hy-badge--ok{background:var(--status-ok-soft);color:var(--status-ok)}
.hy-badge--warn{background:var(--status-warn-soft);color:var(--status-warn)}
.hy-badge--critical{background:var(--status-critical-soft);color:var(--status-critical)}
.hy-badge--outline{background:transparent;color:var(--text-primary);border-color:var(--border-default)}
.hy-badge--on-dark{background:rgba(255,255,255,.12);color:var(--white)}
.hy-tag{display:inline-flex;align-items:center;gap:var(--space-2);height:28px;padding:0 var(--space-3);font:var(--type-body-sm);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary);background:var(--bg-subtle);border:var(--rule-hairline) solid var(--border-subtle);border-radius:var(--radius-xs);transition:var(--transition-control)}
.hy-tag--interactive{cursor:pointer}
.hy-tag--interactive:hover{border-color:var(--border-strong);color:var(--text-primary)}
.hy-tag--selected{background:var(--slate-800);border-color:var(--slate-800);color:var(--white)}
.hy-tag__x{display:flex;opacity:.6;cursor:pointer}
.hy-tag__x:hover{opacity:1;color:var(--text-accent)}

/* ---------- Tabs ---------- */
.hy-tabs{display:flex;gap:var(--space-6);border-bottom:var(--rule-hairline) solid var(--border-default)}
.hy-tab{position:relative;appearance:none;background:none;border:0;padding:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.hy-tab:hover{color:var(--text-primary)}
.hy-tab:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hy-tab--active{color:var(--text-primary)}
.hy-tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--rule-heavy);background:var(--accent)}
.hy-tabs--inverse{border-bottom-color:var(--border-inverse)}
.hy-tabs--inverse .hy-tab{color:var(--text-inverse-muted)}
.hy-tabs--inverse .hy-tab--active,.hy-tabs--inverse .hy-tab:hover{color:var(--white)}

/* ---------- Dialog ---------- */
.hy-dialog__scrim{position:fixed;inset:0;background:var(--overlay-scrim);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:60}
.hy-dialog{width:100%;max-width:520px;background:var(--bg-surface);border-top:var(--rule-heavy) solid var(--accent);box-shadow:var(--shadow-lg)}
.hy-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-4)}
.hy-dialog__title{font:var(--type-h3)}
.hy-dialog__eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-accent);margin-bottom:var(--space-2)}
.hy-dialog__body{padding:0 var(--space-6);font:var(--type-body-sm);color:var(--text-secondary)}
.hy-dialog__foot{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-6);margin-top:var(--space-2);border-top:var(--rule-hairline) solid var(--border-subtle)}

/* ---------- Tooltip ---------- */
.hy-tooltip{position:relative;display:inline-flex}
.hy-tooltip__bubble{position:absolute;z-index:40;background:var(--slate-900);color:var(--white);font:var(--type-body-sm);font-size:var(--text-xs);padding:var(--space-2) var(--space-3);white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-standard)}
.hy-tooltip__bubble--visible{opacity:1}
.hy-tooltip__bubble--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.hy-tooltip__bubble--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.hy-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}

/* ---------- SectionHeading ---------- */
.hy-sec{display:flex;flex-direction:column;gap:var(--space-4);max-width:56ch}
.hy-sec--center{align-items:center;text-align:center;max-width:64ch;margin:0 auto}
.hy-sec__eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-accent)}
.hy-sec__eyebrow::before{content:"";width:24px;height:var(--rule-heavy);background:var(--accent)}
.hy-sec--center .hy-sec__eyebrow::before{display:none}
.hy-sec__title{font:var(--type-h2);letter-spacing:var(--tracking-tight)}
.hy-sec__lede{font:var(--type-body-lg);color:var(--text-secondary)}
.hy-sec--inverse .hy-sec__title{color:var(--white)}
.hy-sec--inverse .hy-sec__lede{color:var(--text-inverse-muted)}

/* ---------- Logo ---------- */
.hy-logo{display:inline-flex;align-items:center;padding:var(--logo-clearspace);flex:none}
.hy-logo img{display:block;height:100%;width:auto}

/* ---------- Icon (Material Symbols Outlined — substituted set) ---------- */
.hy-icon{font-family:var(--font-icon);font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;user-select:none;flex:none}
.hy-icon--filled{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
.hy-icon--bold{font-variation-settings:"FILL" 0,"wght" 600,"GRAD" 0,"opsz" 24}
.hy-icon--accent{color:var(--accent)}