/* LocalTeX workspace: top bar, three panes, log, footer.
   Mobile-first: below 768px the workspace is an app with a segmented
   [ files | editor | preview ] tab bar showing one pane at a time;
   from 768px up all three panes sit side by side. */

html, body { height: 100%; }
body { font-size: var(--text-small); }

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* keyboard/browser chrome aware where supported */
}

/* ---------- Top bar ---------- */
.bar {
  display: flex;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.6rem 1rem;
  padding-top: calc(0.6rem + env(safe-area-inset-top));
  border-bottom: 1px solid var(--color-control-border);
  flex-wrap: wrap;
}

.bar .back {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-min);
}
.bar .back:hover, .bar .back:focus-visible { color: var(--color-accent); }

.logo {
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: var(--text-body);
}
.ver { color: var(--color-warning); font-size: var(--text-min); }

.bar-status {
  color: var(--color-text-muted);
  font-size: var(--text-min);
  flex: 1;
  min-width: 120px;
}

.bar-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  position: relative;
}

/* Secondary actions live in a [ more ] menu on phones and inline on
   desktop (display: contents + flex order restores the original row). */
#btn-new { order: 1; }
#btn-open { order: 2; }
#btn-import { order: 3; }
#btn-save { order: 4; }
#btn-compile { order: 5; }
#btn-pdf { order: 6; }
#btn-clear { order: 7; }
#theme-toggle { order: 8; }
#btn-more { display: none; order: 9; }
.more-menu { display: contents; }

@media (max-width: 767px) {
  #btn-more { display: inline-block; }
  .more-menu { display: none; }
  .more-menu.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 50;
    background: var(--color-surface);
    border: 1px solid var(--color-control-border);
    padding: 0.6rem;
    min-width: 12rem;
  }
  .more-menu .ctrl-btn { text-align: left; }
}

/* ---------- Phone pane tabs ---------- */
.pane-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--color-border);
}
.pane-tab {
  background: none;
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  min-height: var(--touch-target);
  cursor: pointer;
}
.pane-tab:last-child { border-right: none; }
.pane-tab[aria-pressed="true"] {
  color: var(--color-accent);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

/* ---------- Workspace ---------- */
.workspace {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
  min-height: 0;
}

.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* One pane at a time on phones, driven by data-pane on .workspace */
@media (max-width: 767px) {
  .workspace:not([data-pane="files"]) .pane-files { display: none; }
  .workspace:not([data-pane="editor"]) .pane-editor { display: none; }
  .workspace:not([data-pane="preview"]) .pane-preview { display: none; }
}

@media (min-width: 768px) {
  .pane-tabs { display: none; }
  .workspace { grid-template-columns: 220px 1fr 1fr; }
  .pane { border-right: 1px solid var(--color-border); }
  .pane:last-child { border-right: none; }
}

.pane-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-warning);
  font-size: var(--text-min);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}
.pane-title .title-text {
  overflow-wrap: anywhere;
  min-width: 0;
}
.pane-title .sub {
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.pane-title .spacer { flex: 1; }
.zoom-btn {
  background: none;
  border: 1px solid var(--color-control-border);
  color: var(--color-text-soft);
  font-family: var(--font-mono);
  font-size: var(--text-min);
  padding: 0.1rem 0.45rem;
  cursor: pointer;
  flex-shrink: 0;
}
.zoom-btn:hover, .zoom-btn:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }

/* ---------- Files pane ---------- */
#file-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  padding: 0.4rem 0;
}
#file-list li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.5rem;
}
.file-open {
  background: none;
  border: none;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  padding: 0.35rem 0.4rem;
  cursor: pointer;
  flex: 1;
  text-align: left;
  overflow-wrap: anywhere;
  min-width: 0;
}
.file-open:hover, .file-open:focus-visible { color: var(--color-accent); }
.file-open:focus-visible { outline: 1px solid var(--color-accent-strong); }
li.active .file-open { color: var(--color-accent); }
li.is-root .file-open::after {
  content: '  ◀ root';
  color: var(--color-warning);
  font-size: var(--text-min);
}
.file-dirty {
  color: var(--color-warning);
  font-size: var(--text-small);
  width: 10px;
  flex-shrink: 0;
}

.set-root {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-min);
  cursor: pointer;
  padding: 0.2rem;
  flex-shrink: 0;
}
.set-root:hover, .set-root:focus-visible { color: var(--color-warning); }

.files-hint {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  padding: 0.8rem 0.9rem;
  border-top: 1px solid var(--color-border);
  line-height: var(--leading-normal);
}

/* ---------- Editor pane ---------- */
#editor {
  flex: 1;
  background: var(--color-surface);
  color: var(--color-text);
  border: none;
  resize: none;
  font-family: var(--font-mono);
  font-size: var(--text-body); /* 16px also prevents mobile zoom-on-focus */
  line-height: var(--leading-normal);
  padding: 0.9rem;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
#editor:focus { outline: none; box-shadow: inset 0 0 0 1px var(--color-control-border); }
#editor:disabled { opacity: 0.5; }

/* ---------- Preview pane ---------- */
#preview {
  flex: 1;
  border: none;
  width: 100%;
  background: #ffffff;
  min-height: 0;
}
#preview.empty { background: var(--color-surface); }

#log {
  height: 110px;
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
  padding: 0.5rem 0.9rem;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-soft);
  white-space: pre-wrap;
  word-break: break-word;
}
#log .err { color: var(--color-danger); }
#log .ok { color: var(--color-accent); }
#log .info { color: var(--color-text-muted); }

/* ---------- Footer ---------- */
.app-footer {
  border-top: 1px solid var(--color-control-border);
  padding: 0.45rem 1rem;
  padding-bottom: calc(0.45rem + env(safe-area-inset-bottom));
  font-size: var(--text-min);
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  flex-wrap: wrap;
}
.app-footer .privacy { color: var(--color-text-soft); }
.app-footer .privacy strong { color: var(--color-accent); font-weight: 500; }