/**
 * Remap Main Stylesheet
 * Layered on top of Handfish design tokens (loaded from CDN).
 */

@import url('./layout.css');
@import url('./calibrate.css');
@import url('./zones.css');
@import url('./export.css');

/* ============================================================================
   Material Symbols (loaded by handfish/index.css; we only need the base style)
   ============================================================================ */

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-display: block;
    src: url('https://fonts.noisefactor.io/fonts/material-symbols-outlined/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    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';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    user-select: none;
    vertical-align: middle;
}

/* ============================================================================
   Base styles
   ============================================================================ */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--hf-bg-base);
    color: var(--hf-text-normal);
    font-family: var(--hf-font-family, 'Nunito', system-ui, sans-serif);
    font-size: 14px;
}

a {
    color: var(--hf-link-color);
    text-decoration: none;
}

a:hover { color: var(--hf-link-hover); }

code {
    background: var(--hf-bg-elevated);
    padding: 0.1em 0.35em;
    border-radius: var(--hf-radius-sm, 4px);
    font-family: var(--hf-font-family-mono, 'Noto Sans Mono', ui-monospace, monospace);
    font-size: 0.85em;
}

kbd {
    background: var(--hf-bg-elevated);
    border: 1px solid var(--hf-border-subtle);
    border-radius: var(--hf-radius-sm, 4px);
    padding: 0.1em 0.4em;
    font-family: var(--hf-font-family-mono, monospace);
    font-size: 0.85em;
}

pre {
    font-family: var(--hf-font-family-mono, monospace);
    font-size: 0.85em;
    color: var(--hf-text-normal);
    background: var(--hf-bg-elevated);
    padding: 1rem;
    border-radius: var(--hf-radius, 6px);
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.muted { color: var(--hf-text-dim); }

/* Suppress FOUC: hide views until JS routes */
.has-route .view.active { display: block; }

/* Visible only when JS is in control */
.view {
    display: none;
}

.view.active {
    display: block;
}

.hidden { display: none !important; }

/* ============================================================================
   Buttons (lightweight handfish-aligned)
   ============================================================================ */

.hf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: var(--hf-weight-semibold, 600);
    line-height: 1;
    background: var(--hf-bg-elevated);
    color: var(--hf-text-normal);
    border: 1px solid var(--hf-border-subtle);
    border-radius: var(--hf-radius, 6px);
    cursor: pointer;
    transition: background var(--hf-transition, 0.15s ease),
                border-color var(--hf-transition, 0.15s ease),
                color var(--hf-transition, 0.15s ease);
    text-decoration: none;
}

.hf-button:hover:not(:disabled) {
    background: var(--hf-bg-muted);
    border-color: var(--hf-border-hover);
}

.hf-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hf-button-primary {
    background: var(--hf-accent);
    color: var(--hf-bg-base);
    border-color: var(--hf-accent);
}

.hf-button-primary:hover:not(:disabled) {
    background: var(--hf-accent-hover);
    border-color: var(--hf-accent-hover);
    color: var(--hf-bg-base);
}

.hf-button-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.hf-button .material-symbols {
    font-size: 1rem;
}

.hf-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    color: var(--hf-text-normal);
    border: 1px solid transparent;
    border-radius: var(--hf-radius, 6px);
    cursor: pointer;
    transition: background var(--hf-transition, 0.15s ease);
}

.hf-icon-btn:hover {
    background: var(--hf-bg-elevated);
}

/* ============================================================================
   Form elements (built on hf-form)
   ============================================================================ */

.hf-form {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--hf-bg-elevated);
    color: var(--hf-text-normal);
    border: 1px solid var(--hf-border-subtle);
    border-radius: var(--hf-radius, 6px);
    font-family: inherit;
    font-size: 0.875rem;
}

.hf-form:focus {
    outline: none;
    border-color: var(--hf-border-focus);
}

select.hf-form {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--hf-text-dim) 50%),
                      linear-gradient(135deg, var(--hf-text-dim) 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) center, calc(100% - 0.7rem) center;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
    padding-right: 2rem;
}

.control-label {
    display: block;
    font-size: 0.8rem;
    color: var(--hf-text-dim);
    margin-bottom: 0.25rem;
    font-weight: var(--hf-weight-medium, 500);
}