@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --ink: #1a1208;
    --ink-light: #4a3c28;
    --ink-faint: #8a7a62;
    --paper: #f5f0e8;
    --paper-warm: #ede6d4;
    --paper-deep: #ddd3bc;
    --accent: #8b4513;
    --accent-mid: #a0522d;
    --accent-pale: #f0dcc8;
    --leaf: #2d5a1b;
    --leaf-pale: #dff0d8;
    --rule: #c8b89a;
    --shadow: rgba(26, 18, 8, 0.12);
    --gutter: 2.4rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Source Serif 4', Georgia, serif;
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.65;
}

/* ── HEADER ─────────────────────────────────────── */
header {
    background: var(--ink);
    color: var(--paper);
    padding: 2rem var(--gutter) 1.6rem;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 3px solid var(--accent);
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

header .logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    letter-spacing: .06em;
    line-height: 1.2;
    flex: 1;
}

header .logo small {
    display: block;
    font-family: 'Source Serif 4', serif;
    font-size: .72rem;
    opacity: .6;
    font-weight: 300;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tab-bar {
    display: flex;
    gap: .3rem;
}

.tab-btn {
    background: transparent;
    border: 1px solid rgba(245, 240, 232, .25);
    color: var(--paper);
    font-family: 'Source Serif 4', serif;
    font-size: .78rem;
    letter-spacing: .05em;
    padding: .45rem .9rem;
    cursor: pointer;
    border-radius: 3px;
    transition: background .15s, border-color .15s;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, .08);
}

.tab-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ── MAIN LAYOUT ─────────────────────────────────── */
main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem var(--gutter) 4rem;
}

.panel {
    display: none;
}

.panel.active {
    display: block;
}

/* ── KEY VIEWER ──────────────────────────────────── */
#viewer .section-block {
    margin-bottom: 3.5rem;
}

.section-heading {
    font-family: 'Playfair Display', serif;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink);
    padding: .6rem 0 .3rem;
    border-bottom: 2px solid var(--ink);
    margin-bottom: .2rem;
}

.section-subtitle {
    font-size: .82rem;
    color: var(--ink-faint);
    font-style: italic;
    margin-bottom: 1.4rem;
    letter-spacing: .03em;
}

.subsection-heading {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--accent);
    margin: 1.6rem 0 1rem;
    padding-left: .5rem;
    border-left: 3px solid var(--accent-pale);
}

/* ── COUPLET TABLE ───────────────────────────────── */
.key-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.key-table tr {
    vertical-align: top;
}

.key-table tr:hover td {
    background: rgba(139, 69, 19, .04);
}

.key-table td {
    padding: .38rem .5rem .38rem 0;
    border-bottom: 1px solid var(--paper-deep);
    transition: background .1s;
}

.num-cell {
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    font-weight: 500;
    color: var(--accent);
    white-space: nowrap;
    padding-right: .8rem !important;
    min-width: 3.2rem;
    text-align: right;
}

.lead-cell {
    color: var(--ink);
    width: 100%;
    padding-right: 1rem !important;
}

.result-cell {
    white-space: nowrap;
    font-style: italic;
    color: var(--leaf);
    font-size: .84rem;
    padding-left: .4rem !important;
}

.go-cell {
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: .76rem;
    color: var(--ink-faint);
    padding-left: .6rem !important;
}

.go-cell a {
    color: var(--accent-mid);
    text-decoration: none;
    cursor: pointer;
}

.go-cell a:hover {
    text-decoration: underline;
}

.prime-row td {
    border-bottom: 1px solid var(--rule) !important;
}

.prime-row td:first-child {
    border-bottom: none !important;
}

/* ── INTERACTIVE MODE ────────────────────────────── */
#interactive-panel {
    max-width: 700px;
    margin: 0 auto;
}

.i-section-select {
    margin-bottom: 2rem;
}

.i-section-select label {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: .9rem;
    color: var(--ink-faint);
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-style: italic;
}

.i-section-select select {
    width: 100%;
    padding: .6rem .9rem;
    font-family: 'Source Serif 4', serif;
    font-size: .9rem;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    color: var(--ink);
    border-radius: 3px;
    cursor: pointer;
}

.i-card {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 2px 8px var(--shadow);
}

.i-card-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    color: var(--ink-faint);
    margin-bottom: .5rem;
    letter-spacing: .08em;
}

.i-question {
    font-family: 'Playfair Display', serif;
    font-size: 1.12rem;
    color: var(--ink);
    margin-bottom: 1.2rem;
    line-height: 1.5;
}

.i-choices {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.i-choice-btn {
    background: var(--paper);
    border: 1.5px solid var(--rule);
    padding: .65rem 1rem;
    font-family: 'Source Serif 4', serif;
    font-size: .88rem;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    border-radius: 3px;
    transition: all .15s;
    line-height: 1.45;
}

.i-choice-btn:hover {
    border-color: var(--accent);
    background: var(--accent-pale);
    color: var(--accent);
}

.i-choice-btn.chosen {
    border-color: var(--accent);
    background: var(--accent-pale);
}

.i-result-card {
    background: var(--leaf-pale);
    border: 2px solid var(--leaf);
    border-radius: 4px;
    padding: 1.4rem 1.6rem;
    text-align: center;
}

.i-result-card .taxon {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-style: italic;
    color: var(--leaf);
    margin-bottom: .4rem;
}

.i-result-card .label {
    font-size: .8rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.i-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: 1.4rem;
    align-items: center;
}

.i-breadcrumb-item {
    font-size: .74rem;
    color: var(--ink-faint);
    font-family: 'JetBrains Mono', monospace;
    background: var(--paper-deep);
    padding: .15rem .45rem;
    border-radius: 2px;
    cursor: pointer;
}

.i-breadcrumb-item:hover {
    background: var(--accent-pale);
    color: var(--accent);
}

.i-breadcrumb-arrow {
    color: var(--rule);
    font-size: .75rem;
}

.i-restart-btn {
    margin-top: 1rem;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: .55rem 1.2rem;
    font-family: 'Source Serif 4', serif;
    font-size: .85rem;
    cursor: pointer;
    border-radius: 3px;
    letter-spacing: .04em;
    transition: background .15s;
}

.i-restart-btn:hover {
    background: var(--ink);
}

/* ── EDITOR ──────────────────────────────────────── */
#editor-panel .editor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 780px) {
    #editor-panel .editor-layout {
        grid-template-columns: 1fr;
    }
}

.editor-pane {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.editor-pane label {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: .88rem;
    color: var(--ink-faint);
    display: block;
    margin-bottom: .2rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

#json-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    background: var(--ink);
    color: #c8d8a8;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 1rem;
    width: 100%;
    min-height: 480px;
    resize: vertical;
    line-height: 1.55;
    tab-size: 2;
}

#json-input:focus {
    outline: 2px solid var(--accent);
}

.editor-toolbar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.ed-btn {
    padding: .45rem .9rem;
    font-family: 'Source Serif 4', serif;
    font-size: .8rem;
    border: 1.5px solid var(--rule);
    background: var(--paper-warm);
    color: var(--ink);
    cursor: pointer;
    border-radius: 3px;
    transition: all .15s;
    letter-spacing: .03em;
}

.ed-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.ed-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.ed-btn.primary:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.ed-status {
    font-size: .75rem;
    font-family: 'JetBrains Mono', monospace;
    padding: .3rem .6rem;
    border-radius: 3px;
    opacity: 0;
    transition: opacity .3s;
}

.ed-status.ok {
    background: var(--leaf-pale);
    color: var(--leaf);
    opacity: 1;
}

.ed-status.err {
    background: #fce8e8;
    color: #c0392b;
    opacity: 1;
}

.preview-pane {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 1rem 1.2rem;
    min-height: 480px;
    overflow-y: auto;
}

.preview-pane .key-table {
    font-size: .8rem;
}

/* ── JSON GUIDE ──────────────────────────────────── */
#guide-panel .guide-card {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.4rem;
}

#guide-panel h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    margin-bottom: .7rem;
    color: var(--accent);
}

#guide-panel p,
#guide-panel li {
    font-size: .86rem;
    color: var(--ink-light);
    margin-bottom: .4rem;
    line-height: 1.6;
}

#guide-panel ul {
    padding-left: 1.2rem;
}

#guide-panel code {
    font-family: 'JetBrains Mono', monospace;
    font-size: .76rem;
    background: var(--paper-deep);
    padding: .1rem .35rem;
    border-radius: 2px;
    color: var(--accent);
}

#guide-panel pre {
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    background: var(--ink);
    color: #c8d8a8;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    line-height: 1.55;
    margin-top: .6rem;
}

/* ── MISC ────────────────────────────────────────── */
.decorative-rule {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 2rem 0;
}

.empty-msg {
    color: var(--ink-faint);
    font-style: italic;
    font-size: .85rem;
    padding: 1rem 0;
}


/* ════════════════════════════════════════════════════
   MOBILE & TOUCH — adicionado para iOS e Android
   ════════════════════════════════════════════════════ */

/* Evita zoom automático no iOS ao focar campos */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ── Tablet (≤ 860px) ── */
@media (max-width: 860px) {

    :root {
        --gutter: 1.2rem;
    }

    /* Header empilha logo + tabs */
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem var(--gutter) .9rem;
        gap: .7rem;
    }

    .tab-bar {
        width: 100%;
        gap: .25rem;
    }

    .tab-btn {
        flex: 1;
        text-align: center;
        padding: .5rem .4rem;
        font-size: .72rem;
        letter-spacing: .02em;
    }

    main {
        padding: 1.2rem var(--gutter) 3rem;
    }

    /* Tabela da chave: scroll horizontal, todas as colunas visíveis */
    .key-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .result-cell {
        white-space: normal;
        min-width: 7rem;
    }

    .go-cell {
        min-width: 3.5rem;
    }

    /* Editor: coluna única */
    .editor-layout {
        grid-template-columns: 1fr !important;
    }

    #json-input {
        min-height: 260px;
    }

    .preview-pane {
        min-height: 200px;
    }
}

/* ── Celular (≤ 540px) ── */
@media (max-width: 540px) {

    html {
        font-size: 14px;
    }

    /* Header ainda mais compacto */
    header {
        padding: .8rem var(--gutter) .7rem;
    }

    header .logo {
        font-size: .95rem;
    }

    header .logo small {
        display: none; /* subtítulo some no celular pequeno */
    }

    .tab-btn {
        font-size: .68rem;
        padding: .48rem .3rem;
    }

    /* Viewer */
    .section-heading {
        font-size: 1.05rem;
    }

    .subsection-heading {
        font-size: .9rem;
    }

    .key-table {
        font-size: .78rem;
    }

    .num-cell {
        font-size: .7rem;
        min-width: 2.4rem;
        padding-right: .5rem !important;
    }

    /* Todas as colunas visíveis — tabela com scroll horizontal */

    /* Interactive */
    #interactive-panel {
        max-width: 100%;
    }

    .i-section-select {
        margin-bottom: 1.2rem;
    }

    .i-section-select select {
        font-size: 14px;        /* evita zoom iOS */
        padding: .7rem .8rem;
    }

    .i-card {
        padding: 1rem 1.1rem;
    }

    .i-question {
        font-size: .98rem;
        margin-bottom: .9rem;
    }

    /* Botões de escolha maiores para toque */
    .i-choice-btn {
        padding: .85rem 1rem;
        font-size: .86rem;
        /* Área de toque mínima recomendada: 44px */
        min-height: 44px;
    }

    /* Feedback de toque: active simula o hover no mobile */
    .i-choice-btn:active {
        border-color: var(--accent);
        background: var(--accent-pale);
        color: var(--accent);
    }

    .i-result-card .taxon {
        font-size: 1.25rem;
    }

    .i-restart-btn {
        width: 100%;
        padding: .85rem 1rem;
        min-height: 44px;
        font-size: .88rem;
    }

    /* Breadcrumb mais compacto */
    .i-breadcrumb {
        gap: .2rem;
        margin-bottom: 1rem;
    }

    .i-breadcrumb-item {
        font-size: .65rem;
        padding: .2rem .4rem;
        /* Área de toque mínima */
        min-height: 28px;
        display: inline-flex;
        align-items: center;
    }

    /* Guide */
    #guide-panel .guide-card {
        padding: 1rem 1.1rem;
    }

    #guide-panel pre {
        font-size: .65rem;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Toque: remove hover persistente em dispositivos touch ── */
@media (hover: none) {
    .key-table tr:hover td {
        background: transparent;
    }

    .i-choice-btn:hover {
        border-color: var(--rule);
        background: var(--paper);
        color: var(--ink);
    }

    .tab-btn:hover {
        background: transparent;
    }

    .i-breadcrumb-item:hover {
        background: var(--paper-deep);
        color: var(--ink-faint);
    }

    /* Só o :active funciona em touch */
    .i-choice-btn:active {
        border-color: var(--accent);
        background: var(--accent-pale);
        color: var(--accent);
    }

    .tab-btn:active {
        background: rgba(255, 255, 255, .12);
    }

    .i-breadcrumb-item:active {
        background: var(--accent-pale);
        color: var(--accent);
    }
}