/* War-Counter design-system components. CSS lifted verbatim from the Claude Design bundle
   (components/{display,feedback,forms,navigation}); markup conventions documented in docs/ui.md. */

/* Badge */
.wc-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-size:12px;letter-spacing:var(--tracking-caps);text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-round);border:1px solid currentColor;line-height:1.4}
.wc-badge--neutral{color:var(--text-muted)}
.wc-badge--accent{color:var(--text-on-accent);background:var(--accent);border-color:var(--border-strong)}
.wc-badge--danger{color:var(--text-on-danger);background:var(--danger-strong);border-color:var(--wc-ink)}
.wc-badge--good{color:var(--good)}
.wc-badge--warn{color:var(--warn)}

/* Card */
.wc-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);outline:1px solid var(--border-faint);outline-offset:-4px}
.wc-card__head{padding:14px 18px 10px;border-bottom:1px solid var(--border-faint);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wc-card__title{font-family:var(--font-heading);font-size:20px;color:var(--text-heading);margin:0}
.wc-card__sub{font-family:var(--font-blackletter);font-size:15px;color:var(--text-muted)}
.wc-card__body{padding:14px 18px}
.wc-card__foot{padding:10px 18px 14px;border-top:1px solid var(--border-faint);display:flex;gap:10px;justify-content:flex-end}

/* StatMeter */
.wc-meter{display:flex;flex-direction:column;gap:5px}
.wc-meter__row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-data);font-size:13px;color:var(--text-muted);letter-spacing:.04em}
.wc-meter__val{font-size:16px;font-weight:700}
.wc-meter__track{height:10px;background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-inset);overflow:hidden}
.wc-meter__fill{height:100%;transition:width var(--dur-slow) var(--ease-out)}
.wc-meter--accent .wc-meter__val,.wc-meter--accent .wc-meter__fill{color:var(--accent);background:var(--accent)}
.wc-meter--danger .wc-meter__val,.wc-meter--danger .wc-meter__fill{color:var(--danger);background:var(--danger)}
.wc-meter--good .wc-meter__val,.wc-meter--good .wc-meter__fill{color:var(--good);background:var(--good)}
.wc-meter--warn .wc-meter__val,.wc-meter--warn .wc-meter__fill{color:var(--warn);background:var(--warn)}
.wc-meter__val{background:none!important}

/* Tag */
.wc-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-data);font-size:13px;padding:3px 9px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);color:var(--text-body);background:var(--accent-quiet)}
.wc-tag button{all:unset;cursor:pointer;color:var(--text-faint);font-size:12px;line-height:1}
.wc-tag button:hover{color:var(--danger)}

/* Dialog — rendered as a native <dialog>; ::backdrop plays the scrim */
.wc-dialog{background:var(--surface-raised);color:var(--text-body);border:var(--rule-double);border-radius:var(--radius-md);box-shadow:var(--shadow-raised);max-width:480px;width:calc(100% - 48px);padding:0;font-family:var(--font-body)}
.wc-dialog[open]{animation:wcRise var(--dur-med) var(--ease-out)}
.wc-dialog::backdrop{background:var(--scrim);animation:wcFade var(--dur-med) var(--ease-out)}
.wc-dialog__head{padding:16px 20px 10px;text-align:center}
.wc-dialog__title{font-family:var(--font-heading);font-size:24px;color:var(--text-heading);margin:0}
.wc-dialog__flavour{font-family:var(--font-blackletter);font-size:15px;color:var(--text-muted);margin-top:2px}
.wc-dialog__body{padding:6px 20px 16px;font-size:16px}
.wc-dialog__foot{padding:0 20px 18px;display:flex;gap:10px;justify-content:center}
@keyframes wcFade{from{opacity:0}}
@keyframes wcRise{from{opacity:0;transform:translateY(8px)}}

/* Toast */
.wc-toast{display:flex;align-items:flex-start;gap:12px;background:var(--surface-raised);color:var(--text-body);border:1px solid var(--border-strong);border-left-width:4px;border-radius:var(--radius-sm);box-shadow:var(--shadow-hard);padding:12px 16px;max-width:380px;animation:wcToastIn var(--dur-med) var(--ease-out)}
.wc-toast--danger{border-color:var(--danger-strong)}
.wc-toast--good{border-color:var(--good)}
.wc-toast__title{font-family:var(--font-heading);font-size:15px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-heading);margin:0 0 2px}
.wc-toast--danger .wc-toast__title{color:var(--danger)}
.wc-toast--good .wc-toast__title{color:var(--good)}
.wc-toast p{margin:0;font-size:14px}
.wc-toast button{all:unset;cursor:pointer;color:var(--text-faint);margin-left:auto;font-size:13px;line-height:1;padding:2px}
.wc-toast button:hover{color:var(--text-body)}
@keyframes wcToastIn{from{opacity:0;transform:translateY(6px)}}

/* Tooltip */
.wc-tip{position:relative;display:inline-flex}
.wc-tip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--wc-ink);color:var(--wc-parchment);border:1px solid var(--wc-gold-dark);border-radius:var(--radius-sm);padding:5px 10px;font-family:var(--font-body);font-size:13px;font-style:italic;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out);z-index:50}
.wc-tip:hover .wc-tip__bubble,.wc-tip:focus-within .wc-tip__bubble{opacity:1}

/* Button */
.wc-btn{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:var(--tracking-caps);border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);border:1px solid transparent;line-height:1;text-decoration:none}
.wc-btn:active{transform:translate(1px,1px)}
.wc-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.wc-btn--md{font-size:15px;padding:10px 18px}.wc-btn--sm{font-size:13px;padding:7px 12px}.wc-btn--lg{font-size:18px;padding:13px 26px}
.wc-btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--border-strong);box-shadow:var(--shadow-hard)}
.wc-btn--primary:hover:not(:disabled){background:var(--accent-hover)}
.wc-btn--primary:active{box-shadow:1px 1px 0 rgba(27,23,28,.85)}
.wc-btn--danger{background:var(--danger-strong);color:var(--text-on-danger);border-color:var(--wc-ink);box-shadow:var(--shadow-hard)}
.wc-btn--danger:hover:not(:disabled){background:var(--danger)}
.wc-btn--danger:active{box-shadow:1px 1px 0 rgba(27,23,28,.85)}
.wc-btn--secondary{background:transparent;color:var(--accent);border-color:var(--border-strong)}
.wc-btn--secondary:hover:not(:disabled){background:var(--accent-quiet)}
.wc-btn--ghost{background:transparent;color:var(--text-body);border-color:transparent}
.wc-btn--ghost:hover:not(:disabled){background:var(--accent-quiet);color:var(--accent)}
.wc-btn--block{width:100%}

/* Checkbox */
.wc-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:16px;color:var(--text-body);user-select:none;position:relative}
.wc-check input{position:absolute;opacity:0;width:0}
.wc-check .box{width:18px;height:18px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-sunken);box-shadow:var(--shadow-inset);display:inline-flex;align-items:center;justify-content:center;color:transparent;font-size:13px;transition:all var(--dur-fast) var(--ease-out);flex:none}
.wc-check input:checked+.box{background:var(--accent);color:var(--text-on-accent);box-shadow:none}
.wc-check input:focus-visible+.box{outline:2px solid var(--focus-ring);outline-offset:2px}
.wc-check--disabled{opacity:.45;cursor:not-allowed}

/* IconButton */
.wc-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--dur-fast) var(--ease-out);background:transparent;color:var(--text-body);border:1px solid transparent}
.wc-iconbtn:hover:not(:disabled){background:var(--accent-quiet);color:var(--accent)}
.wc-iconbtn:active{transform:translate(1px,1px)}
.wc-iconbtn:disabled{opacity:.45;cursor:not-allowed}
.wc-iconbtn--outline{border-color:var(--border-strong);color:var(--accent)}
.wc-iconbtn--md{width:36px;height:36px;font-size:18px}.wc-iconbtn--sm{width:28px;height:28px;font-size:14px}.wc-iconbtn--lg{width:44px;height:44px;font-size:22px}

/* Input */
.wc-field{display:flex;flex-direction:column;gap:6px}
.wc-field>label{font-family:var(--font-heading);font-size:13px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.wc-input{background:var(--surface-sunken);color:var(--text-body);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-inset);padding:9px 12px;font-family:var(--font-body);font-size:16px;transition:border-color var(--dur-fast) var(--ease-out);width:100%;box-sizing:border-box}
.wc-input::placeholder{color:var(--text-faint);font-style:italic}
.wc-input:hover{border-color:var(--border-strong)}
.wc-input:focus{outline:none;border-color:var(--focus-ring);box-shadow:var(--shadow-inset),0 0 0 1px var(--focus-ring)}
.wc-input--invalid{border-color:var(--danger)}
.wc-input--mono{font-family:var(--font-data)}
.wc-field .wc-hint{font-size:13px;color:var(--text-faint);font-style:italic;margin:0}
.wc-field .wc-hint--error{color:var(--danger)}

/* Radio */
.wc-radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:16px;color:var(--text-body);user-select:none;position:relative}
.wc-radio input{position:absolute;opacity:0;width:0}
.wc-radio .dot{width:18px;height:18px;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface-sunken);box-shadow:var(--shadow-inset);display:inline-flex;align-items:center;justify-content:center;transition:all var(--dur-fast) var(--ease-out);flex:none}
.wc-radio .dot::after{content:'';width:8px;height:8px;border-radius:50%;background:transparent;transition:background var(--dur-fast) var(--ease-out)}
.wc-radio input:checked+.dot{background:var(--surface-card);box-shadow:none}
.wc-radio input:checked+.dot::after{background:var(--accent)}
.wc-radio input:focus-visible+.dot{outline:2px solid var(--focus-ring);outline-offset:2px}
.wc-radio--disabled{opacity:.45;cursor:not-allowed}

/* Select */
.wc-select-wrap{position:relative;display:flex}
.wc-select{appearance:none;width:100%;background:var(--surface-sunken);color:var(--text-body);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-inset);padding:9px 34px 9px 12px;font-family:var(--font-body);font-size:16px;cursor:pointer}
.wc-select:hover{border-color:var(--border-strong)}
.wc-select:focus{outline:none;border-color:var(--focus-ring);box-shadow:var(--shadow-inset),0 0 0 1px var(--focus-ring)}
.wc-select-wrap::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--accent);pointer-events:none}

/* Switch */
.wc-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:16px;color:var(--text-body);user-select:none;position:relative}
.wc-switch input{position:absolute;opacity:0;width:0}
.wc-switch .track{width:40px;height:22px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-sunken);box-shadow:var(--shadow-inset);position:relative;transition:background var(--dur-med) var(--ease-out);flex:none}
.wc-switch .track::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-sm);background:var(--text-faint);transition:all var(--dur-med) var(--ease-out)}
.wc-switch input:checked+.track{background:var(--accent-quiet)}
.wc-switch input:checked+.track::after{left:20px;background:var(--accent)}
.wc-switch input:focus-visible+.track{outline:2px solid var(--focus-ring);outline-offset:2px}
.wc-switch--disabled{opacity:.45;cursor:not-allowed}

/* Tabs */
.wc-tabs{display:flex;gap:4px;border-bottom:var(--rule-double);padding:0 2px}
.wc-tab{all:unset;cursor:pointer;font-family:var(--font-heading);font-size:15px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);padding:8px 14px 10px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:color var(--dur-fast) var(--ease-out)}
.wc-tab:hover{color:var(--text-body);background:var(--accent-quiet)}
.wc-tab[aria-selected="true"]{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.wc-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}