/*   CSS FILE HEADER #
 *
 *   File:         [magia.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['09.10.2026']
 *   Version:      ['0.2.0']
 *   Description:  ['Prestígios page of the sheet (js/magia.js): a page of the book in sepia ink on parchment with one bookmark per prestige. Essences as ink drops under the hemisphere colours of the casting circle, devotions as paper slips sealed in wax, dogmas written in red, the familiar and the companion as a light, the points of each prestige by its wax seal, the bonuses as a margin note.']
 */

.mf-livro {
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 26px 20px; color: var(--tinta);
    border: 1px solid var(--borda-forte); border-radius: var(--e-raio-papel); background: var(--ca-papel); box-shadow: inset 0 0 40px rgba(60, 40, 10, .12), var(--e-sombra-papel);
}
.mf-cabeca { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid color-mix(in srgb, var(--tinta) 40%, transparent); }
.mf-cabeca-icone .ic { width: 50px; height: 50px; color: var(--tinta); display: block; }
.mf-titulo { margin: 0; font: 2.3em/1 var(--uncial); text-transform: lowercase; color: var(--tinta); }
.mf-desc { margin: .2em 0 0; font-style: italic; opacity: .75; }
.mf-mana { display: flex; align-items: baseline; gap: .3em; line-height: 1; cursor: help; }
.mf-mana span { font: 1em var(--uncial); text-transform: lowercase; color: var(--tinta-azul); }
.mf-mana b { font: 400 2.4em var(--serif); color: var(--tinta-azul); }
.mf-mana small { font: italic 1.1em var(--serif); opacity: .75; }
.mf-cabeca .btn { color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 40%, transparent); }

/* ---------- warnings and the mana adjustment of the import ---------- */
.mf-aviso, .mf-ajuste { margin: 0; padding: .45em .8em; border-left: 3px solid var(--tinta-vermelha); font: italic 1em var(--serif); color: var(--tinta-vermelha); background: color-mix(in srgb, var(--tinta-vermelha) 6%, transparent); }
.mf-ajuste { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em; color: var(--tinta); border-left-color: var(--tinta-azul); background: color-mix(in srgb, var(--tinta-azul) 7%, transparent); }
.mf-ajuste b { color: var(--tinta-azul); }
.mf-ajuste .btn { margin-left: auto; color: var(--tinta); }

/* ---------- the page ---------- */
.mf-sub { display: flex; align-items: baseline; gap: .5em; margin: .2em 0 0; font: 1.7em/1.1 var(--uncial); text-transform: lowercase; color: var(--tinta); }
.mf-sub small { font: italic .52em var(--serif); text-transform: none; opacity: .7; }
.mf-sub::after { content: ''; flex: 1; align-self: center; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--tinta) 40%, transparent), transparent); }
.mf-nota { margin: 0; font: italic .98em var(--serif); opacity: .72; }
.mf-campo { display: flex; align-items: baseline; gap: .6em; font: 1em var(--uncial); text-transform: lowercase; }
.mf-campo span { flex: none; min-width: 4.6em; opacity: .8; }
.mf-campo input, .mf-dogma-novo input, .mf-dogma-novo select {
    flex: 1; min-width: 0; padding: .2em .3em; border: 0; border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta) 45%, transparent); border-radius: 0;
    background: transparent; color: var(--tinta); font: italic 1.1em var(--serif); text-transform: none;
}
.mf-campo input:focus, .mf-dogma-novo input:focus { outline: none; border-bottom-color: var(--tinta-vermelha); }
.mf-campo input:focus-visible, .mf-dogma-novo :is(input, select):focus-visible { box-shadow: 0 1px 0 var(--tinta-vermelha), var(--e-foco); }
.mf-campo input::placeholder, .mf-dogma-novo input::placeholder { color: color-mix(in srgb, var(--tinta) 45%, transparent); }

/* ---------- essences: six hemispheres in the colours of the casting circle ---------- */
.mf-hemis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.mf-hemi {
    --hemi-tinta: color-mix(in srgb, var(--hemi) 55%, var(--tinta));
    position: relative; padding: 8px 10px 10px; border: 1px solid color-mix(in srgb, var(--hemi) 45%, transparent); border-radius: 3px;
    background: radial-gradient(120% 70% at 0 0, color-mix(in srgb, var(--hemi) 12%, transparent), transparent 70%);
}
[data-tom="escuro"] .mf-hemi { --hemi-tinta: color-mix(in srgb, var(--hemi) 70%, var(--tinta)); }
.mf-hemi-cabeca { display: flex; align-items: center; gap: .5em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--hemi) 40%, transparent); }
.mf-hemi-cabeca img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hemi) 60%, transparent)); }
.mf-hemi-nome { font: 1.3em/1 var(--uncial); text-transform: lowercase; color: var(--hemi-tinta); }
.mf-hemi-cabeca { flex-wrap: wrap; }
.mf-hemi-cabeca small { margin-left: auto; font: italic .9em var(--serif); opacity: .85; white-space: nowrap; }
.mf-hemi-cabeca small.sem { opacity: .45; }
.mf-ess { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.mf-essencia {
    display: grid; grid-template-columns: auto 1.7em auto 1fr; align-items: center; column-gap: .45em; width: 100%; padding: .22em .3em;
    border: 0; border-radius: 3px; background: none; color: var(--tinta); text-align: left; cursor: pointer; transition: background .15s;
}
.mf-essencia:hover { background: color-mix(in srgb, var(--hemi) 12%, transparent); }
.mf-pingo { width: 15px; height: 15px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 1.6px solid var(--hemi-tinta); transition: background .2s, box-shadow .2s; }
.mf-essencia.marcada .mf-pingo { background: var(--hemi); border-color: var(--hemi-tinta); box-shadow: 0 0 6px color-mix(in srgb, var(--hemi) 70%, transparent), inset -2px 2px 2px rgba(255, 255, 255, .45); }
.mf-ess-nivel { font: .82em var(--titulo); opacity: .55; text-align: center; }
.mf-essencia b { font: 1.12em var(--serif); font-weight: 400; }
.mf-essencia.marcada b { color: var(--hemi-tinta); font-weight: 700; }
.mf-essencia small { justify-self: end; font: italic .88em var(--serif); opacity: .7; }
.mf-essencia em { grid-column: 3 / -1; font: italic .8em var(--serif); color: var(--tinta-vermelha); }
.mf-essencia.dada:not(.marcada) .mf-pingo { border-style: dashed; }

/* ---------- Fé: deity, devotion levels, dogmas ---------- */
.mf-fe-topo { display: flex; flex-direction: column; gap: 4px; }
.mf-fe-pontos { margin: 0; font: italic .98em var(--serif); opacity: .8; }
.mf-devocoes { display: flex; flex-direction: column; gap: 8px; }
.mf-nivel h4 { display: flex; align-items: center; gap: .45em; margin: 0 0 4px; font: 1.15em var(--uncial); text-transform: lowercase; }
.mf-nivel h4 small { font: italic .78em var(--serif); text-transform: none; opacity: .75; }
.mf-nivel h4 small.excesso { color: var(--tinta-vermelha); opacity: 1; font-weight: 700; }
.mf-nivel h4 .mf-custo { margin-left: auto; cursor: help; }
.mf-nivel-num { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border: 1.5px solid var(--tinta); border-radius: 50%; font: .62em var(--titulo); }
.mf-nivel.acima { opacity: .55; }
.mf-nivel.acima h4::after { content: 'acima da devoção'; font: italic .7em var(--serif); text-transform: none; color: var(--tinta-vermelha); }
.mf-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; }
.mf-devocao.ativa, .mf-efeito.ativo { grid-column: span 2; }
.mf-devocao, .mf-efeito {
    position: relative; display: flex; flex-direction: column; gap: 1px; padding: .35em .5em .4em; text-align: left; cursor: pointer;
    border: 1px dashed color-mix(in srgb, var(--tinta) 38%, transparent); border-radius: 2px; background: color-mix(in srgb, var(--fundo) 30%, transparent);
    color: var(--tinta); transition: border-color .15s, box-shadow .2s, transform .15s;
}
.mf-devocao:hover, .mf-efeito:hover { border-color: var(--tinta-vermelha); transform: translateY(-1px); }
.mf-devocao b, .mf-efeito b { font: 700 1em var(--serif); }
.mf-devocao small, .mf-efeito small { font: italic .82em/1.2 var(--serif); opacity: .7; }
.mf-devocao.ativa, .mf-efeito.ativo { border: 1.5px solid var(--cera); box-shadow: 0 1px 0 rgba(0, 0, 0, .15), inset 0 0 18px color-mix(in srgb, var(--cera) 10%, transparent); }
.mf-devocao.ativa b, .mf-efeito.ativo b { color: var(--cera); }
[data-tom="escuro"] .mf-devocao.ativa b, [data-tom="escuro"] .mf-efeito.ativo b { color: var(--cera-luz); }
/* the wax seal of a chosen slip */
.mf-devocao.ativa::after, .mf-efeito.ativo::after {
    content: ''; position: absolute; top: -6px; right: -5px; width: 15px; height: 15px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--cera-luz), var(--cera) 60%, #5a0e0e); box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.mf-dogmas { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.mf-dogmas h4 { margin: 0; font: 1.15em var(--uncial); text-transform: lowercase; }
.mf-dogmas h4 small { font: italic .78em var(--serif); text-transform: none; opacity: .75; }
.mf-dogmas ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mf-dogmas li { display: flex; align-items: baseline; gap: .5em; padding: .15em .2em; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 30%, transparent); }
.mf-dogma-nivel { flex: none; font: .78em var(--titulo); opacity: .7; }
.mf-dogma-texto { flex: 1; font: italic 1.08em var(--serif); color: var(--tinta-vermelha); }
.mf-tirar { flex: none; border: 0; background: none; color: var(--tinta); opacity: .45; font-size: 1.1em; cursor: pointer; }
.mf-tirar:hover { opacity: 1; color: var(--tinta-vermelha); }
.mf-dogma-novo { display: flex; gap: .6em; }
.mf-dogma-novo select { flex: none; width: auto; font-style: normal; }

/* ---------- familiar: a spectral light over the paper ---------- */
.mf-familiar { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: start; }
.mf-familiar.apagado { opacity: .5; }
.mf-fam-previa {
    display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle, rgba(168, 216, 255, .28), rgba(20, 34, 60, .78) 62%, rgba(10, 16, 30, .92));
    box-shadow: inset 0 0 22px rgba(168, 216, 255, .35), 0 0 0 2px color-mix(in srgb, var(--tinta) 45%, transparent), 0 0 0 5px color-mix(in srgb, var(--tinta) 12%, transparent);
}
.mf-fam-previa canvas { max-width: 118px; max-height: 118px; image-rendering: pixelated; }
.mf-fam-previa:empty::after { content: '?'; font: 2.4em var(--uncial); color: rgba(220, 238, 255, .55); }
.mf-fam-campos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mf-formas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 4px; }
.mf-formas-rotulo { font: 1em var(--uncial); text-transform: lowercase; opacity: .8; min-width: 4.6em; }
.mf-forma {
    padding: .05em .45em; border: 1px solid color-mix(in srgb, var(--tinta) 28%, transparent); border-radius: var(--e-raio-controle); background: none;
    color: var(--tinta); font: italic .92em var(--serif); cursor: pointer; transition: border-color .15s, background .15s;
}
.mf-forma:hover { border-color: var(--tinta-azul); }
.mf-forma.ativa { border-color: var(--tinta-azul); background: color-mix(in srgb, var(--tinta-azul) 14%, transparent); color: var(--tinta-azul); font-style: normal; font-weight: 700; }
.mf-forma.sem { opacity: .7; }
.mf-efeitos-fam { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; }

/* ---------- the bonuses on the spells: a margin note in the grimoire's words ---------- */
.mf-bonus { padding-top: 10px; border-top: 2px solid color-mix(in srgb, var(--tinta) 40%, transparent); }
.mf-bonus-lista { columns: 2 300px; column-gap: 32px; margin: 8px 0 0; padding: 0; list-style: none; }
.mf-bonus-lista li { break-inside: avoid; position: relative; padding: .18em 0 .18em 1.3em; font: 1.05em var(--serif); }
.mf-bonus-lista li::before { content: '✦'; position: absolute; left: .1em; top: .22em; font-size: .85em; color: var(--tinta-vermelha); }
.mf-bonus-lista li.mf-b-efeito::before { content: '✧'; }
.mf-bonus-lista li.mf-b-mana::before { content: '◆'; color: var(--tinta-azul); }
.mf-bonus-lista li.alerta { color: var(--tinta-vermelha); }
.mf-bonus-lista b { font-weight: 700; }

@media (max-width: 1100px) {
    .mf-hemis { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* ---------- bookmarks: one per prestige, paper tabs standing on the page rule; the open one joins the page ---------- */
.mf-marcadores { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -2px; padding: 0 8px; border-bottom: 1.5px solid color-mix(in srgb, var(--tinta) 45%, transparent); }
.mf-marcador {
    position: relative; margin-bottom: -1.5px; padding: .4em 1.1em .45em; border: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent); border-bottom: 0; border-radius: var(--e-raio-aba);
    background: color-mix(in srgb, var(--e-papiro-sombra) 30%, transparent); color: var(--e-tinta-suave); font: 1.15em/1 var(--uncial); text-transform: lowercase; cursor: pointer;
    transform: translateY(3px); transition: transform var(--e-dur-rapido) var(--e-ease-tinta), background-color var(--e-dur-toque), color var(--e-dur-toque);
}
.mf-marcador:hover { color: var(--tinta); transform: translateY(1px); }
.mf-marcador:focus-visible { outline: none; box-shadow: var(--e-foco); }
.mf-marcador.ativo {
    transform: none; border-color: color-mix(in srgb, var(--tinta) 45%, transparent); color: var(--cera); z-index: 1;
    background: var(--ca-papel); box-shadow: 0 -2px 4px rgba(58, 34, 10, .1);
}
.mf-marcador.ativo::before { content: ''; position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--cera-luz), var(--cera) 60%, #4d0d0d); }
[data-tom="escuro"] .mf-marcador.ativo { color: var(--cera-luz); }
.mf-secao { display: flex; flex-direction: column; gap: 10px; min-height: 240px; padding-top: 4px; }
.mf-vazio { margin: 30px 0; font: italic 1.15em var(--serif); text-align: center; opacity: .75; }

/* ---------- head of a prestige: its seal, origin, passive and points ---------- */
.mf-prestigio { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--tinta) 30%, transparent); border-radius: 3px; }
.mf-pr-selo {
    display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fbe8c4; font: 1.35em/1 var(--uncial);
    background: radial-gradient(circle at 35% 30%, var(--cera-luz), var(--cera) 60%, #5a0e0e); box-shadow: 0 2px 3px rgba(0, 0, 0, .4), inset 0 0 0 4px color-mix(in srgb, var(--cera) 70%, #000);
}
.mf-pr-texto b { font: 1.35em/1.1 var(--uncial); text-transform: lowercase; }
.mf-pr-texto small { display: block; font: italic .9em var(--serif); opacity: .7; }
.mf-pr-texto p { margin: .25em 0 0; font: italic 1em var(--serif); }
.mf-vinculo b { font: 1.3em var(--serif); color: var(--tinta-vermelha); }
.mf-vinculo small { opacity: .7; }
.mf-pontos { display: grid; grid-template-columns: 2em 3.2em 2em; grid-template-rows: auto auto; align-items: center; gap: 2px 4px; text-align: center; }
.mf-pontos span { grid-column: 1 / -1; font: italic .85em var(--serif); opacity: .75; }
.mf-pontos button { height: 2em; border: 1px solid color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: 50%; background: none; color: var(--tinta); font: 1.1em/1 var(--serif); cursor: pointer; }
.mf-pontos button:hover { border-color: var(--tinta-vermelha); color: var(--tinta-vermelha); }
.mf-pontos input { width: 100%; padding: 0; border: 0; border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta) 45%, transparent); background: none; color: var(--tinta-vermelha); font: 1.7em/1 var(--serif); text-align: center; -moz-appearance: textfield; }
.mf-pontos input::-webkit-inner-spin-button, .mf-pontos input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mf-notas { display: flex; flex-direction: column; gap: 4px; font: 1em var(--uncial); text-transform: lowercase; }
.mf-notas span { opacity: .8; }
.mf-notas textarea { min-height: 150px; text-transform: none; }
.mf-bichos { align-self: flex-start; color: var(--tinta); }

/* ---------- buying essences: points left and how a click learns ---------- */
.mf-compra { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; font: italic 1em var(--serif); }
.mf-compra b { font-style: normal; }
.mf-compra .excesso { color: var(--tinta-vermelha); }
.mf-vias { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.mf-vias > span { font: 1em var(--uncial); text-transform: lowercase; opacity: .8; margin-right: 4px; }
/* how a click learns: cells of a paper ruler (segment), the chosen one underlined in gold ink */
.mf-vias { gap: 0; }
.mf-via { margin-left: -1px; padding: .2em .8em; border: 1px solid color-mix(in srgb, var(--tinta) 40%, transparent); border-radius: 0; background: none; color: var(--tinta); font: italic .98em var(--serif); cursor: pointer; transition: background-color var(--e-dur-toque); }
.mf-vias > span + .mf-via { border-radius: var(--e-raio-controle) 0 0 var(--e-raio-controle); }
.mf-via:last-child { border-radius: 0 var(--e-raio-controle) var(--e-raio-controle) 0; }
.mf-via:hover { background: color-mix(in srgb, var(--e-papiro-sombra) 35%, transparent); }
.mf-via:focus-visible { outline: none; position: relative; box-shadow: var(--e-foco); }
.mf-via.ativa { background: color-mix(in srgb, var(--e-papiro-sombra) 55%, transparent); color: var(--tinta); box-shadow: inset 0 -2px 0 var(--e-ouro-tinta); font-style: normal; }
[data-tom="escuro"] .mf-via.ativa { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--e-ouro); }
.mf-essencia.travada { cursor: not-allowed; }
.mf-essencia.travada b, .mf-essencia.travada small, .mf-essencia.travada .mf-pingo { opacity: .45; }
.mf-essencia.pode .mf-pingo { border-style: dotted; }
.mf-essencia em.mf-origem { color: var(--hemi-tinta); }
.mf-essencia em.mf-custo-ess { color: var(--tinta); opacity: .75; }
.mf-essencia.dada { cursor: default; }

/* ribbons: the silk colours of every ribbon live in ficha.css (four silks, repeated) */
.mf-pendentes { border-left-color: var(--tinta-vermelha); background: color-mix(in srgb, var(--tinta-vermelha) 5%, transparent); }
.mf-pendentes b { color: var(--tinta-vermelha); }
.mf-pendentes .btn + .btn { margin-left: 0; }

/* ---------- options of the prestiges (13/10): the slips of the book, bought (sealed) or not ---------- */
.mf-opcao.travada { cursor: not-allowed; }
.mf-opcao.travada b, .mf-opcao.travada small { opacity: .5; }
.mf-opcao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.mf-opcao-acoes .btn { padding: .05em .55em; font-size: .85em; }
.mf-opcao-acoes .mf-tirar { margin-left: auto; }
.mf-nivel.fora { opacity: .55; }
details.mf-nota ul { margin: .3em 0 0; padding-left: 1.2em; }
.mf-dogma-novo select { max-width: 16em; }

/* ---------- uses of the options, Elixir, vial type, companion HP, devotion choices (14/10) ---------- */
.mf-opcao-acoes .btn { max-width: 100%; white-space: normal; text-align: left; }
.mf-acao-mesa { padding: .05em .5em; border: 1px dotted color-mix(in srgb, var(--tinta) 40%, transparent); border-radius: var(--e-raio-controle); font: italic .85em var(--serif); opacity: .75; cursor: help; }
.mf-comp-hp { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.mf-comp-hp .btn { padding: .05em .7em; font-size: .9em; }
.mf-compra li.excesso b { color: var(--tinta-vermelha); }
/* companheiro animal: stat block (HP with bar and its buttons, then the numbers big) */
.mf-bicho { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(5, minmax(78px, 1fr)); gap: 10px; }
.mf-bicho > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 8px 8px; border: 1.5px solid color-mix(in srgb, var(--tinta) 30%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.mf-bicho span { font: 1em/1 var(--uncial); text-transform: lowercase; opacity: .75; }
.mf-bicho b { font: 400 2.1em/1.05 var(--serif); font-variant-numeric: tabular-nums; }
.mf-bicho b small { font-size: .5em; opacity: .7; }
.mf-bicho-hp { grid-row: span 1; }
.mf-bicho-hp b { color: var(--tinta-vermelha); }
.mf-bicho-hp.excesso { border-color: var(--tinta-vermelha); }
.mf-bicho-barra { display: block; width: 100%; height: 6px; margin: 4px 0 6px; border-radius: 3px; background: linear-gradient(90deg, var(--tinta-vermelha) var(--pct), color-mix(in srgb, var(--tinta) 14%, transparent) var(--pct)); }
.mf-bicho .mf-comp-hp { justify-content: center; }
.mf-bicho-tracos { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 4px 0 0; padding: 0; list-style: none; font: 1.05em var(--serif); }
.mf-bicho-tracos span { font: .95em var(--uncial); text-transform: lowercase; opacity: .7; margin-right: .25em; }
.mf-bicho-perto label { display: inline-flex; align-items: center; gap: .4em; cursor: pointer; font: .95em var(--uncial); text-transform: lowercase; }
.mf-frasco-tipo select {
    flex: none; width: auto; padding: .2em .3em; border: 0; border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta) 45%, transparent); border-radius: 0;
    background: transparent; color: var(--tinta); font: italic 1.05em var(--serif); text-transform: none;
}
/* a devotion that asks a choice: the card, and under it the select (never inside the button) */
.mf-devocao-par { grid-column: span 2; display: flex; flex-direction: column; gap: 3px; }
.mf-devocao-par > .mf-devocao.ativa { grid-column: auto; }
.mf-devocao-escolha { display: flex; align-items: baseline; gap: .5em; padding: 0 .3em; font: 1em var(--uncial); text-transform: lowercase; }
.mf-devocao-escolha span { flex: none; opacity: .8; }
.mf-devocao-escolha select {
    flex: 1; min-width: 0; padding: .15em .3em; border: 0; border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta) 45%, transparent); border-radius: 0;
    background: transparent; color: var(--tinta); font: italic 1.05em var(--serif); text-transform: none;
}
.mf-devocao-escolha select:focus-visible { outline: none; box-shadow: 0 1px 0 var(--tinta-vermelha), var(--e-foco); }
.mf-devocao-escolha.pendente span { color: var(--tinta-vermelha); opacity: 1; font-style: italic; }
.mf-devocao-escolha.pendente select { border-bottom: 1.5px solid var(--tinta-vermelha); }