/* Tema Terminal do PADD: uma janela do Terminal do Mac com painéis no
   estilo lazygit (borda arredondada, título escrito na própria borda,
   barra de atalhos embaixo). Fica ativo só quando o tema é "terminal"
   (ver theme.js) e aí SUBSTITUI o note.css inteiro. O cursor em bloco
   é desenhado pelo note.js (#tm-cursor). */

@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 700; font-display: swap; }

:root {
  color-scheme: dark;
  --desk: #15171c;     /* "mesa" atrás da janela */
  --bg: #282c34;       /* fundo da janela */
  --bar: #21252b;      /* barra de título */
  --fg: #dcdfe4;
  --dim: #7f848e;
  --border: #5c6370;
  --green: #98c379;
  --yellow: #e5c07b;
  --blue: #61afef;
  --cyan: #56b6c2;
  --magenta: #c678dd;
  --red: #e06c75;
  --sel: #3e5f8a;      /* linha selecionada, como no lazygit */
  --cursor: #d7dae0;
  --mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.lc-only { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--desk); }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 400 14px/1.5 var(--mono); }
::selection { background: var(--sel); color: #fff; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1px dashed var(--yellow); outline-offset: 2px; }

/* ---- Janela ------------------------------------------------------------- */
body.note-page, body.login-page, body.list-page {
  margin: 18px; height: calc(100vh - 36px); height: calc(100dvh - 36px);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 70px rgba(0, 0, 0, .55);
}
#tm-titlebar {
  grid-area: title;
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 34px; background: var(--bar); border-bottom: 1px solid #181a1f;
  color: #9da5b4; font: 500 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tm-lights { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; }
.tm-lights i { display: block; width: 12px; height: 12px; border-radius: 50%; }
.tm-lights i:nth-child(1) { background: #ff5f57; }
.tm-lights i:nth-child(2) { background: #febc2e; }
.tm-lights i:nth-child(3) { background: #28c840; }
#tm-title { max-width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Painel: borda arredondada + título escrito em cima da borda. */
.tm-pane, #sidebar, #editor, #preview, .list-page #list, .panel-inner {
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
}
.tm-label {
  position: absolute; z-index: 2; padding: 0 2px; line-height: 1;
  background: var(--bg); white-space: nowrap;
}

/* ---- Página da nota ------------------------------------------------------ */
body.note-page {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: 34px minmax(0, 1fr) auto;
  grid-template-areas:
    "title title"
    "side  main"
    "bar   bar";
  column-gap: 8px;
}
body.note-page:has(#sidebar[hidden]) { grid-template-areas: "title title" "main main" "bar bar"; }
#main-column, #status-bar { display: contents; }

#editor, #preview, #tm-path, #tm-count { grid-area: main; }
#editor, #preview {
  align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0;
  margin: 16px 12px 4px 0; width: auto; height: auto;
  padding: 14px 16px;
}
body.note-page:has(#sidebar[hidden]) #editor,
body.note-page:has(#sidebar[hidden]) #preview { margin-left: 12px; }
#editor {
  resize: none; outline: none;
  color: var(--fg); font: 400 14px/1.6 var(--mono);
  scrollbar-width: thin; scrollbar-color: #4b5263 transparent;
}
#editor:focus { border-color: var(--green); }
#editor::placeholder { color: var(--dim); }

/* Cursor em bloco: com o JS ligado (html.tm-caret), o cursor nativo some
   e o #tm-cursor é desenhado no lugar do caractere. */
html.tm-caret #editor { caret-color: transparent; }
#tm-cursor {
  position: fixed; z-index: 5; pointer-events: none; display: none;
  background: var(--cursor); color: var(--bg); white-space: pre;
  font: 400 14px/1.6 var(--mono);
}
/* Bloco fixo, sem piscar. */
#tm-cursor.on { display: block; }
#tm-cursor.idle { background: transparent; color: transparent; box-shadow: inset 0 0 0 1px var(--cursor); }

#tm-path {
  align-self: start; justify-self: start; position: relative; z-index: 2;
  margin: 9px 0 0 12px; padding: 0 3px; background: var(--bg);
  color: var(--fg); font-weight: 700; line-height: 14px; white-space: nowrap;
  max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis;
}
#tm-path b { color: var(--dim); font-weight: 400; }
body.note-page:has(#sidebar[hidden]) #tm-path { margin-left: 24px; }
body.note-page:has(#editor:focus) #tm-path { color: var(--green); }
#tm-count {
  align-self: end; justify-self: end; position: relative; z-index: 2;
  margin: 0 24px -4px 0; padding: 0 3px; background: var(--bg);
  color: var(--dim); line-height: 14px; font-size: 13px;
}

/* Sub-notas: painel [1] à esquerda, como a árvore de arquivos do lazygit */
/* O título fica em cima da borda, então o painel não pode rolar (cortaria
   o título): quem rola é a lista de dentro. */
#sidebar {
  grid-area: side; position: relative; min-height: 0;
  display: flex; flex-direction: column;
  margin: 16px 0 4px 12px; padding: 12px 0 18px;
}
#sidebar::before {
  content: "[1]─sub-notas"; position: absolute; top: -8px; left: 10px; padding: 0 3px;
  background: var(--bg); color: var(--fg); font-weight: 700; line-height: 14px;
}
#sidebar-up {
  display: block; padding: 2px 12px; color: var(--cyan); text-decoration: none; font-size: 0;
}
#sidebar-up::after { content: "▲ ../" attr(data-parent); font-size: 14px; }
#sidebar-title {
  position: absolute; right: 10px; bottom: 0; font-size: 0;
}
#sidebar-title::before {
  content: attr(data-count) " notas"; font-size: 13px; color: var(--dim);
  background: var(--bg); padding: 0 3px;
}
#sidebar-list {
  list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #4b5263 transparent;
}
#sidebar-list a {
  display: block; padding: 2px 12px; color: var(--fg); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sidebar-list a::before { content: "  ▸ "; color: var(--dim); white-space: pre; }
#sidebar-list a .slash { color: var(--dim); }
#sidebar-list a:hover, #sidebar-list a:focus-visible { background: var(--sel); color: #fff; outline: none; }
#sidebar-list a:hover::before { color: #fff; }

/* Barra de atalhos embaixo (lazygit) + status à direita */
#status-bar .links, #status { grid-area: bar; }
#status-bar .links {
  justify-self: start; display: flex; flex-wrap: wrap; align-items: center;
  padding: 6px 14px 9px; position: relative; min-width: 0;
}
#more-links, #logout-form { display: contents; }
#more-toggle { display: none; }
.links a, .links button {
  border: none; background: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--blue); text-decoration: none; font: inherit; white-space: nowrap;
}
.links a::before, .links button::before { content: " | "; color: var(--dim); white-space: pre; }
#preview-toggle::before { content: none; }
.links a:hover, .links button:hover { color: var(--cyan); text-decoration: underline; }
#theme-link { color: var(--magenta); }
#logout-form button { color: var(--red); }
#status {
  justify-self: end; align-self: center; padding: 6px 16px 9px;
  color: var(--yellow); white-space: nowrap;
}
#status[data-state="ok"] { color: var(--green); }
#status[data-state="offline"] { color: var(--red); }
#status::after { content: "  PADD 1.0"; color: var(--dim); white-space: pre; }

/* ---- Preview de Markdown ----------------------------------------------------- */
#preview { overflow-y: auto; overflow-wrap: anywhere; font: 400 14px/1.65 var(--mono); }
#preview > :first-child { margin-top: 0; }
#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6 { margin: 1.1em 0 .4em; font-size: 1em; line-height: 1.4; }
#preview h1 { color: var(--magenta); }
#preview h2 { color: var(--blue); }
#preview h3, #preview h4, #preview h5, #preview h6 { color: var(--yellow); }
#preview h1::before { content: "# "; color: var(--dim); }
#preview h2::before { content: "## "; color: var(--dim); }
#preview h3::before { content: "### "; color: var(--dim); }
#preview p { margin: .7em 0; }
#preview ul, #preview ol { margin: .7em 0; padding-left: 2ch; }
#preview li::marker { color: var(--green); }
#preview li:has(input[type="checkbox"]) { list-style: none; margin-left: -2ch; }
#preview input[type="checkbox"] { accent-color: var(--green); }
#preview a { color: var(--cyan); }
#preview blockquote { margin: .7em 0; padding: 0 0 0 1.5ch; border-left: 2px solid var(--border); color: var(--dim); }
#preview code { color: var(--green); }
#preview pre { padding: .8em 1ch; border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; background: #21252b; }
#preview pre code { color: var(--fg); overflow-wrap: normal; }
#preview img { max-width: 100%; height: auto; }
#preview hr { border: none; border-top: 1px dashed var(--border); margin: 1.4em 0; }
#preview table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: .7em 0; }
#preview th, #preview td { border: 1px solid var(--border); padding: .2em 1ch; text-align: left; overflow-wrap: normal; }
#preview th { color: var(--yellow); }

/* ---- Painéis (histórico, tema): pop-up do lazygit ---------------------------- */
.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 {
  position: relative; width: min(560px, 100%); max-height: 80vh;
  display: flex; flex-direction: column; border-color: var(--green);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.panel-header strong {
  margin-top: -8px; padding: 0 3px; background: var(--bg); color: var(--green);
  font-weight: 700; line-height: 14px;
}
.panel-header strong::before { content: "["; }
.panel-header strong::after { content: "]"; }
.panel-header button {
  margin-top: -8px; padding: 0 3px; border: none; background: var(--bg);
  color: var(--dim); font: inherit; line-height: 14px; cursor: pointer;
}
.panel-header button::before { content: "esc: "; }
.panel-header button:hover { color: var(--fg); }
.panel-list { overflow-y: auto; padding: 8px 0 10px; }
.panel-list button {
  display: block; width: 100%; padding: 3px 12px; border: none; background: none;
  color: var(--fg); text-align: left; font: inherit; cursor: pointer; overflow-wrap: anywhere;
}
.panel-list button:hover, .panel-list button:focus-visible { background: var(--sel); color: #fff; outline: none; }
.panel-list small { color: var(--dim); font-size: 1em; }
.panel-list button:hover small { color: #c9d1dc; }
.panel-list button.current { color: var(--green); }
.panel-list button.current::before { content: "* "; }

/* ---- Celular ------------------------------------------------------------------ */
@media (max-width: 640px) {
  body.note-page, body.login-page, body.list-page {
    margin: 0; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none;
  }
  #tm-titlebar { height: 30px; font-size: 12px; }
  .tm-lights { gap: 6px; left: 10px; }
  .tm-lights i { width: 10px; height: 10px; }
  #tm-title { max-width: calc(100% - 110px); }

  body.note-page, body.note-page:has(#sidebar[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 30px auto minmax(0, 1fr) auto;
    grid-template-areas: "title" "side" "main" "bar";
  }
  #sidebar { margin: 14px 8px 0; padding: 10px 6px 6px; flex-direction: row; align-items: center; white-space: nowrap; }
  #sidebar-title { display: none; }
  #sidebar-up, #sidebar-list a { padding: 4px 8px; flex-shrink: 0; }
  #sidebar-list { display: flex; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: none; }
  #sidebar-list a::before { content: "▸ "; }
  #editor, #preview,
  body.note-page:has(#sidebar[hidden]) #editor,
  body.note-page:has(#sidebar[hidden]) #preview { margin: 16px 8px 4px; padding: 12px; }
  #tm-path, body.note-page:has(#sidebar[hidden]) #tm-path { margin-left: 18px; }
  #tm-count { margin-right: 18px; }
  #editor, #tm-cursor { font-size: 13px; }

  /* barra: visualizar + "⋯"; o resto num menu */
  #status-bar .links { padding: 4px 6px 8px 10px; flex-wrap: nowrap; }
  #more-toggle {
    display: block; margin-left: 4px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 4px;
    background: none; color: var(--fg); font: inherit; cursor: pointer;
  }
  #more-toggle::before { content: none; }
  #status-bar.menu-open #more-toggle { border-color: var(--green); color: var(--green); }
  #more-links {
    display: none; position: absolute; left: 8px; bottom: calc(100% + 4px); z-index: 10;
    flex-direction: column; min-width: 14rem; padding: 14px 0 8px;
    background: var(--bg); border: 1px solid var(--green); border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  }
  #more-links::before {
    content: "[menu]"; position: absolute; top: -8px; left: 10px; padding: 0 3px;
    background: var(--bg); color: var(--green); font-weight: 700; line-height: 14px;
  }
  #status-bar.menu-open #more-links { display: flex; }
  #logout-form { display: block; }
  #more-links a, #more-links button { display: block; width: 100%; padding: 8px 14px; text-align: left; }
  #more-links a::before, #more-links button::before { content: "› "; color: var(--dim); }
  #status { padding: 4px 10px 8px; font-size: 12px; }
  #status::after { content: none; }

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

/* ---- Login: "Last login …" + prompt de senha ---------------------------------- */
body.login-page { display: grid; grid-template-rows: 34px minmax(0, 1fr); grid-template-areas: "title" "main"; }
.login-page #tm-motd, .login-page .card { grid-column: 1; grid-row: 2; }
.login-page #tm-motd { padding: 14px 18px; color: var(--fg); white-space: pre-wrap; }
.login-page .card {
  align-self: start; margin: 64px 18px 0; padding: 0; width: auto;
  background: none; box-shadow: none; border-radius: 0; color: var(--fg);
}
.login-page h1 { margin: 0 0 6px; font: inherit; color: var(--fg); }
.login-page h1::before { content: "padd ~ % "; color: var(--green); }
.login-page h1::after { content: " — autenticação necessária"; color: var(--dim); }
.login-page .card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1ch; }
.login-page h1, .login-page .error, .login-page button { grid-column: 1 / -1; }
.login-page h1 { grid-row: 1; }
.login-page .error { grid-row: 2; }
.login-page button { grid-row: 4; }
.login-page .card::before { content: "Password:"; grid-column: 1; grid-row: 3; }
.login-page input[type="password"] {
  grid-column: 2; grid-row: 3; width: 100%; margin: 0; padding: 0;
  border: none; outline: none; background: none; color: var(--fg); caret-color: var(--cursor);
  font: inherit;
}
.login-page input[type="password"]::placeholder { color: var(--dim); }
.login-page button {
  justify-self: start; margin-top: 14px; padding: 2px 10px; width: auto;
  border: 1px solid var(--green); border-radius: 4px; background: none;
  color: var(--green); font: inherit; cursor: pointer;
}
.login-page button:hover { background: var(--green); color: var(--bg); }
.login-page button::after { content: " ⏎"; }
.login-page .error { margin: 0 0 6px; color: var(--red); }
.login-page .error::before { content: "zsh: "; }

/* ---- Lista de notas: "ls -lt" num painel ------------------------------------------ */
body.list-page { display: grid; grid-template-rows: 34px auto minmax(0, 1fr); grid-template-areas: "title" "prompt" "main"; }
#tm-prompt { grid-area: prompt; padding: 12px 18px 0; color: var(--fg); }
/* o cabeçalho clássico vira só o link "+ nova nota", à direita do prompt */
.list-page > header:not(#tm-titlebar) { grid-area: prompt; justify-self: end; padding: 12px 18px 0; }
.list-page > header h1 { display: none; }
.list-page a.new { color: var(--cyan); text-decoration: none; }
.list-page a.new:hover { text-decoration: underline; }
#tm-listlabel {
  grid-area: main; align-self: start; justify-self: start; position: relative; z-index: 2;
  margin: 11px 0 0 24px; padding: 0 3px; background: var(--bg);
  color: var(--fg); font-weight: 700; line-height: 14px;
}
.list-page #list {
  grid-area: main; position: relative; list-style: none; min-height: 0; overflow-y: auto;
  margin: 18px 12px 12px; padding: 10px 0;
  scrollbar-width: thin; scrollbar-color: #4b5263 transparent;
}
.list-page #list li a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2ch;
  padding: 2px 14px; color: var(--fg); text-decoration: none;
}
.list-page #list .path { color: var(--blue); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-page #list .meta { color: var(--dim); white-space: nowrap; }
.list-page #list li a:hover, .list-page #list li a:focus-visible { background: var(--sel); outline: none; }
.list-page #list li a:hover .path, .list-page #list li a:hover .meta { color: #fff; }
.list-page #empty { grid-area: main; align-self: start; margin: 40px 26px; color: var(--dim); }
.list-page #empty a { color: var(--cyan); }
@media (max-width: 640px) {
  body.login-page { grid-template-rows: 30px minmax(0, 1fr); }
  body.list-page { grid-template-rows: 30px auto minmax(0, 1fr); }
  .login-page .card { margin: 64px 12px 0; }
  .login-page #tm-motd { padding: 12px; }
  #tm-prompt { padding: 10px 12px 0; }
  .list-page > header:not(#tm-titlebar) { padding: 10px 12px 0; }
  #tm-listlabel { margin: 7px 0 0 18px; }
  .list-page #list { margin: 14px 8px 8px; }
  .list-page #list li a { grid-template-columns: minmax(0, 1fr); padding: 4px 12px; }
}

/* =============================================================================
   Variação "mc": GNU Midnight Commander. Mesma estrutura do Terminal
   (painéis, cursor em bloco), com a cara do mc: fundo azul, bordas
   duplas, barra de menu ciano em cima, linha de dica e a barra de teclas
   F1–F10 embaixo. Tudo aqui vale só com html[data-theme="mc"].
   ============================================================================= */
html[data-theme="mc"] {
  --desk: #0c0c0c;
  --bg: #0037da;       /* azul do painel */
  --bar: #3a96dd;      /* ciano da barra de menu, das teclas e da seleção */
  --fg: #f2f2f2;
  --dim: #cccccc;
  --border: #cccccc;
  --green: #16c60c;
  --yellow: #f9f1a5;
  --cyan: #61d6d6;
  --sel: #3a96dd;
  --cursor: #cccccc;
  --ink: #0c0c0c;      /* texto preto sobre o ciano */
}
html[data-theme="mc"] ::selection { background: var(--sel); color: var(--ink); }
html[data-theme="mc"] body.note-page,
html[data-theme="mc"] body.login-page,
html[data-theme="mc"] body.list-page { border-radius: 0; }

/* barra de menu (no lugar da barra de título do Mac) */
html[data-theme="mc"] #tm-titlebar {
  height: 26px; justify-content: flex-start; background: var(--bar); border: none;
  color: var(--ink); font: 400 14px/1 var(--mono); overflow: hidden;
}
html[data-theme="mc"] #tm-titlebar::before {
  content: "  Esquerda    Arquivo    Comando    Opções    Direita"; white-space: pre;
}
html[data-theme="mc"] .tm-lights, html[data-theme="mc"] #tm-title { display: none; }

/* painéis com borda dupla e cantos retos */
html[data-theme="mc"] #sidebar, html[data-theme="mc"] #editor, html[data-theme="mc"] #preview,
html[data-theme="mc"] .list-page #list {
  border: 3px double var(--border); border-radius: 0;
}
html[data-theme="mc"] #editor:focus { border-color: var(--border); }
html[data-theme="mc"] #editor::placeholder { color: var(--dim); }

html[data-theme="mc"] body.note-page {
  grid-template-rows: 26px minmax(0, 1fr) auto auto;
  grid-template-areas: "title title" "side main" "hint hint" "bar bar";
  column-gap: 0;
}
html[data-theme="mc"] body.note-page:has(#sidebar[hidden]) {
  grid-template-areas: "title title" "main main" "hint hint" "bar bar";
}
html[data-theme="mc"] #sidebar { margin: 12px 0 6px 8px; padding: 6px 0 8px; }
html[data-theme="mc"] #editor, html[data-theme="mc"] #preview { margin: 12px 8px 6px 4px; }
html[data-theme="mc"] body.note-page:has(#sidebar[hidden]) #editor,
html[data-theme="mc"] body.note-page:has(#sidebar[hidden]) #preview { margin-left: 8px; }

/* títulos nas bordas: caminho no meio da borda de cima; o painel ativo
   fica destacado em ciano, como o diretório do painel ativo no mc */
html[data-theme="mc"] #tm-path {
  justify-self: center; margin: 5px 0 0; padding: 0 1ch; font-weight: 400; color: var(--fg);
}
html[data-theme="mc"] #tm-path b { display: none; }
html[data-theme="mc"] body.note-page:has(#editor:focus) #tm-path { background: var(--bar); color: var(--ink); }
html[data-theme="mc"] #tm-count { margin: 0 22px 0 0; color: var(--fg); }
html[data-theme="mc"] #sidebar::before {
  content: " sub-notas "; top: -10px; left: 50%; transform: translateX(-50%); font-weight: 400; white-space: pre;
}
html[data-theme="mc"] #sidebar::after {
  content: "[^]"; position: absolute; top: -10px; right: 8px; padding: 0 2px;
  background: var(--bg); color: var(--fg); line-height: 14px;
}

/* cabeçalho "Nome" em amarelo, "/.. UP--DIR" e as linhas */
html[data-theme="mc"] #sidebar-title {
  position: static; order: -1; padding: 0 0 2px; text-align: center; font-size: 0;
}
html[data-theme="mc"] #sidebar-title::before { content: "Nome"; color: var(--yellow); font-size: 14px; background: none; padding: 0; }
html[data-theme="mc"] #sidebar-up {
  display: flex; justify-content: space-between; padding: 0 8px; color: var(--fg);
}
html[data-theme="mc"] #sidebar-up::before { content: "/.."; font-size: 14px; }
html[data-theme="mc"] #sidebar-up::after { content: "UP--DIR"; font-size: 14px; }
html[data-theme="mc"] #sidebar-list a { padding: 0 8px; color: var(--fg); }
html[data-theme="mc"] #sidebar-list a::before { content: none; }
html[data-theme="mc"] #sidebar-list a .slash { color: var(--fg); }
html[data-theme="mc"] #sidebar-up:hover,
html[data-theme="mc"] #sidebar-list a:hover,
html[data-theme="mc"] #sidebar-list a:focus-visible { background: var(--sel); color: var(--ink); }
html[data-theme="mc"] #sidebar-list a:hover .slash { color: var(--ink); }

/* linha de dica + prompt "$", em fundo preto */
html[data-theme="mc"] #status {
  grid-area: hint; justify-self: stretch; padding: 1px 8px 0; background: var(--desk); color: var(--dim);
  white-space: pre;
}
html[data-theme="mc"] #status::before { content: "Dica: "; color: var(--dim); }
html[data-theme="mc"] #status::after { content: "\A$ "; color: var(--fg); }
html[data-theme="mc"] #status[data-state="ok"] { color: var(--green); }

/* barra de teclas F1–F10: número branco no preto + nome preto no ciano */
html[data-theme="mc"] #status-bar .links {
  justify-self: stretch; flex-wrap: nowrap; gap: 0; padding: 0 0 1px; background: var(--desk);
  counter-reset: fk;
}
html[data-theme="mc"] .links a, html[data-theme="mc"] .links button {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  background: var(--bar); color: var(--ink); text-align: left;
}
html[data-theme="mc"] .links a::before, html[data-theme="mc"] .links button::before,
html[data-theme="mc"] #preview-toggle::before {
  counter-increment: fk; content: counter(fk);
  display: inline-block; min-width: 2ch; padding: 0 0 0 1ch; margin-right: 0;
  background: var(--desk); color: var(--fg); text-align: right;
}
html[data-theme="mc"] #logout-form button::before { content: "10"; }
html[data-theme="mc"] #theme-link, html[data-theme="mc"] #logout-form button { color: var(--ink); }
html[data-theme="mc"] .links a:hover, html[data-theme="mc"] .links button:hover { background: #61b5f0; color: var(--ink); text-decoration: none; }

/* preview */
html[data-theme="mc"] #preview h1 { color: var(--yellow); }
html[data-theme="mc"] #preview h2 { color: var(--cyan); }
html[data-theme="mc"] #preview h3, html[data-theme="mc"] #preview h4,
html[data-theme="mc"] #preview h5, html[data-theme="mc"] #preview h6 { color: var(--fg); }
html[data-theme="mc"] #preview h1::before, html[data-theme="mc"] #preview h2::before,
html[data-theme="mc"] #preview h3::before { color: var(--dim); }
html[data-theme="mc"] #preview a, html[data-theme="mc"] #preview code { color: var(--yellow); }
html[data-theme="mc"] #preview li::marker { color: var(--yellow); }
html[data-theme="mc"] #preview pre { background: rgba(0, 0, 0, .25); border: 3px double var(--border); border-radius: 0; }
html[data-theme="mc"] #preview th { color: var(--yellow); }
html[data-theme="mc"] #preview th, html[data-theme="mc"] #preview td,
html[data-theme="mc"] #preview blockquote { border-color: var(--dim); }
html[data-theme="mc"] #preview input[type="checkbox"] { accent-color: var(--bar); }

/* diálogos (histórico, tema, menu do celular): cinza com borda dupla preta */
html[data-theme="mc"] .panel { background: rgba(0, 0, 0, .3); }
html[data-theme="mc"] .panel-inner {
  background: #cccccc; color: var(--ink); border: 3px double var(--ink); border-radius: 0;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .55);
}
html[data-theme="mc"] .panel-header { justify-content: center; position: relative; }
html[data-theme="mc"] .panel-header strong { margin-top: -10px; background: #cccccc; color: var(--ink); font-weight: 400; }
html[data-theme="mc"] .panel-header strong::before { content: " "; }
html[data-theme="mc"] .panel-header strong::after { content: " "; }
html[data-theme="mc"] .panel-header button { position: absolute; right: 10px; top: 0; margin-top: -10px; background: #cccccc; color: var(--ink); }
html[data-theme="mc"] .panel-list button { color: var(--ink); }
html[data-theme="mc"] .panel-list small { color: #3a3a3a; }
html[data-theme="mc"] .panel-list button:hover, html[data-theme="mc"] .panel-list button:focus-visible { background: var(--bar); color: var(--ink); }
html[data-theme="mc"] .panel-list button:hover small { color: var(--ink); }
html[data-theme="mc"] .panel-list button.current { color: var(--bg); font-weight: 700; }

@media (max-width: 640px) {
  html[data-theme="mc"] body.note-page,
  html[data-theme="mc"] body.note-page:has(#sidebar[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 26px auto minmax(0, 1fr) auto auto;
    grid-template-areas: "title" "side" "main" "hint" "bar";
  }
  html[data-theme="mc"] #tm-titlebar { height: 26px; font-size: 13px; }
  html[data-theme="mc"] #tm-titlebar::before { content: " Esquerda  Arquivo  Comando  Opções"; }
  html[data-theme="mc"] #sidebar { margin: 12px 6px 0; padding: 6px 4px 4px; }
  html[data-theme="mc"] #sidebar-title { display: none; }
  html[data-theme="mc"] #sidebar-up { gap: 1ch; }
  html[data-theme="mc"] #sidebar-up::after { content: none; }
  html[data-theme="mc"] #editor, html[data-theme="mc"] #preview,
  html[data-theme="mc"] body.note-page:has(#sidebar[hidden]) #editor,
  html[data-theme="mc"] body.note-page:has(#sidebar[hidden]) #preview { margin: 12px 6px 6px; }
  html[data-theme="mc"] #tm-count { margin-right: 16px; }
  html[data-theme="mc"] #status { padding: 1px 6px 0; font-size: 12px; }
  html[data-theme="mc"] #status::after { content: "\A$ "; }
  html[data-theme="mc"] #status-bar .links { padding: 0 0 1px; }
  html[data-theme="mc"] #more-toggle {
    flex: 0 0 auto; margin: 0; padding: 0 1ch 0 0; border: none; border-radius: 0;
    background: var(--bar); color: var(--ink);
  }
  html[data-theme="mc"] #more-toggle::before {
    counter-increment: fk; content: counter(fk); display: inline-block; min-width: 2ch; padding: 0 0 0 1ch;
    background: var(--desk); color: var(--fg); text-align: right; margin-right: 1ch;
  }
  html[data-theme="mc"] #status-bar.menu-open #more-toggle { background: #61b5f0; color: var(--ink); }
  html[data-theme="mc"] #more-links { background: #cccccc; border: 3px double var(--ink); border-radius: 0; left: 6px; }
  html[data-theme="mc"] #more-links::before { content: " menu "; top: -10px; left: 50%; transform: translateX(-50%); background: #cccccc; color: var(--ink); font-weight: 400; white-space: pre; }
  html[data-theme="mc"] #more-links a, html[data-theme="mc"] #more-links button { background: none; color: var(--ink); flex: none; }
  html[data-theme="mc"] #more-links a::before, html[data-theme="mc"] #more-links button::before {
    content: counter(fk); background: var(--desk); color: var(--fg); margin-right: 1ch;
  }
  html[data-theme="mc"] #more-links #logout-form button::before { content: "10"; }
  html[data-theme="mc"] #more-links a:hover, html[data-theme="mc"] #more-links button:hover { background: var(--bar); }
}

/* login e lista de notas */
html[data-theme="mc"] body.login-page { grid-template-rows: 26px minmax(0, 1fr); }
html[data-theme="mc"] body.list-page { grid-template-rows: 26px auto minmax(0, 1fr); }
html[data-theme="mc"] .login-page #tm-motd { color: var(--dim); }
html[data-theme="mc"] .login-page h1::before { content: "$ "; color: var(--fg); }
html[data-theme="mc"] .login-page h1::after { color: var(--dim); }
html[data-theme="mc"] .login-page button {
  border: none; border-radius: 0; padding: 0 1ch; background: var(--bar); color: var(--ink);
}
html[data-theme="mc"] .login-page button::before { content: "[ "; }
html[data-theme="mc"] .login-page button::after { content: " ]"; }
html[data-theme="mc"] .login-page button:hover { background: #61b5f0; color: var(--ink); }
html[data-theme="mc"] .login-page .error { color: var(--yellow); }
html[data-theme="mc"] #tm-prompt { font-size: 0; }
html[data-theme="mc"] #tm-prompt::before { content: "$ ls -lt"; font-size: 14px; }
html[data-theme="mc"] .list-page a.new { color: var(--yellow); }
html[data-theme="mc"] #tm-listlabel { justify-self: center; margin: 9px 0 0; font-size: 0; font-weight: 400; }
html[data-theme="mc"] #tm-listlabel::before { content: " todas as notas "; font-size: 14px; white-space: pre; }
html[data-theme="mc"] .list-page #list { padding-top: 8px; }
html[data-theme="mc"] .list-page #list::before {
  content: "Nome"; display: block; position: sticky; top: -8px; z-index: 1;
  padding: 0 0 2px; text-align: center; background: var(--bg); color: var(--yellow);
}
html[data-theme="mc"] .list-page #list .path { color: var(--fg); }
html[data-theme="mc"] .list-page #list .meta { color: var(--dim); }
html[data-theme="mc"] .list-page #list li a:hover { background: var(--sel); }
html[data-theme="mc"] .list-page #list li a:hover .path,
html[data-theme="mc"] .list-page #list li a:hover .meta { color: var(--ink); }
@media (max-width: 640px) {
  html[data-theme="mc"] body.login-page { grid-template-rows: 26px minmax(0, 1fr); }
  html[data-theme="mc"] body.list-page { grid-template-rows: 26px auto minmax(0, 1fr); }
  html[data-theme="mc"] #tm-listlabel { margin-top: 5px; }
}