/*   CSS FILE HEADER #
 *
 *   File:         [feedback.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['26.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['Look of apps/comum/feedback.js: the small leather tab on the left edge (under the Novidades one, top 288; mirror of the Diário tab on the right, top 540) and the papyrus dialog. Every rule is scoped by fb- classes and wins over the dialog rules of tema.css and mesa.css.']
 */

@font-face { font-family: 'Cinzel'; src: url('fontes/cinzel-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fontes/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fontes/cormorant-garamond-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Dalingia'; src: url('fontes/dalingia.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('fontes/im-fell-english-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('fontes/im-fell-english-latin-400-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }

/* ---------- the tab: left edge, below the Novidades one; under the master's note of the sheet (.cd-bilhete, 860) and the creatures (930) ---------- */
.fb-aba {
    position: fixed; left: 0; top: max(490px, min(540px, calc(100vh - 190px))); z-index: 855;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 13px 7px 11px; border: 1px solid #6f5a2a; border-left: 0; border-radius: 0 7px 7px 0;
    background: linear-gradient(270deg, rgba(10, 20, 8, .25), rgba(220, 230, 170, .07) 45%, rgba(10, 20, 8, .3)),
        url('img/couro.webp') 0 0 / 300px, #2f3b22;
    color: #ead39a; cursor: pointer; opacity: .8;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .4), inset -1px 0 0 rgba(255, 230, 170, .16);
    font: 600 13px/1 'Cinzel', Georgia, serif; letter-spacing: .12em;
    transition: padding-left .2s, opacity .2s, filter .2s;
}
.fb-aba:hover { padding-left: 11px; opacity: 1; filter: brightness(1.15); }
.fb-aba:focus-visible { opacity: 1; outline: 2px solid #f3d98e; outline-offset: 2px; }
.fb-aba-texto { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; }
.fb-aba svg { width: 15px; height: 15px; flex: none; }
/* below ~1500 px the side tabs take a narrower strip, so they do not cover the cards and pages next to the edge (26/10) */
@media (max-width: 1499px) { .fb-aba { padding: 12px 4px 10px 5px; gap: 6px; } .fb-aba:hover { padding-left: 8px; } .fb-aba svg { width: 14px; height: 14px; } }
@media (max-width: 640px) { .fb-aba { top: auto; bottom: 330px; } }
@media print { .fb-aba, .fb-folha, .fb-bilhete { display: none !important; } }

/* ---------- the dialog: a papyrus sheet with the × in the corner, a ruled title and the buttons at the foot ---------- */
html body dialog.fb-folha {
    --fb-tinta: #2f2013; --fb-tinta-2: #5c4629; --fb-ouro: #a47a22; --fb-vermelho: #8e231b; --fb-mana: #5b2fc0;
    color-scheme: light; position: fixed; inset: 0; margin: auto;
    width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 2px; overflow: auto;
    color: var(--fb-tinta); font: 500 18px/1.4 'Cormorant Garamond', Georgia, serif; text-align: left;
    background: url('img/grao.webp') 0 0 / 256px, url('img/papiro.webp') 0 0 / 1600px,
        radial-gradient(ellipse at 50% 35%, transparent 45%, rgba(90, 55, 15, .28) 100%), #e9dab3;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
    scrollbar-width: thin; scrollbar-color: rgba(92, 62, 28, .45) transparent;
    transform-origin: 50% 0; animation: fb-desenrola .45s cubic-bezier(.16, 1, .3, 1) both;
}
html body dialog.fb-folha::backdrop { background: radial-gradient(ellipse at 50% 40%, rgba(20, 10, 4, .5), rgba(5, 3, 1, .82) 75%); }
html body dialog.fb-folha.fb-saindo { animation: fb-enrola .26s cubic-bezier(.5, 0, .75, .3) forwards; }
.fb-form { margin: 0; padding: 0 40px 0; }
.fb-cabeca { padding: 30px 30px 6px; text-align: center; }
.fb-cabeca::after {
    content: ''; display: block; height: 14px; margin: 10px auto 0; width: 62%;
    background: linear-gradient(90deg, transparent, rgba(164, 122, 34, .7) 18%, rgba(164, 122, 34, .7) 82%, transparent) center / 100% 1px no-repeat,
        radial-gradient(circle, #a47a22 0 3px, transparent 3.5px) center / 14px 14px no-repeat;
}
.fb-sobre { margin: 0; font: 600 12px/1 'Cinzel', Georgia, serif; letter-spacing: .32em; text-transform: uppercase; color: var(--fb-vermelho); }
.fb-folha .fb-titulo { margin: 6px 0 4px; padding: 0; border: 0; font: 400 46px/1 'Dalingia', 'IM Fell English', Georgia, serif; color: #3a2414; text-transform: none; }
.fb-lema { margin: 0; font: italic 400 17px/1.3 'IM Fell English', Georgia, serif; color: var(--fb-tinta-2); }
.fb-x {
    position: absolute; z-index: 2; top: 14px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px;
    border: 0; border-radius: 50%; background: none; color: var(--fb-tinta-2); font: 400 30px/1 'Cormorant Garamond', Georgia, serif; cursor: pointer;
}
.fb-x:hover, .fb-x:focus-visible { background: rgba(58, 36, 20, .1); color: var(--fb-vermelho); outline: none; }

.fb-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 16px; padding: 0; border: 0; min-width: 0; }
.fb-tipos legend, .fb-rotulo { display: block; margin: 0 0 8px; padding: 0; font: 600 12px/1 'Cinzel', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-tinta-2); }
.fb-tipo {
    position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 9px; cursor: pointer;
    border: 1px solid rgba(92, 62, 28, .3); border-radius: 3px; background: rgba(255, 248, 226, .35);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.fb-folha .fb-tipo, .fb-folha .fb-tipo span { text-transform: none; letter-spacing: normal; }
.fb-tipo:hover { border-color: rgba(92, 62, 28, .55); background: rgba(255, 248, 226, .6); }
.fb-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.fb-tipo-nome { font: 400 24px/1 'Dalingia', 'IM Fell English', Georgia, serif; color: #3a2414; }
.fb-tipo-dica { font: italic 400 14.5px/1.2 'IM Fell English', Georgia, serif; color: var(--fb-tinta-2); }
.fb-tipo:has(input:checked) { border-color: var(--fb-vermelho); background: rgba(142, 35, 27, .07); box-shadow: inset 0 0 0 1px rgba(142, 35, 27, .35); }
.fb-tipo:has(input:checked) .fb-tipo-nome { color: var(--fb-vermelho); }
.fb-tipo:has(input:focus-visible) { outline: 2px solid var(--fb-mana); outline-offset: 2px; }

.fb-folha .fb-texto {
    display: block; box-sizing: border-box; width: 100%; min-height: 150px; max-height: 46vh; resize: vertical; margin: 0; padding: 10px 12px;
    border: 1px solid rgba(92, 62, 28, .4); border-radius: 3px; background: rgba(255, 250, 235, .55); color: var(--fb-tinta);
    font: 500 18px/1.4 'Cormorant Garamond', Georgia, serif; box-shadow: inset 0 1px 3px rgba(60, 35, 5, .15);
}
.fb-folha .fb-texto:focus { outline: none; border-color: var(--fb-ouro); box-shadow: inset 0 1px 3px rgba(60, 35, 5, .15), 0 0 0 2px rgba(164, 122, 34, .3); }
.fb-folha .fb-texto::placeholder { color: rgba(92, 70, 41, .6); font-style: italic; }
.fb-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 6px 0 0; }
.fb-junto { font: italic 400 14.5px/1.25 'IM Fell English', Georgia, serif; color: var(--fb-tinta-2); }
.fb-conta { flex: none; font: 600 12px/1 'Cinzel', Georgia, serif; letter-spacing: .08em; color: var(--fb-tinta-2); }
.fb-conta.fb-cheio { color: var(--fb-vermelho); }

.fb-pe {
    position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px;
    margin: 18px -40px 0; padding: 12px 40px 20px; border-top: 1px solid rgba(92, 62, 28, .25);
    background: url('img/papiro.webp') 0 0 / 1600px, #e9dab3; background-attachment: local;
}
.fb-btn { padding: .55em 1.4em; border-radius: 4px; cursor: pointer; font: 600 14px/1.2 'Cinzel', Georgia, serif; letter-spacing: .06em; }
.fb-btn-ouro {
    border: 1px solid #8a6420; color: #2a1a06; text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
    background: linear-gradient(180deg, #f4dc8f 0%, #d6ac4a 45%, #b0832a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 250, 220, .7), 0 2px 6px rgba(60, 35, 5, .25);
}
.fb-btn-ouro:hover { background: linear-gradient(180deg, #fbe7a6 0%, #e0b955 45%, #bb8e31 100%); }
.fb-btn-ouro:disabled { cursor: progress; filter: saturate(.5) brightness(.95); }
.fb-btn-fantasma { border: 1px solid rgba(92, 62, 28, .45); background: transparent; color: var(--fb-tinta-2); }
.fb-btn-fantasma:hover { background: rgba(120, 86, 40, .1); color: var(--fb-tinta); }
.fb-btn:focus-visible { outline: 2px solid var(--fb-mana); outline-offset: 2px; }

/* ---------- our own note, only where the page has no UI.toast (the menu): bottom right like the toasts ---------- */
.fb-bilhete {
    position: fixed; right: 18px; bottom: 18px; z-index: 10002; max-width: min(420px, calc(100vw - 36px)); padding: 12px 18px 12px 46px;
    color: #2f2013; font: 500 18px/1.3 'Cormorant Garamond', Georgia, serif; white-space: pre-line;
    background: url('img/papiro.webp') 0 0 / 1600px, #e9dab3; box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
    animation: fb-chega .3s cubic-bezier(.16, 1, .3, 1) both; transition: opacity .35s, transform .35s;
}
.fb-bilhete::before {
    content: ''; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%;
    background: radial-gradient(circle at 35% 30%, #f3d98e, #a47a22 55%, #5c3d0c);
}
.fb-bilhete.ok::before { background: radial-gradient(circle at 35% 30%, #b6ebc2, #3d7a4b 55%, #1c3d24); }
.fb-bilhete.erro::before { background: radial-gradient(circle at 35% 30%, #f3a197, #a8322a 55%, #5b120d); }
.fb-bilhete.fb-saindo { opacity: 0; transform: translateX(30px) rotate(2deg); }

@keyframes fb-desenrola { from { opacity: 0; transform: translateY(-16px) scaleY(.84) rotate(-.5deg); } to { opacity: 1; transform: none; } }
@keyframes fb-enrola { to { opacity: 0; transform: translateY(-12px) scaleY(.88); } }
@keyframes fb-chega { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 640px) {
    .fb-form { padding: 0 20px; }
    .fb-pe { margin: 18px -20px 0; padding: 12px 20px 18px; }
    .fb-tipos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    html body dialog.fb-folha, html body dialog.fb-folha.fb-saindo, .fb-bilhete { animation: none; }
    .fb-aba, .fb-bilhete { transition: none; }
}