/* Drop Hint — component classes (used by components/*.jsx). Prefix: dh- */
/* Button */
.dh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--radius-md);border:1.5px solid transparent;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:15px;letter-spacing:-0.005em;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.dh-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.dh-btn:active{transform:translateY(1px) scale(.98)}
.dh-btn[disabled]{cursor:not-allowed;opacity:.45;transform:none}
.dh-btn--sm{height:34px;padding:0 14px;font-size:13px;border-radius:var(--radius-sm)}
.dh-btn--lg{height:54px;padding:0 28px;font-size:17px}
.dh-btn--full{width:100%}
.dh-btn--primary{background:var(--action-primary);color:var(--white)}
.dh-btn--primary:hover:not([disabled]){background:var(--action-primary-hover)}
.dh-btn--cta{background:var(--action-cta);color:var(--white)}
.dh-btn--cta:hover:not([disabled]){background:var(--action-cta-hover)}
.dh-btn--secondary{background:var(--white);color:var(--navy-900);border-color:var(--navy-200)}
.dh-btn--secondary:hover:not([disabled]){border-color:var(--navy-900);background:var(--mist-100)}
.dh-btn--ghost{background:transparent;color:var(--navy-900)}
.dh-btn--ghost:hover:not([disabled]){background:var(--rose-100)}
.dh-btn--hint{background:var(--white);color:var(--navy-900);border-color:var(--navy-900);border-radius:0;box-shadow:var(--shadow-hint)}
.dh-btn--hint:hover:not([disabled]){box-shadow:var(--shadow-hint-lg);transform:translate(-1px,-1px)}
.dh-btn--hint:active:not([disabled]){box-shadow:0 0 0 var(--rose-500);transform:translate(3px,3px)}
.dh-btn__icon{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center}
.dh-btn--sm .dh-btn__icon{width:15px;height:15px}
/* IconButton */
.dh-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);border:1.5px solid transparent;background:transparent;color:var(--navy-900);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.dh-iconbtn:hover:not([disabled]){background:var(--rose-100)}
.dh-iconbtn:active:not([disabled]){transform:scale(.94)}
.dh-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.dh-iconbtn[disabled]{opacity:.4;cursor:not-allowed}
.dh-iconbtn--sm{width:32px;height:32px;border-radius:var(--radius-sm)}
.dh-iconbtn--lg{width:48px;height:48px}
.dh-iconbtn--solid{background:var(--navy-900);color:var(--white)}
.dh-iconbtn--solid:hover:not([disabled]){background:var(--navy-800)}
.dh-iconbtn--cta{background:var(--coral-500);color:var(--white)}
.dh-iconbtn--cta:hover:not([disabled]){background:var(--coral-600)}
.dh-iconbtn--outline{border-color:var(--navy-200);background:var(--white)}
.dh-iconbtn--outline:hover:not([disabled]){border-color:var(--navy-900);background:var(--white)}
.dh-iconbtn svg{width:18px;height:18px}
/* Field (Input/Select) */
.dh-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body)}
.dh-field__label{font-family:var(--font-display);font-size:14px;font-weight:var(--fw-semibold);color:var(--navy-900)}
.dh-field__hint{font-size:13px;color:var(--text-muted)}
.dh-field__error{font-size:13px;color:var(--danger-600);font-weight:var(--fw-semibold)}
.dh-field__control{position:relative;display:flex;align-items:center;height:44px;background:var(--surface-input);border:1.5px solid transparent;border-radius:var(--radius-md);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.dh-field__control:hover{border-color:var(--mist-300)}
.dh-field__control:focus-within{border-color:var(--coral-500);background:var(--white);box-shadow:var(--focus-ring)}
.dh-field--error .dh-field__control{border-color:var(--danger-600);background:var(--white)}
.dh-field--disabled .dh-field__control{opacity:.5}
.dh-field__input{flex:1;min-width:0;height:100%;border:0;background:transparent;padding:0 14px;font:inherit;font-size:15px;color:var(--navy-900);outline:none;appearance:none}
.dh-field__input::placeholder{color:var(--navy-300)}
.dh-field__adorn{display:inline-flex;padding-left:14px;color:var(--navy-500)}
.dh-field__adorn+.dh-field__input{padding-left:10px}
.dh-field__chev{position:absolute;right:14px;pointer-events:none;color:var(--navy-500)}
select.dh-field__input{padding-right:40px;cursor:pointer}
textarea.dh-field__input{padding:12px 14px;resize:vertical}
/* Checkbox / Radio */
.dh-check{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--font-body);font-size:15px;color:var(--navy-900);cursor:pointer;line-height:1.35}
.dh-check input{position:absolute;opacity:0;width:0;height:0}
.dh-check__box{flex:none;width:20px;height:20px;margin-top:0;border:1.5px solid var(--navy-300);background:var(--white);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--white);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-pop)}
.dh-check--radio .dh-check__box{border-radius:50%}
.dh-check:hover .dh-check__box{border-color:var(--navy-900)}
.dh-check input:checked+.dh-check__box{background:var(--coral-500);border-color:var(--coral-500);transform:scale(1.04)}
.dh-check input:focus-visible+.dh-check__box{box-shadow:var(--focus-ring)}
.dh-check input:disabled~*{opacity:.45;cursor:not-allowed}
.dh-check__dot{width:8px;height:8px;border-radius:50%;background:var(--white)}
.dh-check__desc{display:block;font-size:13px;color:var(--text-muted);margin-top:2px}
/* Switch */
.dh-switch{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:15px;color:var(--navy-900);cursor:pointer}
.dh-switch input{position:absolute;opacity:0;width:0;height:0}
.dh-switch__track{position:relative;width:40px;height:24px;border-radius:var(--radius-pill);background:var(--mist-300);transition:background var(--dur-base) var(--ease-out);flex:none}
.dh-switch__thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px rgba(27,43,94,.25);transition:transform var(--dur-base) var(--ease-pop)}
.dh-switch input:checked+.dh-switch__track{background:var(--coral-500)}
.dh-switch input:checked+.dh-switch__track .dh-switch__thumb{transform:translateX(16px)}
.dh-switch input:focus-visible+.dh-switch__track{box-shadow:var(--focus-ring)}
.dh-switch input:disabled~*{opacity:.45;cursor:not-allowed}
/* Card */
.dh-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-1)}
.dh-card--warm{background:var(--cream-100);border-color:var(--cream-300);box-shadow:none}
.dh-card--cool{background:var(--mist-100);border-color:var(--mist-200);box-shadow:none}
.dh-card--elevated{border-color:transparent;box-shadow:var(--shadow-3)}
.dh-card--hint{border:1.5px solid var(--navy-900);border-radius:0;box-shadow:var(--shadow-hint-lg)}
.dh-card--navy{background:var(--navy-900);border-color:var(--navy-900);color:var(--white)}
.dh-card--interactive{cursor:pointer;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.dh-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.dh-card--pad-sm{padding:16px}.dh-card--pad-lg{padding:32px}.dh-card--pad-none{padding:0;overflow:hidden}
/* Badge */
.dh-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font-family:var(--font-display);font-size:12px;font-weight:var(--fw-bold);letter-spacing:.01em;white-space:nowrap}
.dh-badge--sm{height:20px;padding:0 8px;font-size:11px}
.dh-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.dh-badge--rose{background:var(--rose-100);color:var(--coral-700)}
.dh-badge--coral{background:var(--coral-500);color:var(--white)}
.dh-badge--navy{background:var(--navy-900);color:var(--white)}
.dh-badge--neutral{background:var(--mist-200);color:var(--navy-700)}
.dh-badge--success{background:var(--success-100);color:var(--success-600)}
.dh-badge--warning{background:var(--warning-100);color:var(--warning-600)}
.dh-badge--danger{background:var(--danger-100);color:var(--danger-600)}
/* Tag */
.dh-tag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--radius-pill);background:var(--white);border:1.5px solid var(--rose-300);font-family:var(--font-body);font-size:13px;font-weight:var(--fw-semibold);color:var(--navy-900);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.dh-tag--interactive{cursor:pointer}
.dh-tag--interactive:hover{background:var(--rose-100)}
.dh-tag--selected{background:var(--rose-500);border-color:var(--rose-500);color:var(--navy-900)}
.dh-tag__x{display:inline-flex;width:16px;height:16px;border:0;padding:0;margin-right:-4px;border-radius:50%;background:transparent;color:var(--navy-700);cursor:pointer;align-items:center;justify-content:center}
.dh-tag__x:hover{background:var(--rose-300)}
/* HintBox — signature outlined label with hard offset shadow */
.dh-hintbox{display:inline-flex;align-items:center;padding:.12em .45em;border:1.5px solid var(--navy-900);background:var(--white);color:var(--navy-900);box-shadow:.14em .14em 0 var(--rose-500);font-family:inherit;line-height:1.15}
.dh-hintbox--coral{box-shadow:.14em .14em 0 var(--coral-500)}
.dh-hintbox--navy{background:var(--navy-900);color:var(--white);box-shadow:.14em .14em 0 var(--rose-500)}
.dh-hintbox--animate{animation:dh-pop-in var(--dur-slow) var(--ease-pop) both}
/* Highlight — marker band behind words */
.dh-hl{background-image:linear-gradient(var(--rose-300),var(--rose-300));background-repeat:no-repeat;background-position:0 88%;background-size:100% 42%;padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dh-hl--block{background-position:0 50%;background-size:100% 100%;padding:0 .2em}
.dh-hl--sky{background-image:linear-gradient(var(--illo-sky),var(--illo-sky))}.dh-hl--rose{background-image:linear-gradient(var(--rose-300),var(--rose-300))}.dh-hl--cream{background-image:linear-gradient(var(--cream-300),var(--cream-300))}.dh-hl--white{background-image:linear-gradient(var(--white),var(--white))}
.dh-hl--animate{animation:dh-highlight-wipe var(--dur-reveal) var(--ease-out) both}
/* Tabs */
.dh-tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--mist-300)}
.dh-tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:0;background:transparent;font-family:var(--font-display);font-size:15px;font-weight:var(--fw-semibold);color:var(--navy-500);cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
.dh-tab:hover{color:var(--navy-900)}
.dh-tab[aria-selected="true"]{color:var(--navy-900)}
.dh-tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1.5px;height:3px;border-radius:3px 3px 0 0;background:var(--coral-500)}
.dh-tabs--pill{border:0;background:var(--mist-100);padding:4px;border-radius:var(--radius-md);display:inline-flex}
.dh-tabs--pill .dh-tab{height:36px;border-radius:9px}
.dh-tabs--pill .dh-tab[aria-selected="true"]{background:var(--white);box-shadow:var(--shadow-2)}
.dh-tabs--pill .dh-tab[aria-selected="true"]::after{display:none}
.dh-tab__count{font-family:var(--font-body);font-size:12px;font-weight:var(--fw-bold);background:var(--rose-100);color:var(--coral-700);border-radius:var(--radius-pill);padding:1px 7px}
/* Dialog */
.dh-overlay{position:fixed;inset:0;background:rgba(17,28,64,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;animation:dh-rise-in var(--dur-base) var(--ease-out) both}
.dh-overlay--inline{position:absolute}
.dh-dialog{position:relative;width:100%;max-width:480px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);padding:28px;animation:dh-pop-in var(--dur-slow) var(--ease-pop) both}
.dh-dialog__close{position:absolute;top:14px;right:14px}
.dh-dialog__title{font-family:var(--font-display);font-size:22px;font-weight:var(--fw-bold);letter-spacing:-0.015em;color:var(--navy-900);margin:0 32px 8px 0}
.dh-dialog__body{font-size:15px;color:var(--text-body)}
.dh-dialog__footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
/* Toast */
.dh-toast{display:flex;align-items:flex-start;gap:12px;min-width:280px;max-width:420px;padding:14px 16px;border-radius:var(--radius-md);background:var(--navy-900);color:var(--white);box-shadow:var(--shadow-3);font-family:var(--font-body);font-size:14px;animation:dh-rise-in var(--dur-slow) var(--ease-pop) both}
.dh-toast__icon{flex:none;display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;background:var(--coral-500);color:var(--white)}
.dh-toast--success .dh-toast__icon{background:#2BB57D}
.dh-toast--error .dh-toast__icon{background:var(--coral-500)}
.dh-toast--info .dh-toast__icon{background:var(--rose-500);color:var(--navy-900)}
.dh-toast__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:15px}
.dh-toast__msg{color:var(--navy-200);margin-top:2px}
.dh-toast__action{margin-left:auto;align-self:center;background:none;border:0;color:var(--rose-500);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:14px;cursor:pointer;padding:4px}
.dh-toast__action:hover{color:var(--white)}
/* Tooltip */
.dh-tip{position:relative;display:inline-flex}
.dh-tip__bubble{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);background:var(--navy-900);color:var(--white);font-family:var(--font-body);font-size:13px;font-weight:var(--fw-semibold);line-height:1.35;padding:7px 10px;border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);z-index:50}
.dh-tip__bubble::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--navy-900)}
.dh-tip--bottom .dh-tip__bubble{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-4px)}
.dh-tip--bottom .dh-tip__bubble::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--navy-900)}
.dh-tip:hover .dh-tip__bubble,.dh-tip:focus-within .dh-tip__bubble,.dh-tip--open .dh-tip__bubble{opacity:1;transform:translate(-50%,0)}