/* Extras do hub por cima de frame.css (que é o styles.css do protótipo da FrameaFrame STUDIO, sem mudanças): as fontes
   servidas por nós, a aba Ferramentas, o que só existe com servidor (estantes editáveis, envio em partes, janelas
   acessíveis, aviso por cima das janelas) e as correções do celular. Nada aqui muda o visual do protótipo. */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/fonts/ui/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/fonts/ui/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ui/instrument-serif-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/ui/instrument-serif-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/ui/jetbrains-mono-latin.woff2") format("woff2"); }

[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .m-search input:focus-visible { outline: none; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: #fff; }

/* cor clara na Aparência: o texto dos botões fica escuro (hub-ui.js calcula --accent-text) */
body:not(.gold) .btn:not(.ghost):not(.danger), body:not(.gold) .m-btn.primary, body:not(.gold) .rendered { color: var(--accent-text, #fff); }

/* Ferramentas: o terceiro espaço, no vermelho do LegendaPRO */
body.tools { --accent: #e3241d; --accent-2: #ff8a84; --accent-text: #fff; }
.spaces a.on.tools { background: #e3241d; color: #fff; }
.spaces svg.ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tools-hero {
  position: relative; text-align: center; margin: -10px -56px 20px; padding: 26px 20px 50px; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(ellipse 45% 60% at 50% 38%, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 5%, transparent) 50%, transparent 75%);
}
.tools-hero .tools-mark { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 14%, transparent); animation: floaty 4s ease-in-out infinite; }
.tools-hero .tools-mark svg { width: 34px; height: 34px; }
.tools-hero h1 { font-size: 46px; font-weight: 800; margin: 14px 0 6px; letter-spacing: -1px; }
.tools-hero h1 .hl { color: var(--accent-2); }
.tools-hero p { color: #d8d5e0; font-size: 15px; max-width: 560px; line-height: 1.6; }
.shelf.tool { min-height: 210px; }
.shelf.tool small { font-size: 13px; line-height: 1.55; flex: 1; }
.shelf.tool.off { opacity: .6; }
.shelf.tool.off:hover { transform: none; border-color: var(--line); }
.tool-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tool-foot .o-count { margin: 0; }
.tut { position: relative; flex: 0 0 auto; }
.tut .wide-card { display: block; text-align: left; }
.tut .edit { position: absolute; top: 10px; right: 10px; z-index: 4; width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(0,0,0,.6); color: #fff; }
.tut .edit svg { width: 16px; height: 16px; }
.row.full { margin-left: -56px; margin-right: -56px; }
.row { scroll-margin-top: 90px; }

/* topo: o feedback com a cara dos outros ícones */
.top-actions .fb-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 8px; color: #fff; }
.top-actions .fb-btn span { display: none; }
.top-actions .fb-btn svg { width: 21px; height: 21px; }
.top-actions .fb-btn:hover { background: rgba(255,255,255,.08); }
.icon-btn[aria-current="page"] { color: var(--accent-2); }

/* estantes e prateleiras editáveis (no protótipo eram fixas) */
.o-block-head.row-flex .mini { align-self: center; }
.add-rack { margin: -10px 0 30px; }

/* envio em partes do Ouro */
.upbar { height: 6px; border-radius: 99px; background: #0e0e13; overflow: hidden; margin-top: 8px; width: 100%; max-width: 320px; }
.upbar i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); transition: width .2s; }
.form-err { color: #ff8a9b; font-size: 13px; margin: 4px 0 6px; }

/* janelas: <dialog> (Esc, foco preso e de volta) com a mesma caixa .modal do protótipo dentro */
dialog.dlg { padding: 0; border: 0; background: transparent; color: var(--text); width: min(620px, calc(100vw - 40px)); max-width: none; max-height: none; overflow: visible; }
dialog.dlg.wide { width: min(860px, calc(100vw - 40px)); }
dialog.dlg::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(3px); animation: pageIn .25s ease both; }
dialog.dlg .modal { max-width: none; }
.modal p.text { color: #d8d5e0; font-size: 14px; line-height: 1.6; margin-bottom: 10px; }

/* aviso por cima das janelas (popover) */
#toast[popover] { inset: auto; left: 50%; bottom: 26px; margin: 0; color: var(--text); overflow: visible; }
#toast.bad { border-color: #ff5470; }

/* até 1080 px o topo quebra em linhas, como o protótipo faz no celular (marca e ações em cima, os três espaços embaixo), e
   o conteúdo começa abaixo dele (--topbar-h é a altura medida). Numa linha só, os três espaços não cabem com a marca do Ouro
   e as ações do administrador */
@media (max-width: 1080px) {
  .topbar { flex-wrap: wrap; }
  .spaces { position: static; transform: none; order: 3; width: 100%; justify-content: center; margin-top: 10px; }
  .page { padding-top: calc(var(--topbar-h, 120px) + 14px); }
  .hero { padding-top: calc(var(--topbar-h, 120px) + 24px); }
  .admin { padding-top: var(--topbar-h, 120px); }
  .shelf-bar { top: var(--topbar-h, 120px); }
}
/* celular */
@media (max-width: 700px) {
  .spaces a { padding: 7px 10px; font-size: 12px; gap: 5px; white-space: nowrap; }
  .spaces a > svg.ic { display: none; }   /* três abas na largura do celular: fica só a barra de ouro, como no protótipo */
  .tools-hero { margin: -10px -16px 16px; }
  .tools-hero h1 { font-size: 32px; }
  .row.full { margin-left: -16px; margin-right: -16px; }
  .list-row { flex-wrap: wrap; }
  .list-row .mini { width: 100%; justify-content: flex-end; }
  .mat-row { grid-template-columns: 1fr 40px; }
  .mat-row input:first-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .spaces a { padding: 7px 7px; font-size: 11px; }
  .spaces { overflow-x: auto; justify-content: safe center; scrollbar-width: none; }   /* tela bem estreita: rola em vez de cortar */
  .spaces::-webkit-scrollbar { display: none; }
}
@media (max-width: 350px) {
  .spaces a .ouro-mark { display: none; }
  .spaces a { padding: 7px 6px; font-size: 10.5px; }
}
@media (pointer: coarse) {
  .mini button, .m-btn.icon { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-fx { display: none; }
}