/* Tema Mario 8-bit do PADD: céu azul de fase 1-1, nuvens, morros, cano
   verde e chão de tijolos (pixel art própria, sem sprites do jogo). O
   placar do topo mostra o caminho, as "moedas" (caracteres), as linhas e
   a hora da última edição; as sub-notas viram "FASES" com blocos "?" e a
   nota fica numa caixa creme de menu 8-bit. Fica ativo só com o tema
   "mario" (ver theme.js) e SUBSTITUI o note.css inteiro. */

@font-face { font-family: "Press Start 2P"; src: url(fonts/press-start-2p-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --sky: #5c94fc;
  --brick: #c84c0c;
  --brick-hi: #fcbcb0;
  --block: #fc9838;
  --block-hi: #fcd8a8;
  --green: #00a800;
  --green-dk: #005800;
  --green-hi: #b8f818;
  --coin: #fcd800;
  --paper: #fff8e6;
  --paper-dk: #e8d8b0;
  --hover: #ffe9a8;
  --ink: #2a1a08;
  --muted: #7a5a30;
  --pixel: "Press Start 2P", monospace;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* tijolos: 2 fileiras de 32px, juntas pretas desencontradas */
  --bricks:
    linear-gradient(#000 0 0) 0 30px / 100% 2px repeat-x,
    linear-gradient(#000 0 0) 0 62px / 100% 2px repeat-x,
    linear-gradient(90deg, transparent 30px, #000 30px 32px) 0 0 / 32px 30px repeat-x,
    linear-gradient(90deg, transparent 14px, #000 14px 16px, transparent 16px 30px, #000 30px 32px) 0 32px / 32px 30px repeat-x,
    var(--brick);
  /* faixa de tijolos menor (cabeçalho das caixas): fileiras de 21px */
  --bricks-sm:
    linear-gradient(#000 0 0) 0 19px / 100% 2px repeat-x,
    linear-gradient(90deg, transparent 30px, #000 30px 32px) 0 0 / 32px 19px repeat-x,
    linear-gradient(90deg, transparent 14px, #000 14px 16px, transparent 16px 30px, #000 30px 32px) 0 21px / 32px 19px repeat-x,
    var(--brick);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.lc-only, .tm-only, .pp-only, .sw-only { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--sky); }
html, body { margin: 0; height: 100%; }
/* fundo transparente no body: o cenário fixo (z-index -1) fica atrás do
   conteúdo, mas na frente do fundo do html */
body { background: transparent; color: var(--ink); font-family: var(--mono); }
::selection { background: var(--coin); color: #000; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* ---- Cenário ---------------------------------------------------------------- */
#mb-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#mb-scene svg { position: absolute; display: block; }
.mb-cloud.c1 { left: 40px; top: 58%; width: 128px; height: 48px; }
.mb-cloud.c2 { right: 8px; top: 31%; width: 136px; height: 51px; }
.mb-cloud.c3 { left: 120px; top: 67%; width: 96px; height: 36px; }
.mb-hill.big { left: -40px; bottom: 64px; width: 320px; height: 150px; }
.mb-hill.small { left: 62%; bottom: 64px; width: 200px; height: 90px; }
.mb-bush { left: 30%; bottom: 64px; width: 160px; height: 40px; }
.mb-pipe { right: 36px; bottom: 64px; width: 88px; height: 136px; }
.mb-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: var(--bricks);
  border-top: 4px solid #000;
  box-shadow: inset 0 4px 0 var(--brick-hi);
}

/* ---- Peças comuns: caixa de menu 8-bit, moeda, blocos ------------------------- */
#mb-panel, #sidebar, .panel-inner, .login-page .card, .list-page #list {
  position: relative;
  background: var(--paper);
  border: 4px solid #000;
  box-shadow: inset 4px 4px 0 #fff, inset -4px -4px 0 var(--paper-dk);
  /* cantos de cima em degrau, como nos menus 8-bit */
  clip-path: polygon(
    0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% 100%, 0 100%);
}

.mb-coin, #status::before {
  display: inline-block; flex-shrink: 0; width: 12px; height: 18px;
  background: var(--coin);
  border: 2px solid #000;
  box-shadow: inset -3px 0 0 #c88c00, inset 0 3px 0 #fff4a0;
  clip-path: polygon(25% 0, 75% 0, 100% 15%, 100% 85%, 75% 100%, 25% 100%, 0 85%, 0 15%);
}

/* bloco "?" (sub-notas e lista de notas) */
#sidebar-list a::before, .list-page #list li a::before {
  content: "?"; flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px;
  background: var(--block); border: 2px solid #000;
  box-shadow: inset 2px 2px 0 var(--block-hi), inset -2px -2px 0 var(--brick);
  font: 10px/1 var(--pixel); color: #fff; text-shadow: 2px 2px 0 var(--brick);
}

/* botões = blocos laranja; o principal é verde de cano */
.links a, .links button, .panel-header button, .login-page button, .list-page a.new {
  display: inline-flex; align-items: center; justify-content: center;
  font: 9px/1 var(--pixel); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 10px 11px 9px; color: #000; cursor: pointer; border-radius: 0;
  background: var(--block); border: 3px solid #000;
  box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--brick);
}
.links a:hover, .links button:hover, .panel-header button:hover, .list-page a.new:hover { background: #ffb060; }
.links a:active, .links button:active, .panel-header button:active, .login-page button:active, .list-page a.new:active {
  box-shadow: inset 3px 3px 0 var(--brick), inset -3px -3px 0 var(--block-hi);
}
#preview-toggle, .login-page button, .list-page a.new {
  background: var(--green); color: #fff; text-shadow: 2px 2px 0 #000;
  box-shadow: inset 3px 3px 0 var(--green-hi), inset -3px -3px 0 var(--green-dk);
}
#preview-toggle:hover, .login-page button:hover, .list-page a.new:hover { background: #18c018; }

/* ---- Página da nota ------------------------------------------------------------ */
body.note-page {
  height: 100vh; height: 100dvh; overflow: hidden;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) 64px;
  grid-template-areas: "hud hud" "side main" "bar bar";
  column-gap: 24px;
}
body.note-page:has(#sidebar[hidden]) { grid-template-areas: "hud hud" "main main" "bar bar"; }
#main-column, #status-bar { display: contents; }
#mb-hud { grid-area: hud; }
#sidebar { grid-area: side; }
#mb-panel, #editor, #preview { grid-area: main; }
#status, #status-bar .links { grid-area: bar; }

/* placar do topo */
#mb-hud {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 16px;
  padding: 18px 32px 16px;
  font: 14px/1.9 var(--pixel); letter-spacing: 1px; color: #fff; text-shadow: 2px 2px 0 #000;
}
.mb-lbl { display: block; }
.mb-val { display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
#mb-hud .mb-val .mb-coin { margin-right: 10px; }
#mb-path { display: block; text-transform: uppercase; text-overflow: ellipsis; }
#mb-hud .mb-coin { box-shadow: inset -3px 0 0 #c88c00, inset 0 3px 0 #fff4a0, 2px 2px 0 #000; clip-path: none; }

/* caixa da nota: faixa de tijolos com o título + editor/preview por cima */
#mb-panel, #editor, #preview { margin: 0 152px 24px 0; }
body.note-page:has(#sidebar[hidden]) :is(#mb-panel, #editor, #preview) { margin-left: 32px; }
#mb-panel { min-height: 0; }
#mb-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  height: 44px; padding: 0 20px; border-bottom: 4px solid #000;
  background: var(--bricks-sm); box-shadow: inset 0 3px 0 var(--brick-hi);
  font: 12px/1 var(--pixel); color: #fff; text-shadow: 2px 2px 0 #000;
}
#mb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
#mb-world { flex-shrink: 0; font-size: 9px; }
#editor, #preview {
  z-index: 1; align-self: stretch; justify-self: stretch; width: auto; height: auto; min-width: 0; min-height: 0;
  margin-top: 48px; margin-bottom: 32px; padding: 16px 26px 14px;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  background: transparent; color: var(--ink);
  scrollbar-width: thin; scrollbar-color: var(--brick) transparent;
}
#editor {
  outline: none; resize: none; border-top: 0; border-bottom: 0;
  font: 400 15px/1.75 var(--mono); caret-color: var(--brick);
}
#editor::placeholder { color: var(--muted); }

/* sub-notas: as "FASES" */
#sidebar {
  align-self: start; max-height: calc(100% - 24px); min-height: 0; margin: 0 0 24px 32px;
  display: flex; flex-direction: column; padding: 16px 12px 12px;
}
#sidebar-up, #sidebar-list a {
  display: flex; gap: 12px; align-items: center; padding: 8px 6px;
  color: #000; text-decoration: none; font: 500 13px/1.4 var(--mono); overflow-wrap: anywhere;
}
#sidebar-up {
  flex-shrink: 0; font-size: 0; gap: 0; padding-bottom: 12px; margin-bottom: 10px;
  border-bottom: 4px dotted #c8b88c;
}
/* cano verde em miniatura: "sobe" pra nota-mãe */
#sidebar-up::before {
  content: ""; flex-shrink: 0; width: 20px; height: 18px; margin-right: 12px; border: 2px solid #000;
  background: linear-gradient(90deg, var(--green-dk) 0 3px, var(--green) 3px 9px, var(--green-hi) 9px 12px, var(--green) 12px 14px, var(--green-dk) 14px);
}
#sidebar-up::after { content: attr(data-parent); font-size: 13px; }
#sidebar-title { flex-shrink: 0; font-size: 0; margin: 0 0 8px 4px; }
#sidebar-title::before { content: "FASES"; font: 11px/1 var(--pixel); color: var(--brick); letter-spacing: 1px; }
#sidebar-list { list-style: none; margin: 0; padding: 0; min-height: 0; overflow-y: auto; scrollbar-width: none; }
#sidebar-list a .slash { display: none; }
#sidebar-up:hover, #sidebar-list a:hover, #sidebar-list a:focus-visible { background: var(--hover); outline: none; }
#sidebar-list a:hover::after, #sidebar-list a:focus-visible::after {
  content: ""; flex-shrink: 0; margin-left: auto; width: 8px; height: 12px; background: var(--brick);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* chão: status à esquerda, blocos à direita */
#status {
  justify-self: start; align-self: center; margin-left: 32px; max-width: 40%; min-width: 0;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: rgba(0, 0, 0, .6); color: #fff;
  font: 10px/1.3 var(--pixel); text-transform: uppercase; text-shadow: 2px 2px 0 #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#status::before { content: ""; }
#status[data-state="busy"]::before { background: #fff; box-shadow: inset -3px 0 0 #a8a8a8; }
#status[data-state="offline"] { color: #ffb0a0; }
#status[data-state="offline"]::before { background: #e40058; box-shadow: inset -3px 0 0 #880030; }
#status-bar .links { justify-self: end; align-self: center; margin-right: 24px; display: flex; gap: 10px; position: relative; }
#more-links, #logout-form { display: contents; }
#more-toggle { display: none; }
.links .history-link.lc-only { display: none; }

/* ---- Preview de Markdown ----------------------------------------------------------- */
#preview { overflow-y: auto; overflow-wrap: anywhere; font: 400 15px/1.75 var(--mono); }
#preview > :first-child { margin-top: 0; }
#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6 {
  font-family: var(--pixel); font-weight: 400; line-height: 1.6; margin: 1.3em 0 .6em;
}
#preview h1 { font-size: 1.15em; color: var(--brick); }
#preview h2 { font-size: .95em; color: #000; }
#preview h3 { font-size: .8em; color: var(--green-dk); }
#preview h4, #preview h5, #preview h6 { font-size: .7em; color: var(--muted); }
#preview p { margin: .7em 0; }
#preview ul, #preview ol { padding-left: 1.5em; }
#preview li::marker { color: var(--brick); }
#preview li:has(input[type="checkbox"]) { list-style: none; margin-left: -1.5em; }
#preview input[type="checkbox"] { accent-color: var(--green); }
#preview a { color: #2038ec; }
#preview strong { color: #000; }
#preview blockquote { margin: .7em 0; padding-left: 1em; border-left: 4px solid var(--brick); color: var(--muted); }
#preview code { background: #f3e3bd; padding: .1em .35em; }
#preview pre { padding: .8em 1em; background: #f3e3bd; border: 3px solid #000; overflow-x: auto; }
#preview pre code { background: none; padding: 0; overflow-wrap: normal; }
#preview img { max-width: 100%; height: auto; }
#preview hr { border: none; border-block: 2px solid #000; height: 14px; margin: 1.4em 0; background: repeating-linear-gradient(90deg, var(--brick) 0 30px, #000 30px 32px); }
#preview table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
#preview th, #preview td { border: 2px solid #000; padding: .3em .8em; text-align: left; overflow-wrap: normal; }
#preview th { background: var(--block); font: .65em var(--pixel); }

/* ---- Painéis (histórico, tema) ------------------------------------------------------- */
.panel {
  position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .45);
  align-items: center; justify-content: center; padding: 2rem;
}
.panel:not([hidden]) { display: flex; }
.panel-inner { width: min(540px, 100%); max-height: 80vh; display: flex; flex-direction: column; }
.panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 12px 0 18px; min-height: 52px; border-bottom: 4px solid #000;
  background: var(--bricks-sm); box-shadow: inset 0 3px 0 var(--brick-hi);
}
.panel-header strong { font: 11px/1.5 var(--pixel); color: #fff; text-transform: uppercase; text-shadow: 2px 2px 0 #000; }
.panel-header button { padding: 8px 10px 7px; font-size: 8px; }
.panel-list { overflow-y: auto; padding: 10px 12px 14px; }
.panel-list button {
  display: block; width: 100%; padding: 10px 12px; margin: 0 0 2px; border: none; border-radius: 0;
  background: none; color: var(--ink); text-align: left; cursor: pointer;
  font: 400 13px/1.45 var(--mono); overflow-wrap: anywhere;
}
.panel-list small { color: var(--muted); }
.panel-list button:hover, .panel-list button:focus-visible { background: var(--hover); outline: none; }
.panel-list button.current { background: #dff5b8; box-shadow: inset 4px 0 0 var(--green); font-weight: 500; }
#theme-list button { font: 10px/1.8 var(--pixel); text-transform: uppercase; }
#theme-list small { font: 400 12px var(--mono); text-transform: none; }

/* ---- Celular ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #mb-scene .mb-hill.big, #mb-scene .mb-cloud.c3 { display: none; }
  .mb-pipe { right: 14px; width: 66px; height: 102px; }
  .mb-cloud.c1 { top: 72%; left: 10px; }
  .mb-cloud.c2 { top: 12%; }
  .mb-hill.small { left: 55%; }
  .mb-bush { left: 4%; }

  body.note-page, body.note-page:has(#sidebar[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) 64px;
    grid-template-areas: "hud" "side" "main" "bar";
    column-gap: 0;
  }
  #mb-hud { grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 14px 10px; font-size: 10px; }
  #mb-hud .mb-saved { display: none; }
  #mb-hud .mb-coin { width: 10px; height: 14px; }

  #sidebar { flex-direction: row; align-items: center; gap: 8px; max-height: none; margin: 0 12px 12px; padding: 8px; overflow: hidden; }
  #sidebar-up { border: 0; margin: 0; padding: 4px; }
  #sidebar-up::after { content: none; }
  #sidebar-up::before { margin-right: 0; }
  #sidebar-title { display: none; }
  #sidebar-list { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; }
  #sidebar-list a { flex-shrink: 0; white-space: nowrap; overflow-wrap: normal; padding: 4px 8px 4px 4px; gap: 8px; font-size: 13px; }
  #sidebar-list a::before { width: 20px; height: 20px; font-size: 8px; }
  #sidebar-list a:hover::after, #sidebar-list a:focus-visible::after { content: none; }

  #mb-panel, #editor, #preview,
  body.note-page:has(#sidebar[hidden]) :is(#mb-panel, #editor, #preview) { margin: 0 12px 12px; }
  #mb-head { height: 38px; padding: 0 12px; font-size: 10px; }
  #mb-world { font-size: 8px; }
  #editor, #preview { margin-top: 42px; margin-bottom: 20px; padding: 12px 10px 10px; border-left-width: 6px; border-right-width: 6px; font-size: 14px; }

  #status { margin-left: 10px; max-width: none; padding: 7px 8px; font-size: 8px; gap: 7px; }
  #status::before { width: 10px; height: 14px; }
  #status-bar .links { margin-right: 10px; gap: 6px; }
  .links a, .links button { padding: 10px 9px 9px; font-size: 8px; }
  /* "histórico" direto no chão (o .lc-only geral esconde com !important;
     aqui a regra é mais específica e vence) */
  .links .history-link.lc-only { display: inline-flex !important; }
  #more-toggle { display: inline-flex; font-family: var(--mono); font-size: 14px; padding: 6px 10px; }
  #more-links {
    display: none; position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 10;
    flex-direction: column; align-items: stretch; gap: 8px; min-width: 13rem; padding: 12px;
    background: var(--paper); border: 4px solid #000; box-shadow: inset 4px 4px 0 #fff, inset -4px -4px 0 var(--paper-dk), 4px 4px 0 rgba(0, 0, 0, .35);
  }
  #status-bar.menu-open #more-links { display: flex; }
  #more-links #history-link { display: none; }
  #logout-form { display: block; }
  #logout-form button { width: 100%; }
  #more-links a, #more-links #logout-form button { padding: 12px 10px 11px; font-size: 9px; }

  .panel { padding: 0; }
  .panel:not([hidden]) { align-items: flex-end; }
  .panel-inner { width: 100%; max-height: 85dvh; }
}

/* ---- Login: "APERTE START" ------------------------------------------------------------------ */
body.login-page {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 20px 20px 90px;
}
#mb-logo { text-align: center; color: #fff; text-shadow: 4px 4px 0 #000; }
.mb-logo-name { font: 56px/1 var(--pixel); letter-spacing: 4px; }
.mb-logo-tag { font: 12px/1 var(--pixel); margin-top: 18px; text-shadow: 2px 2px 0 #000; }
.login-page .card { width: min(380px, 100%); padding: 24px 22px 22px; color: var(--ink); }
.login-page h1 { margin: 0 0 18px; font: 11px/1.5 var(--pixel); text-transform: uppercase; color: var(--brick); }
.login-page input[type="password"] {
  display: block; width: 100%; margin: 0 0 16px; padding: 12px 14px; border-radius: 0;
  border: 3px solid #000; background: #fff; color: var(--ink); caret-color: var(--brick);
  font: 400 16px var(--mono); outline: none;
}
.login-page input[type="password"]:focus { box-shadow: inset 0 0 0 2px var(--coin); }
.login-page button { width: 100%; padding: 14px 16px 13px; font-size: 11px; }
.login-page .error { margin: 0 0 14px; color: #e40058; font: 9px/1.5 var(--pixel); text-transform: uppercase; }
@media (max-width: 640px) {
  .mb-logo-name { font-size: 40px; }
}

/* ---- Lista de notas: todas as fases ------------------------------------------------------- */
body.list-page { min-height: 100vh; min-height: 100dvh; padding: 24px 26px 96px; }
.list-page > header { max-width: 980px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.list-page h1 { margin: 0; font: 18px/1.5 var(--pixel); text-transform: uppercase; color: #fff; text-shadow: 3px 3px 0 #000; }
.list-page #list { max-width: 980px; margin: 0 auto; padding: 12px; list-style: none; }
.list-page #list li a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  padding: 9px 10px; color: var(--ink); text-decoration: none;
}
.list-page #list .path { font: 500 15px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-page #list .meta { font: 400 12px var(--mono); color: var(--muted); white-space: nowrap; }
.list-page #list li a:hover { background: var(--hover); }
.list-page #empty { max-width: 980px; margin: 20px auto; padding: 16px; background: var(--paper); border: 4px solid #000; }
.list-page #empty a { color: #2038ec; }
@media (max-width: 640px) {
  body.list-page { padding: 16px 12px 90px; }
  .list-page h1 { font-size: 13px; }
  .list-page #list li a { grid-template-columns: 24px minmax(0, 1fr); }
  .list-page #list .meta { grid-column: 2; white-space: normal; }
}