/* The Mahjong Nest — component styles. Consumed by the React primitives in
   components/**. Class names are part of the public API: `tmn-<block>__<el>--<mod>`. */

/* ---------------- Button ---------------- */
.tmn-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-text);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:var(--transition-interactive);white-space:nowrap}
.tmn-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tmn-btn--md{font-size:var(--text-body-sm);padding:12px 24px;min-height:48px}
.tmn-btn--sm{font-size:var(--text-caption);padding:6px 18px;min-height:36px}
.tmn-btn--lg{font-size:var(--text-body-md);padding:18px 30px;min-height:54px}
.tmn-btn--primary{background:var(--action-primary);color:var(--text-on-dark)}
.tmn-btn--primary:hover{background:var(--action-primary-hover)}
.tmn-btn--primary:active{background:var(--action-primary-active);transform:translateY(1px)}
.tmn-btn--accent{background:var(--action-accent);color:#FFFDFA}
.tmn-btn--accent:hover{background:var(--action-accent-hover)}
.tmn-btn--accent:active{background:var(--action-accent-active);transform:translateY(1px)}
.tmn-btn--secondary{background:transparent;color:var(--action-primary);border-color:var(--action-primary)}
.tmn-btn--secondary:hover{background:var(--surface-accent-soft)}
.tmn-btn--secondary:active{background:var(--green-100);transform:translateY(1px)}
.tmn-btn--ghost{background:transparent;color:var(--text-heading)}
.tmn-btn--ghost:hover{background:var(--action-quiet-hover)}
.tmn-btn--ghost:active{transform:translateY(1px)}
.tmn-btn--inverse{background:var(--text-on-dark);color:var(--green-700)}
.tmn-btn--inverse:hover{background:#EDF5F2}
.tmn-btn--inverse:active{transform:translateY(1px)}
.tmn-btn--block{width:100%}
.tmn-btn[disabled],.tmn-btn--disabled{background:var(--action-disabled-bg);color:var(--action-disabled-text);border-color:transparent;cursor:not-allowed;transform:none}
.tmn-btn__icon{display:inline-flex;width:1.1em;height:1.1em}
.tmn-btn__icon svg{width:100%;height:100%}

/* ---------------- IconButton ---------------- */
.tmn-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);border:1.5px solid transparent;background:transparent;color:var(--text-heading);cursor:pointer;transition:var(--transition-interactive)}
.tmn-iconbtn--md{width:48px;height:48px}
.tmn-iconbtn--sm{width:36px;height:36px}
.tmn-iconbtn--lg{width:54px;height:54px}
.tmn-iconbtn svg{width:18px;height:18px}
.tmn-iconbtn--quiet:hover{background:var(--action-quiet-hover)}
.tmn-iconbtn--outline{border-color:var(--border-default);background:var(--surface-card)}
.tmn-iconbtn--outline:hover{border-color:var(--action-primary);color:var(--action-primary)}
.tmn-iconbtn--solid{background:var(--action-primary);color:var(--text-on-dark)}
.tmn-iconbtn--solid:hover{background:var(--action-primary-hover)}
.tmn-iconbtn:active{transform:translateY(1px)}
.tmn-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tmn-iconbtn[disabled]{color:var(--action-disabled-text);cursor:not-allowed}

/* ---------------- Card ---------------- */
.tmn-card{position:relative;background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.tmn-card--flat{box-shadow:none}
.tmn-card--raised{box-shadow:var(--shadow-md)}
.tmn-card--soft{background:var(--surface-accent-soft);border-color:transparent}
.tmn-card--inverse{background:var(--surface-inverse);border-color:transparent;color:var(--text-on-dark)}
.tmn-card--interactive{cursor:pointer}
.tmn-card--interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.tmn-card--interactive:active{transform:translateY(-1px)}
.tmn-card__media{display:block;width:100%;background:var(--surface-sunken)}
.tmn-card__body{padding:var(--space-5)}
.tmn-card__body--tight{padding:var(--space-3)}
.tmn-card__title{font-family:var(--font-display);font-size:var(--text-display-xs);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-display-loose);color:var(--text-heading);margin:0 0 var(--space-2);-webkit-text-stroke:var(--display-stroke) currentColor}
.tmn-card--inverse .tmn-card__title{color:var(--text-on-dark)}
.tmn-card__text{margin:0;color:var(--text-muted);font-size:var(--text-body-sm);line-height:var(--leading-body)}
.tmn-card--inverse .tmn-card__text{color:var(--text-on-dark-muted)}
.tmn-card__footer{padding:var(--space-3) var(--space-5);border-top:var(--border-hairline);display:flex;align-items:center;gap:var(--space-3)}
.tmn-card__arc{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150%;aspect-ratio:2/1;border-radius:100% 100% 0 0;pointer-events:none}

/* ---------------- Badge ---------------- */
.tmn-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-text);font-size:var(--text-eyebrow);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-xs);line-height:1.2}
.tmn-badge--green{background:var(--green-100);color:var(--green-800)}
.tmn-badge--red{background:var(--red-100);color:var(--red-700)}
.tmn-badge--blue{background:var(--blue-100);color:var(--blue-700)}
.tmn-badge--neutral{background:var(--surface-sunken);color:var(--text-muted)}
.tmn-badge--solid-green{background:var(--green-700);color:var(--text-on-dark)}
.tmn-badge--solid-red{background:var(--red-500);color:#FFFDFA}
.tmn-badge--solid-blue{background:var(--blue-500);color:#FFFDFA}
.tmn-badge__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor}

/* ---------------- Tag ---------------- */
.tmn-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-body);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:6px 12px;transition:var(--transition-interactive)}
.tmn-tag--selectable{cursor:pointer}
.tmn-tag--selectable:hover{border-color:var(--action-primary);color:var(--action-primary)}
.tmn-tag--selected{background:var(--green-700);border-color:var(--green-700);color:var(--text-on-dark)}
.tmn-tag__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;background:none;padding:0;color:inherit;opacity:.6;cursor:pointer;font-size:14px;line-height:1}
.tmn-tag__remove:hover{opacity:1}

/* ---------------- Tile (mahjong tile) ---------------- */
.tmn-tile{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#FFFFFF 0%,#F6F1EA 100%);border:1px solid var(--sand-300);border-bottom-width:3px;border-radius:var(--radius-tile);box-shadow:var(--shadow-sm);color:var(--green-700);font-family:var(--font-tiles);user-select:none;transition:var(--transition-interactive)}
.tmn-tile--md{width:54px;height:78px;font-size:34px}
.tmn-tile--sm{width:42px;height:54px;font-size:24px}
.tmn-tile--lg{width:78px;height:108px;font-size:46px}
.tmn-tile--red{color:var(--red-500)}
.tmn-tile--blue{color:var(--blue-500)}
.tmn-tile--green{color:var(--green-700)}
.tmn-tile--ink{color:var(--sand-800)}
.tmn-tile--selectable{cursor:pointer}
.tmn-tile--selectable:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tmn-tile--selected{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--blue-500)}
.tmn-tile--face-down{background:linear-gradient(180deg,var(--green-600) 0%,var(--green-800) 100%);border-color:var(--green-900);color:transparent}

/* ---------------- Input / Textarea ---------------- */
.tmn-field{display:flex;flex-direction:column;gap:6px}
.tmn-field__label{font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:var(--text-heading)}
.tmn-field__hint{font-size:var(--text-caption);color:var(--text-muted)}
.tmn-field__error{font-size:var(--text-caption);color:var(--text-danger);font-weight:var(--weight-medium)}
.tmn-input{font-family:var(--font-text);font-size:var(--text-body-md);color:var(--text-body);background:var(--surface-card);border:1.5px solid var(--border-default);border-radius:var(--radius-md);padding:12px 18px;min-height:48px;width:100%;box-sizing:border-box;transition:var(--transition-interactive)}
.tmn-input::placeholder{color:var(--text-subtle)}
.tmn-input:hover{border-color:var(--border-strong)}
.tmn-input:focus{outline:none;border-color:var(--blue-500);box-shadow:var(--focus-ring)}
.tmn-input--invalid{border-color:var(--red-500)}
.tmn-input[disabled]{background:var(--surface-sunken);color:var(--text-subtle);cursor:not-allowed}
.tmn-input--textarea{min-height:108px;resize:vertical;line-height:var(--leading-body)}
.tmn-input__wrap{position:relative;display:flex;align-items:center}
.tmn-input__wrap .tmn-input{padding-left:48px}
.tmn-input__icon{position:absolute;left:18px;display:inline-flex;color:var(--text-subtle);pointer-events:none}
.tmn-input__icon svg{width:18px;height:18px}

/* ---------------- Select ---------------- */
.tmn-select{position:relative;display:block}
.tmn-select select{appearance:none;font-family:var(--font-text);font-size:var(--text-body-md);color:var(--text-body);background:var(--surface-card);border:1.5px solid var(--border-default);border-radius:var(--radius-md);padding:12px 42px 12px 18px;min-height:48px;width:100%;box-sizing:border-box;cursor:pointer;transition:var(--transition-interactive)}
.tmn-select select:hover{border-color:var(--border-strong)}
.tmn-select select:focus{outline:none;border-color:var(--blue-500);box-shadow:var(--focus-ring)}
.tmn-select select[disabled]{background:var(--surface-sunken);color:var(--text-subtle);cursor:not-allowed}
.tmn-select__caret{position:absolute;right:18px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);font-size:12px}

/* ---------------- Checkbox / Radio / Switch ---------------- */
.tmn-choice{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--text-body-md);color:var(--text-body);line-height:1.45}
.tmn-choice--disabled{cursor:not-allowed;color:var(--text-subtle)}
.tmn-choice input{position:absolute;opacity:0;width:0;height:0}
.tmn-choice__box{flex:none;width:24px;height:24px;margin-top:1px;border:1.5px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);display:inline-flex;align-items:center;justify-content:center;color:transparent;transition:var(--transition-interactive)}
.tmn-choice__box--radio{border-radius:var(--radius-pill)}
.tmn-choice:hover .tmn-choice__box{border-color:var(--action-primary)}
.tmn-choice input:checked+.tmn-choice__box{background:var(--action-primary);border-color:var(--action-primary);color:var(--text-on-dark)}
.tmn-choice input:focus-visible+.tmn-choice__box{box-shadow:var(--focus-ring)}
.tmn-choice__box svg{width:14px;height:14px}
.tmn-choice__dot{width:9px;height:9px;border-radius:var(--radius-pill);background:currentColor}
.tmn-choice__desc{display:block;font-size:var(--text-body-sm);color:var(--text-muted);margin-top:2px}
.tmn-switch{flex:none;width:48px;height:24px;border-radius:var(--radius-pill);background:var(--sand-400);position:relative;transition:background-color var(--duration-base) var(--ease-out)}
.tmn-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--radius-pill);background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-settle)}
.tmn-choice input:checked+.tmn-switch{background:var(--action-primary)}
.tmn-choice input:checked+.tmn-switch::after{transform:translateX(24px)}
.tmn-choice input:focus-visible+.tmn-switch{box-shadow:var(--focus-ring)}

/* ---------------- Tabs ---------------- */
.tmn-tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--border-subtle)}
.tmn-tabs__tab{position:relative;appearance:none;background:none;border:none;padding:0 0 var(--space-3);font-family:var(--font-text);font-size:var(--text-body-md);font-weight:var(--weight-bold);color:var(--text-muted);cursor:pointer;transition:var(--transition-interactive)}
.tmn-tabs__tab:hover{color:var(--text-heading)}
.tmn-tabs__tab--active{color:var(--green-700)}
.tmn-tabs__tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:var(--radius-pill);background:var(--red-500)}
.tmn-tabs__tab:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
.tmn-tabs--pill{gap:var(--space-1);border:none;background:var(--surface-sunken);padding:6px;border-radius:var(--radius-pill);display:inline-flex}
.tmn-tabs--pill .tmn-tabs__tab{padding:12px 18px;border-radius:var(--radius-pill);font-size:var(--text-body-sm)}
.tmn-tabs--pill .tmn-tabs__tab--active{background:var(--surface-card);color:var(--green-700);box-shadow:var(--shadow-sm)}
.tmn-tabs--pill .tmn-tabs__tab--active::after{display:none}

/* ---------------- Dialog ---------------- */
.tmn-dialog__scrim{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--space-5);z-index:60;animation:tmn-fade var(--duration-base) var(--ease-out)}
.tmn-dialog{position:relative;width:100%;max-width:480px;background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-7);animation:tmn-rise var(--duration-slow) var(--ease-settle)}
.tmn-dialog__title{font-family:var(--font-display);font-size:var(--text-display-sm);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);color:var(--text-heading);margin:0 0 var(--space-3);line-height:var(--leading-display-loose);-webkit-text-stroke:var(--display-stroke) currentColor}
.tmn-dialog__text{margin:0 0 var(--space-6);color:var(--text-muted)}
.tmn-dialog__actions{display:flex;gap:var(--space-3);justify-content:flex-end}
.tmn-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3)}
@keyframes tmn-fade{from{opacity:0}to{opacity:1}}
@keyframes tmn-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------------- Toast ---------------- */
.tmn-toast{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-3) var(--space-4);max-width:400px;animation:tmn-rise var(--duration-slow) var(--ease-settle)}
.tmn-toast__accent{flex:none;width:6px;align-self:stretch;border-radius:var(--radius-pill);background:var(--green-500)}
.tmn-toast--success .tmn-toast__accent{background:var(--status-success)}
.tmn-toast--danger .tmn-toast__accent{background:var(--status-danger)}
.tmn-toast--info .tmn-toast__accent{background:var(--status-info)}
.tmn-toast__title{font-weight:var(--weight-bold);color:var(--text-heading);font-size:var(--text-body-sm)}
.tmn-toast__text{font-size:var(--text-body-sm);color:var(--text-muted);margin:2px 0 0}

/* ---------------- Tooltip ---------------- */
.tmn-tooltip{position:relative;display:inline-flex}
.tmn-tooltip__bubble{position:absolute;z-index:40;background:var(--green-900);color:var(--text-on-dark);font-size:var(--text-caption);font-weight:var(--weight-medium);padding:6px 12px;border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.tmn-tooltip__bubble--visible{opacity:1}
.tmn-tooltip__bubble--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.tmn-tooltip__bubble--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.tmn-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}