/* レトロなファイルマネージャ風スタイル */

:root {
  --bg:           #D6D6D0;
  --bg-chrome:    #C8C9C2;
  --bg-light:     #EEEEEA;
  --base:         #FFFFFF;
  --border:       #888A85;
  --border-dark:  #5F615C;
  --border-light: #FFFFFF;
  --text:         #2E3436;
  --text-dim:     #555753;
  --hover:        #DDE5F0;

  /* selected row */
  --sel-1:        #6889B9;
  --sel-2:        #3D67A4;
  --sel-fg:       #FFFFFF;

  /* active title bar — deep blue gradient with a sharp inner highlight */
  --title-1:      #6E91C4;
  --title-2:      #2C5290;
  --title-edge:   #1F3F73;
  --title-fg:     #FFFFFF;

  --accent:       #2A5490;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "Bitstream Vera Sans", "DejaVu Sans", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-chrome);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Title bar — blue gradient with a thin lighter top edge */
.titlebar {
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0.35) 0,
      rgba(255,255,255,0)    2px),
    linear-gradient(to bottom, var(--title-1) 0%, var(--title-2) 100%);
  border-bottom: 1px solid var(--title-edge);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18);
  padding: 4px 8px;
  font-weight: bold;
  color: var(--title-fg);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

/* Back button — visible only on mobile content view */
.back-btn {
  display: none;
  text-decoration: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.42), rgba(255,255,255,0.12));
  border: 1px solid rgba(0,0,0,0.35);
  border-top-color: rgba(255,255,255,0.55);
  border-left-color: rgba(255,255,255,0.4);
  color: var(--title-fg);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  cursor: pointer;
  user-select: none;
}
.back-btn:active {
  background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.04));
  border-top-color: rgba(0,0,0,0.4);
  border-left-color: rgba(0,0,0,0.3);
}

.titlebar-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 4 L1 13 L15 13 L15 5 L7 5 L6 4 Z' fill='%23B5CCE4' stroke='%23274D7E' stroke-width='0.9' stroke-linejoin='round'/><path d='M1.5 5 L6.5 5 L7.2 5.9 L14.5 5.9' fill='none' stroke='%23D5E2F0' stroke-width='0.6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Path bar */
.pathbar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--border);
}

.pathbar-label {
  font-size: 11px;
  color: var(--text);
}

.pathbar {
  flex: 1;
  background: var(--base);
  border: 1px solid var(--border);
  border-top-color: var(--border-dark);
  border-left-color: var(--border-dark);
  padding: 3px 6px;
  font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", "Consolas", monospace;
  font-size: 11px;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.08);
  min-height: 16px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Main split */
.main {
  flex: 1;
  display: flex;
  min-height: 0;
  margin: 0 8px;
  border: 1px solid var(--border);
  border-top-color: var(--border-dark);
  border-left-color: var(--border-dark);
  background: var(--base);
}

.sidebar {
  width: 260px;
  border-right: 1px solid var(--border);
  background: var(--bg-light);
  overflow: auto;
  padding: 4px 0;
  flex-shrink: 0;
}

.content-wrap {
  flex: 1;
  overflow: auto;
  background: var(--base);
}

.content {
  padding: 18px 26px;
  max-width: 720px;
  line-height: 1.6;
}

.content .hint {
  color: #888;
  font-style: italic;
}

/* Tree */
.tree, .tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
  user-select: none;
}

.tree ul {
  padding-left: 14px;
}

.tree .row {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px 1px 4px;
  cursor: default;
  white-space: nowrap;
  line-height: 18px;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
}

.tree a.row,
.tree summary.row { cursor: pointer; }

/* Native details marker は使わず、.arrow を CSS で駆動する */
.tree summary.row { list-style: none; }
.tree summary.row::-webkit-details-marker { display: none; }

.tree .row:hover {
  background: var(--hover);
}

.tree .row.selected {
  background: linear-gradient(to bottom, var(--sel-1), var(--sel-2));
  color: var(--sel-fg);
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.tree .arrow {
  width: 10px;
  font-size: 9px;
  color: #5d5d5d;
  text-align: center;
  flex-shrink: 0;
}

/* フォルダ行の矢印は [open] 状態で切り替える */
.tree details > summary .arrow::before { content: "▸"; }
.tree details[open] > summary .arrow::before { content: "▾"; }

.tree .row.selected .arrow {
  color: rgba(255,255,255,0.95);
}

.tree .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* Folder — blue manila */
.tree .icon.folder {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 4 L1 13 L15 13 L15 5 L7 5 L6 4 Z' fill='%23B5CCE4' stroke='%23274D7E' stroke-width='0.9' stroke-linejoin='round'/><path d='M1.5 5.5 L6.5 5.5 L7.2 6.4 L14.5 6.4' fill='none' stroke='%23D5E2F0' stroke-width='0.55'/><path d='M2 11.5 L14 11.5' stroke='%237494BC' stroke-width='0.4' opacity='0.6'/></svg>");
}

.tree .icon.folder.open,
.tree details[open] > summary .icon.folder {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 4 L1 13 L13 13 L15 7 L4 7 L3 5 L6 5 L7 4 Z' fill='%23B5CCE4' stroke='%23274D7E' stroke-width='0.9' stroke-linejoin='round'/><path d='M3 7.5 L4 7.5 L4 13' fill='none' stroke='%237494BC' stroke-width='0.5'/><path d='M2 8.5 L3 8.5' stroke='%23D5E2F0' stroke-width='0.5'/></svg>");
}

/* Generic file — flat sheet with tiny corner fold */
.tree .icon.file {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 1.5 L10.5 1.5 L13 4 L13 14.5 L3 14.5 Z' fill='%23FFFFFF' stroke='%23555' stroke-width='0.8' stroke-linejoin='round'/><path d='M10.5 1.5 L10.5 4 L13 4' fill='%23DDDDDD' stroke='%23555' stroke-width='0.6'/><path d='M5 6.5 L11 6.5 M5 8.5 L11 8.5 M5 10.5 L11 10.5 M5 12 L9 12' stroke='%23888' stroke-width='0.55' fill='none'/></svg>");
}

.tree .icon.file.md {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 1.5 L10.5 1.5 L13 4 L13 14.5 L3 14.5 Z' fill='%23FFFFFF' stroke='%23555' stroke-width='0.8' stroke-linejoin='round'/><path d='M10.5 1.5 L10.5 4 L13 4' fill='%23DDDDDD' stroke='%23555' stroke-width='0.6'/><text x='4' y='12' font-family='Verdana, sans-serif' font-size='4.2' font-weight='bold' fill='%232A5490'>MD</text></svg>");
}

.tree .icon.file.txt {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 1.5 L10.5 1.5 L13 4 L13 14.5 L3 14.5 Z' fill='%23FFFFFF' stroke='%23555' stroke-width='0.8' stroke-linejoin='round'/><path d='M10.5 1.5 L10.5 4 L13 4' fill='%23DDDDDD' stroke='%23555' stroke-width='0.6'/><text x='4' y='12' font-family='Verdana, sans-serif' font-size='4.2' font-weight='bold' fill='%23606060'>TXT</text></svg>");
}

/* Status bar */
.statusbar {
  border-top: 1px solid var(--border-light);
  background: var(--bg-chrome);
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-dim);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.06);
  margin-top: 4px;
}

/* Markdown content typography */
.content h1, .content h2, .content h3, .content h4 {
  font-family: "Bitstream Vera Sans", "DejaVu Sans", Verdana, sans-serif;
  color: #1a1a1a;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  line-height: 1.25;
}
.content h1 { font-size: 1.7em; border-bottom: 1px solid #B8BAB5; padding-bottom: 4px; }
.content h2 { font-size: 1.35em; border-bottom: 1px dotted #B8BAB5; padding-bottom: 2px; }
.content h3 { font-size: 1.15em; }
.content p { margin: 0.6em 0; }
.content a { color: var(--accent); text-decoration: underline; }
.content a:visited { color: #6E3F83; }
.content code {
  background: #EEEEEA;
  border: 1px solid #C8C9C2;
  padding: 0 3px;
  font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Consolas, monospace;
  font-size: 0.92em;
}
.content pre {
  background: #EEEEEA;
  border: 1px solid #C8C9C2;
  padding: 8px 10px;
  overflow-x: auto;
  font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Consolas, monospace;
  font-size: 0.92em;
  line-height: 1.45;
}
.content pre code {
  border: 0;
  padding: 0;
  background: transparent;
}
.content blockquote {
  margin: 0.6em 0;
  padding: 0.2em 12px;
  border-left: 3px solid #6889B9;
  background: #EEF2F8;
  color: #555;
}
.content ul, .content ol { padding-left: 1.6em; }
.content hr { border: 0; border-top: 1px solid #B8BAB5; margin: 1.5em 0; }
.content table {
  border-collapse: collapse;
  margin: 0.6em 0;
}
.content th, .content td {
  border: 1px solid #B8BAB5;
  padding: 4px 8px;
}
.content th { background: #DCDDD8; }

/* Plain text view */
.content .plaintext {
  background: var(--base);
  border: 1px solid #C8C9C2;
  padding: 10px 12px;
  font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Scrollbars — cool grey with blue tint */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background: #C8C9C2;
  border-left: 1px solid var(--border);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #DDE0DC, #A8ACA6);
  border: 1px solid var(--border);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, #B5C8DD, #6889B9);
}

/* ── Mobile (< 640px) ──
   Switch to a master/detail pattern: tree fills the screen by default,
   and tapping a file slides over to a full-width content view. */
@media (max-width: 640px) {
  body { font-size: 13px; }

  .titlebar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  .pathbar-wrap { padding: 4px 6px; }
  .pathbar-label { display: none; }
  .pathbar { font-size: 11px; }

  .main {
    margin: 0;
    border-left: 0;
    border-right: 0;
  }

  .sidebar {
    width: 100%;
    border-right: 0;
    padding: 6px 0;
  }
  .content-wrap { width: 100%; }

  /* tap-friendly tree rows */
  .tree li > .row {
    line-height: 30px;
    padding: 2px 10px 2px 6px;
    gap: 6px;
  }
  .tree ul { padding-left: 18px; }
  .tree .arrow { width: 14px; font-size: 11px; }
  .tree .icon {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }

  .content {
    padding: 14px 16px;
    max-width: none;
  }

  /* Show only one pane at a time. Default = tree visible. */
  .content-wrap { display: none; }
  body.show-content .sidebar { display: none; }
  body.show-content .content-wrap { display: block; }
  body.show-content .back-btn { display: inline-block; }

  /* Slimmer scrollbars on mobile */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
}