@import url('./screen-typography.css');

/* Native buttons inherit canvas — no default white chrome */
button {
    background: transparent;
    color: inherit;
    font-family: inherit;
}

/* Canonical portal / action button — SMT01 standard (12px bold, balanced box) */
.action-btn,
.portal-btn,
.preview-btn,
.step-forward-btn,
.copy-btn,
.copper-btn,
.mint-btn,
.tab-btn,
.maintenance-code-btn,
.chat-btn,
.mic-btn,
.alert-btn,
.action-btn-small,
.remove-btn,
.menu-trigger,
.menu-dropdown button,
.delete-key-btn,
.modal-close {
    padding: 10px 16px;
    border: 2px solid var(--mentology-copper, #b87333);
    background: transparent;
    color: var(--mentology-ink, #1a1a1a);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-sizing: border-box;
}

.pathway-panel,
.channel-panel {
    padding: 14px 18px;
    min-height: 72px;
    border: 2px solid var(--mentology-copper, #b87333);
    background: transparent;
    color: var(--mentology-ink, #1a1a1a);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tier-box {
    padding: 12px 16px;
    border: 2px solid var(--mentology-copper, #b87333);
    background: transparent;
    color: var(--mentology-ink, #1a1a1a);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    box-sizing: border-box;
}

.action-btn:hover,
.portal-btn:hover,
.preview-btn:hover,
.pathway-panel:hover,
.channel-panel:hover,
.tier-box:hover,
.step-forward-btn:hover,
.copy-btn:hover,
.copper-btn:hover,
.mint-btn:hover,
.tab-btn:hover,
.maintenance-code-btn:hover,
.chat-btn:hover,
.mic-btn:hover,
.alert-btn:hover,
.action-btn-small:hover,
.remove-btn:hover,
.menu-trigger:hover,
.menu-dropdown button:hover,
.delete-key-btn:hover:not(:disabled),
.modal-close:hover {
    background: var(--mentology-copper, #b87333);
    color: var(--mentology-beige, #eae7df);
}

.action-btn:disabled,
.portal-btn:disabled,
.preview-btn:disabled,
.copper-btn:disabled,
.mint-btn:disabled,
.delete-key-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.action-btn:disabled:hover,
.portal-btn:disabled:hover,
.preview-btn:disabled:hover,
.copper-btn:disabled:hover,
.mint-btn:disabled:hover,
.delete-key-btn:disabled:hover {
    background: transparent;
    color: var(--mentology-ink, #1a1a1a);
}

.channel-panel.active,
.tier-box.active,
.pathway-panel.active,
.maintenance-code-btn.active,
.tab-btn.active {
    border-color: var(--mentology-copper, #b87333);
    background: rgba(184, 115, 51, 0.12);
    color: var(--mentology-ink, #1a1a1a);
}

.alert-btn.active {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.remove-btn {
    border-color: rgba(185, 28, 28, 0.45);
    color: #7a2e2e;
}

.remove-btn:hover {
    background: rgba(185, 28, 28, 0.15);
    color: #7a2e2e;
}

.delete-key-btn:hover:not(:disabled) {
    background: #7a2e2e;
    border-color: #7a2e2e;
    color: var(--mentology-beige, #eae7df);
}

.mic-btn {
    min-width: 44px;
    padding: 10px 12px;
}

.maintenance-code-btn {
    padding: 8px 6px;
}

.menu-dropdown button {
    padding: 10px 14px;
    text-align: left;
}

.delete-key-btn {
    padding: 8px 12px;
}

.action-btn-small,
.alert-btn,
.remove-btn {
    padding: 8px 12px;
}

.portal-btn {
    width: 100%;
}