:root {
  /* Fixed dark theme: unlike `light dark`, this forces every UA-driven color (the
     `Canvas`/`CanvasText` system keywords used below, native form controls, scrollbars,
     and the browser's own default text/link colors) to their dark variant regardless of
     the OS-level light/dark preference. */
  color-scheme: dark;
  /* Shared by every tree-node-directory rendering: the sidebar file tree, and the
     uncommitted-changes status tree (dashboard page section + sidebar tab). Defined here
     rather than scoped to .markserv-sidebar so it also resolves inside .markserv-content
     (the dashboard page's own status tree isn't nested under .markserv-sidebar). */
  --tree-indent: 1rem;
  --tree-line-color: rgba(128, 128, 128, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

/* Project List Route, Auth Callback's error page, and Logout Route's logged-out
   page (minimal-shell.ts) — unlike the file-viewer layout below, none of these
   have a sidebar/content split that needs its own internal scroll region, so
   the page should scroll as a single ordinary document. body's own height:100%
   above keeps it exactly viewport-sized, so this overflow still confines
   scrolling to the viewport (never taller than one screen) while making body
   itself — not the narrower centered column inside it — the element whose
   scrollbar renders, so it sits at the actual window edge instead of appearing
   inset toward the middle of the page. */
.markserv-minimal-body {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Error pages rendered via minimal-shell.ts (create-app.ts's renderErrorPage):
   a project-list/logout pair so an error is never a dead end, even when the
   session itself is what caused it. */
.markserv-error-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

/* Shown (via markserv-loading-overlay-visible, toggled by client.js) right before a
   navigation/reload known to be slow — currently only the dashboard, since fetching
   the remote there can take seconds. Present on every page (see page-template.ts) so
   it's already in the DOM and ready the instant a click needs it, with nothing left to
   wait on. */
.markserv-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

.markserv-loading-overlay-visible {
  display: flex;
}

.markserv-loading-spinner {
  display: flex;
  animation: markserv-spin 1s linear infinite;
}

.markserv-loading-spinner svg {
  width: 2.5rem;
  height: 2.5rem;
}

@keyframes markserv-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.markserv-loading-text {
  font-size: 0.95rem;
}

.markserv-layout {
  display: flex;
  /* 100vh is the viewport size with mobile browser chrome (the address bar) collapsed —
     while it's showing, this box is taller than what's actually visible, and the bottom
     of the scrollable content only becomes reachable once scrolling collapses the chrome.
     100dvh tracks whatever is actually visible right now; vh above is the fallback for
     browsers that don't support dvh. */
  height: 100vh;
  height: 100dvh;
}

.markserv-tree-toggle,
.markserv-toc-toggle {
  position: fixed;
  top: 0.5rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border-radius: 6px;
  /* Opaque, not transparent: this button sits fixed above scrolling content, and a
     transparent background lets whatever text scrolls underneath show through it. */
  background: Canvas;
  border: none;
  cursor: pointer;
}

.markserv-tree-toggle {
  display: none;
  left: 0.5rem;
}

/* 1.5rem, not 0.5rem: on wide screens this button floats over .markserv-content, whose
   own vertical scrollbar (when content overflows) renders at the true window edge —
   0.5rem left too little clearance and the two visibly overlapped. */
.markserv-toc-toggle {
  right: 1.5rem;
}

.markserv-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(128, 128, 128, 0.3);
  /* The sidebar itself no longer scrolls: the project nav / search / file-uncommitted
     tabs are fixed-height flex children, and only .markserv-sidebar-panel-active
     (the tree or uncommitted list) grows and scrolls beneath them. */
  overflow: hidden;
  padding-top: 1rem;
}

.markserv-project-nav,
.markserv-sidebar-tabs {
  flex-shrink: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

.markserv-sidebar ul,
.markserv-status-tree ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Directory labels toggle expand/collapse; file labels are a real <a> (see
   tree-builder.ts) so iOS Safari registers a single tap as a click — reset its default
   link color/underline so a file name doesn't look different from a directory name. */
.tree-node-directory > .tree-node-label,
.tree-node-file > .tree-node-label {
  cursor: pointer;
}

.tree-node-file > .tree-node-label,
.tree-node-file > .tree-node-label:visited {
  color: inherit;
  text-decoration: none;
}

/* Same flex-row layout as .markserv-dashboard-status-entry (the uncommitted-changes tree),
   so a file's git-status badge (markserv-dashboard-status-kind) stays pinned to the row's
   right edge instead of wrapping down onto its own line once the label wraps or the sidebar
   narrows. Files without a badge are unaffected: a single flex child just sits at the start. */
.tree-node-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

/* flex: 1 1 auto + min-width: 0 let the label shrink below its content width inside the flex
   row above, so a long name wraps within its own box instead of overflowing past the badge. */
.tree-node-file > .tree-node-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* inline-flex (not the default inline), so the icon (::before) and the name text lay out
   as two side-by-side boxes instead of one continuous inline run — otherwise a wrapped
   second line of a long name starts back at the left edge, sliding underneath the icon
   instead of staying indented past it. align-items: flex-start keeps the icon pinned to
   the first line when the name wraps to several. inline- (not plain flex, which is
   block-level) preserves the original shrink-to-fit width instead of stretching the
   label to fill its <li>. */
.tree-node-label {
  display: inline-flex;
  align-items: flex-start;
  overflow-wrap: anywhere;
}

/* Icons: folder (open/closed), markdown file, and other file are visually distinct. */
.tree-node-label::before {
  flex-shrink: 0;
  width: 1.2em;
  margin-right: 0.3em;
  text-align: center;
}

.tree-node-directory > .tree-node-label::before {
  content: "\1F4C2";
}

.tree-node-directory.tree-node-collapsed > .tree-node-label::before {
  content: "\1F4C1";
}

.tree-node-file-markdown > .tree-node-label::before {
  content: "\1F4DD";
}

.tree-node-file-other > .tree-node-label::before {
  content: "\1F4C4";
}

/* Guide lines: a vertical rule down each nested list, plus a short tick
   connecting it to every child node, so folder/file nesting reads at a glance. */
.tree-node-directory > ul {
  padding-left: var(--tree-indent);
  border-left: 1px solid var(--tree-line-color);
}

.tree-node-directory > ul > li.tree-node {
  position: relative;
}

.tree-node-directory > ul > li.tree-node::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: calc(-1 * var(--tree-indent));
  width: var(--tree-indent);
  height: 1px;
  background: var(--tree-line-color);
}

.tree-node-current > .tree-node-label {
  font-weight: bold;
}

.tree-node-collapsed > ul {
  display: none;
}

.markserv-content {
  flex: 1;
  min-width: 0;
  /* No top padding: the sticky file header sits flush at the very top of this
     scrolling box instead, so its own background fully covers the scrolled-past
     content instead of leaving a gap the content shows through underneath. */
  padding: 0 2rem 2rem;
  /* Never scrolls horizontally: an unbroken long token (a URL, a long path) must wrap
     at the edge instead, same as everything else under this element. */
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
}

.markserv-toc {
  --toc-indent: 0.9rem;
  --toc-line-color: rgba(128, 128, 128, 0.35);
  display: none;
  position: fixed;
  top: 3rem;
  /* Matches .markserv-toc-toggle's own right offset so the opened panel lines up
     directly under the button that opens it. */
  right: 1.5rem;
  width: 360px;
  max-height: calc(100vh - 4rem);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  /* Without these, touch scrolling inside a `position: fixed` panel is unreliable on mobile
     browsers (notably iOS Safari): the gesture can get swallowed by the non-scrollable body
     instead of scrolling this panel. */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: 1rem;
  background: Canvas;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 15;
  font-size: 0.85rem;
}

.markserv-toc.markserv-toc-open {
  display: block;
}

.markserv-toc-title {
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: rgba(128, 128, 128, 0.9);
}

.markserv-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.markserv-toc-item {
  position: relative;
  margin: 0.3em 0;
}

.markserv-toc-item > a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.markserv-toc-item > a:hover {
  text-decoration: underline;
}

/* Guide lines: same vertical rule + tick technique as the explorer tree, so nested
   headings read the same way nested folders/files do. */
.markserv-toc-item > ul {
  margin-top: 0.3em;
  padding-left: var(--toc-indent);
  border-left: 1px solid var(--toc-line-color);
}

.markserv-toc-item > ul > li.markserv-toc-item::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: calc(-1 * var(--toc-indent));
  width: var(--toc-indent);
  height: 1px;
  background: var(--toc-line-color);
}

/* Body typography (paragraphs, lists, headings, tables, code, highlight colors) for markserv's
   own pages: dashboard, grep, diff, previews. A rendered Markdown document's body
   (.mde-body) takes all of this from the Markdown engine's stylesheet (engine.css) instead,
   hence the :not(.mde-body *) on each selector below. */
.markserv-content p:not(.mde-body *),
.markserv-content ul:not(.mde-body *),
.markserv-content ol:not(.mde-body *),
.markserv-content blockquote:not(.mde-body *) {
  margin: 0.6em 0;
}

.markserv-content li:not(.mde-body *) {
  margin: 0.2em 0;
}

.markserv-content li > p:not(.mde-body *) {
  margin: 0.2em 0;
}

/* Code blocks would normally scroll horizontally for a long line, but wrap instead
   (never scroll) to match everything else in the file view. Mermaid's own <pre> is
   excluded: mermaid.js replaces it with an SVG diagram, so this never applies to it. */
.markserv-content pre:not(.mermaid):not(.mde-body *) {
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.markserv-content table:not(.mde-body *) {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.markserv-content th:not(.mde-body *),
.markserv-content td:not(.mde-body *) {
  overflow-wrap: anywhere;
}

.markserv-content img:not(.mde-body *) {
  max-width: 100%;
}

.markserv-content h1:not(.mde-body *),
.markserv-content h2:not(.mde-body *),
.markserv-content h3:not(.mde-body *),
.markserv-content h4:not(.mde-body *),
.markserv-content h5:not(.mde-body *),
.markserv-content h6:not(.mde-body *) {
  font-weight: 700;
  line-height: 1.3;
  border-radius: 0 6px 6px 0;
  /* Keeps an anchor-jumped heading (#id links) from landing underneath the sticky file header. */
  scroll-margin-top: 4rem;
}

/* h1/h2: the accent-tinted band (same blue accent, fading with level) reads as the
   strongest signal when scanning a long document; h3 downgrades to a neutral band so
   the accent stays reserved for the two top levels. */
.markserv-content h1:not(.mde-body *) {
  font-size: 2rem;
  margin: 1.75rem 0 0.9rem;
  padding: 0.55rem 1rem;
  background: rgba(88, 166, 255, 0.16);
  border-left: 4px solid #58a6ff;
}

.markserv-content h2:not(.mde-body *) {
  font-size: 1.5rem;
  margin: 1.5rem 0 0.75rem;
  padding: 0.45rem 0.9rem;
  background: rgba(88, 166, 255, 0.1);
  border-left: 4px solid #58a6ff;
}

.markserv-content h3:not(.mde-body *) {
  font-size: 1.25rem;
  margin: 1.25rem 0 0.6rem;
  padding: 0.35rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid rgba(255, 255, 255, 0.35);
}

.markserv-content h4:not(.mde-body *) {
  font-size: 1.1rem;
  margin: 1.1rem 0 0.5rem;
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(230, 237, 243, 0.9);
}

.markserv-content h5:not(.mde-body *),
.markserv-content h6:not(.mde-body *) {
  font-size: 0.95rem;
  margin: 1rem 0 0.4rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(230, 237, 243, 0.75);
}

/* Keeps an anchor-jumped heading in a Markdown body (#id links) from landing underneath the
   sticky file header; the rest of the heading look comes from the engine's stylesheet. */
.mde-body :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: 4rem;
}

.markserv-file-header + h1,
.markserv-file-header + h2,
.markserv-file-header + h3,
.markserv-file-header + h4,
.markserv-file-header + h5,
.markserv-file-header + h6 {
  margin-top: 0;
}

/* Syntax highlighting (highlight.js), covering both markdown code fences and raw
   source-file previews — both render `<pre class="hljs">` (see markdown-renderer.ts
   and content-route.ts). Colors only, adapted from highlight.js's github-dark theme:
   layout (wrap/scroll) already comes from `.markserv-content pre:not(.mermaid)` above,
   and background from each pre's own container class, so neither is set here. */
.markserv-content .hljs-doctag:not(.mde-body *),
.markserv-content .hljs-keyword:not(.mde-body *),
.markserv-content .hljs-meta .hljs-keyword:not(.mde-body *),
.markserv-content .hljs-template-tag:not(.mde-body *),
.markserv-content .hljs-template-variable:not(.mde-body *),
.markserv-content .hljs-type:not(.mde-body *),
.markserv-content .hljs-variable.language_:not(.mde-body *) {
  color: #ff7b72;
}

.markserv-content .hljs-title:not(.mde-body *),
.markserv-content .hljs-title.class_:not(.mde-body *),
.markserv-content .hljs-title.class_.inherited__:not(.mde-body *),
.markserv-content .hljs-title.function_:not(.mde-body *) {
  color: #d2a8ff;
}

.markserv-content .hljs-attr:not(.mde-body *),
.markserv-content .hljs-attribute:not(.mde-body *),
.markserv-content .hljs-literal:not(.mde-body *),
.markserv-content .hljs-meta:not(.mde-body *),
.markserv-content .hljs-number:not(.mde-body *),
.markserv-content .hljs-operator:not(.mde-body *),
.markserv-content .hljs-variable:not(.mde-body *),
.markserv-content .hljs-selector-attr:not(.mde-body *),
.markserv-content .hljs-selector-class:not(.mde-body *),
.markserv-content .hljs-selector-id:not(.mde-body *) {
  color: #79c0ff;
}

.markserv-content .hljs-regexp:not(.mde-body *),
.markserv-content .hljs-string:not(.mde-body *),
.markserv-content .hljs-meta .hljs-string:not(.mde-body *) {
  color: #a5d6ff;
}

.markserv-content .hljs-built_in:not(.mde-body *),
.markserv-content .hljs-symbol:not(.mde-body *) {
  color: #ffa657;
}

.markserv-content .hljs-comment:not(.mde-body *),
.markserv-content .hljs-code:not(.mde-body *),
.markserv-content .hljs-formula:not(.mde-body *) {
  color: #8b949e;
}

.markserv-content .hljs-name:not(.mde-body *),
.markserv-content .hljs-quote:not(.mde-body *),
.markserv-content .hljs-selector-tag:not(.mde-body *),
.markserv-content .hljs-selector-pseudo:not(.mde-body *) {
  color: #7ee787;
}

/* Our own heading accent, not github-dark's, to stay in the same palette already
   established above. */
.markserv-content .hljs-section:not(.mde-body *) {
  color: #58a6ff;
  font-weight: bold;
}

.markserv-content .hljs-bullet:not(.mde-body *) {
  color: #f2cc60;
}

.markserv-content .hljs-emphasis:not(.mde-body *) {
  font-style: italic;
}

.markserv-content .hljs-strong:not(.mde-body *) {
  font-weight: bold;
}

/* Same green/red tints as .markserv-diff-add/-remove above, for the rare ```diff
   fenced code block, instead of github-dark's own (more opaque) addition/deletion
   colors. */
.markserv-content .hljs-addition:not(.mde-body *) {
  color: #aff5b4;
  background-color: rgba(46, 160, 67, 0.15);
}

.markserv-content .hljs-deletion:not(.mde-body *) {
  color: #ffdcd7;
  background-color: rgba(248, 81, 73, 0.15);
}

.markserv-file-preview-image {
  display: block;
  max-width: 100%;
}

.markserv-file-preview-pdf {
  width: 100%;
  height: 85vh;
  border: none;
}

/* One table row per source line (not a plain <pre>), so a line-number gutter column
   can share the diff view's own trick: a <td> sibling in the same row stays aligned
   with its line's content even when that line word-wraps onto several visual rows,
   unlike a gutter laid out separately from the text. See content-route.ts. */
.markserv-file-preview-text {
  overflow-x: hidden;
  padding: 1rem;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.markserv-file-preview-text table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.markserv-file-preview-text td {
  padding: 0;
  line-height: 1.5;
  vertical-align: top;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.markserv-file-lineno {
  text-align: right;
  color: rgba(128, 128, 128, 0.55);
  user-select: none;
  /* A line number never needs to wrap; without this, the general "wrap the line text"
     rule on .markserv-file-preview-text td would let a 4-digit number wrap and overlap
     the adjacent text column instead of staying inside its fixed-width column. */
  white-space: nowrap;
  overflow: hidden;
  /* 3.5em, not 2.4em: this column's implicit padding-right below eats into that width
     too, so the smaller value only left room for a single digit. Fits up to 4 digits
     comfortably; the text column (unspecified width) takes the rest. */
  width: 3.5em;
  padding-right: 0.75rem;
}

.markserv-file-line-text {
  padding-left: 0.75rem;
}

.markserv-file-download {
  display: inline-block;
  margin-top: 0.5rem;
}

.markserv-diff {
  overflow-x: hidden;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.markserv-diff table {
  border-collapse: collapse;
  width: 100%;
  /* Explicit widths below, not the old/new line-no columns' content size, decide layout —
     more reliable across browsers than the "width: 1%" shrink-to-content trick, which
     needs table-layout: auto and wasn't holding the two number columns apart on mobile. */
  table-layout: fixed;
}

.markserv-diff td {
  padding: 0 0.5rem;
  line-height: 1.5;
  vertical-align: top;
  /* pre-wrap (not plain pre) keeps the diff's leading indentation intact while still
     wrapping a long line at the edge instead of forcing this table to scroll. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.markserv-diff-lineno {
  text-align: right;
  color: rgba(128, 128, 128, 0.55);
  user-select: none;
  /* A line number never needs to wrap; without this, the general "wrap the diff text"
     rule on .markserv-diff td would let a 4-digit number wrap and overlap the
     adjacent old/new column instead of staying inside its fixed-width column. */
  white-space: nowrap;
  overflow: hidden;
  /* 3.5em, not 2.4em: this column's 0.5rem left+right padding (.markserv-diff td) eats
     into that width too, so the smaller value only left room for a single digit. Fits
     up to 4 digits comfortably; the text column (unspecified width) takes the rest. */
  width: 3.5em;
}

.markserv-diff-text {
  padding-left: 0.75rem;
}

/* EXPERIMENTAL: add/remove used to also force the whole line's text color to green/red,
   which fought with the per-token syntax-highlight colors now rendered inside
   .markserv-diff-text (see git-route.ts). Background tint + the line-number column's
   color is left as the add/remove signal, same idea as GitHub's own diff view. */
tr.markserv-diff-add {
  background: rgba(46, 160, 67, 0.15);
}

tr.markserv-diff-add .markserv-diff-lineno {
  color: #2ea043;
}

tr.markserv-diff-remove {
  background: rgba(248, 81, 73, 0.15);
}

tr.markserv-diff-remove .markserv-diff-lineno {
  color: #f85149;
}

tr.markserv-diff-hunk .markserv-diff-text {
  color: rgba(128, 128, 128, 0.85);
}

tr.markserv-diff-meta .markserv-diff-text {
  color: rgba(128, 128, 128, 0.6);
}

.markserv-git-log {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* flex-wrap (not a single row): hash+date share the first line, and the message —
   forced onto its own line below via flex-basis: 100% — no longer fights them for
   horizontal space. Works at any width, so no separate narrow-viewport override is
   needed (a hash+short-timestamp pair that doesn't fit wraps like any other flex item). */
.markserv-git-log-entry {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.15rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.markserv-git-log-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(128, 128, 128, 0.9);
  flex-shrink: 0;
  overflow-wrap: anywhere;
}

.markserv-git-log-date {
  flex-shrink: 0;
  color: rgba(128, 128, 128, 0.9);
  overflow-wrap: anywhere;
}

.markserv-git-log-message {
  flex-basis: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* サイドバー「履歴」タブ: コミットヘッダーは常にそのコミットのファイルツリー（次の要素）
   の直前に来るため、区切り線を消して間隔を詰める。ヘッダーが履歴タブの2件目以降のコミット
   のものである場合のみ、直前のツリーとの間に余白を入れる（1件目はタブ自体の余白で足りる）。 */
.markserv-commit-header {
  border-bottom: none;
  padding-bottom: 0.2rem;
}

.markserv-status-tree + .markserv-commit-header {
  margin-top: 1rem;
}

.markserv-file-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 -2rem 1rem;
  padding: 0.8rem 2rem 0.4rem;
  background: Canvas;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
  font-size: 0.8rem;
}

/* The fixed TOC toggle button (top-right corner) would otherwise sit directly on top of
   the file header's own rightmost content (差分/履歴 links) on wide screens, where the
   header still flows inside .markserv-content instead of the mobile fixed strip below.
   Widening the header's own right padding — only on pages that actually render the
   button (.markserv-has-toc) — keeps that text clear of it, mirroring the equivalent
   mobile-only reservation further down. Cancelled back to 0 in the mobile media query,
   which uses `right` on the header's own fixed box for this instead (see below). */
.markserv-has-toc .markserv-file-header {
  padding-right: 4rem;
}

.markserv-file-header-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: rgba(128, 128, 128, 0.9);
}

.markserv-file-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.markserv-file-branch {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.15);
  font-size: 0.7rem;
  white-space: nowrap;
}

.markserv-git-links {
  flex-shrink: 0;
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
}

/* Header control group for a file outside any git repository (no git links to sit beside). */
.markserv-header-controls {
  flex-shrink: 0;
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
}

/* Markdown notation profile picker (fileview-25) in the file header. */
.markserv-profile-select {
  margin-right: 2rem;
  margin-left: 0.5rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 6px;
  background: Canvas;
  color: CanvasText;
  font-size: 0.8rem;
}

.markserv-git-diff-link,
.markserv-git-log-link,
.markserv-git-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.markserv-git-diff-link svg,
.markserv-git-log-link svg,
.markserv-git-back-link svg {
  width: 14px;
  height: 14px;
}

.markserv-html-preview-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
}

.markserv-html-preview-source-label {
  color: rgba(128, 128, 128, 0.9);
}

/* Preview/source switch in a Markdown file's header (same look as the HTML file's toggle). */
.markserv-view-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
}

.markserv-view-current {
  color: rgba(128, 128, 128, 0.9);
}

.markserv-view-link {
  color: LinkText;
  text-decoration: underline;
  white-space: nowrap;
}

.markserv-html-preview-button {
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: LinkText;
  text-decoration: underline;
  cursor: pointer;
}

/* Requirement 9.16 asks for the search condition/button to stay reachable while scrolling
   a long result list. Rather than position: sticky (which turned out not to engage
   reliably here — the form kept scrolling away with the results instead of pinning),
   .markserv-content becomes a non-scrolling flex column for this page (below) and
   .markserv-grep-results scrolls independently beneath a form that simply never scrolls —
   the same "fixed toolbar + independently-scrolling panel" structure .markserv-sidebar
   already uses for its own nav row + tree panel. */
.markserv-content:has(.markserv-grep) {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.markserv-grep {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.markserv-grep > .markserv-grep-results,
.markserv-grep > .markserv-empty {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The negative side margins cancel out .markserv-content's own padding so the bar's
   background spans the full width. Two explicit rows (scope on row 1, query + action on
   row 2) rather than one field per line — compact enough to stay out of the way of the
   results below on any screen width. */
.markserv-grep-form {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 -2rem 1rem;
  padding: 0.5rem 2rem;
  background: Canvas;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.markserv-grep-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.6rem;
}

.markserv-grep-field {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 9rem;
  min-width: 6rem;
}

.markserv-grep-field label {
  font-size: 0.75rem;
  color: rgba(128, 128, 128, 0.9);
}

.markserv-grep-field input[type="text"] {
  padding: 0.25rem 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  width: 100%;
}

/* The keyword field takes any extra space on its row before the compact checkbox/button. */
.markserv-grep-field-keyword {
  flex: 2 1 9rem;
}

.markserv-grep-field-inline {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  padding-bottom: 0.3rem;
}

.markserv-grep-field-inline label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.markserv-grep-submit {
  flex: 0 0 auto;
  padding: 0.3rem 1rem;
  height: 2rem;
}

.markserv-grep-error {
  color: #f85149;
  font-size: 0.85rem;
  margin: 0;
}

/* Hidden on desktop: the grep-form itself is the visible "header" there. Only on mobile
   (see @media below) does this fill the fixed hamburger/TOC strip, which Grep Search Route
   otherwise leaves blank (no .markserv-file-header of its own). */
.markserv-grep-page-title {
  display: none;
}

.markserv-grep-file {
  margin-bottom: 1.5rem;
}

.markserv-grep-filepath {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
}

.markserv-grep-matches {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}

.markserv-grep-match a {
  display: flex;
  gap: 0.75rem;
  padding: 0.15rem 0.5rem;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.markserv-grep-match a:hover {
  background: rgba(128, 128, 128, 0.15);
}

.markserv-grep-lineno {
  text-align: right;
  color: rgba(128, 128, 128, 0.55);
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  width: 3em;
}

/* Permanent highlight on the keyword occurrence(s) within a result line, rendered
   server-side from Grep Search Service's matchRanges (Requirement 9.17) — distinct from
   .markserv-grep-match-highlight below, which is a temporary highlight applied client-side
   after navigating to the file itself. */
.markserv-grep-match-text {
  background: rgba(255, 214, 0, 0.45);
  color: inherit;
  border-radius: 2px;
}

/* Grep Match Scroll Client UI's temporary highlight on the line landed on after
   following a search result link back into the file's normal view (Requirement 9.12). */
.markserv-grep-match-highlight {
  background: rgba(255, 214, 0, 0.35);
  transition: background 0.5s ease-out;
}

/* Responsive: collapse the sidebar into a toggled off-canvas menu, and widen the
   TOC overlay to fit the viewport, on narrow screens. */
@media (max-width: 768px) {
  /* iOS Safari (and some other mobile browsers) zoom the whole page in on focus for any
     text input/textarea/select rendered under 16px, to keep the typed text legible — an
     unwanted auto-zoom rather than a deliberate one. Below that threshold on every editable
     element sidesteps it; desktop keeps its own smaller sizes untouched (no such browser
     behavior there). */
  .markserv-grep-field input[type="text"] {
    font-size: 1rem;
  }

  /* Every page reserves this 4.5rem-tall top strip for the hamburger/TOC toggle buttons,
     but only pages with a .markserv-file-header (Content/Git Route) previously got an
     opaque backdrop spanning its full width — pages without one (grep search, dashboard,
     status, etc.) showed scrolled content bleeding through the strip everywhere except the
     toggle buttons' own small columns. This single backdrop covers the whole strip on every
     page; .markserv-file-header (z-index: 15) still paints over it when present. */
  .markserv-layout::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4.5rem;
    z-index: 14;
    background: Canvas;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
  }

  /* The button's own small opaque background (base rule) only covers the glyph itself,
     leaving the rest of its reserved margin column transparent above/below it — widen
     each button to fill its whole column (matching markserv-file-header's left/right
     offsets) so the fixed top row has no gap for scrolling content to show through. */
  .markserv-tree-toggle,
  .markserv-toc-toggle {
    top: 0;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
  }

  .markserv-tree-toggle {
    left: 0;
    width: 2.5rem;
  }

  .markserv-toc-toggle {
    right: 0;
    width: 3.25rem;
  }

  .markserv-sidebar {
    position: fixed;
    inset: 0 30% 0 0;
    /* Above the fixed file header (z-index: 15) so an open menu isn't clipped by it,
       but below the toggle buttons (z-index: 20) so the hamburger stays clickable to close it. */
    z-index: 16;
    background: Canvas;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .markserv-sidebar.markserv-sidebar-open {
    transform: translateX(0);
  }

  /* Shares its row with the fixed hamburger column (0 to 2.5rem wide) instead of being
     pushed below it — same left offset already used for the file header row and
     .markserv-project-nav below. Without this, the tab row's own left padding (1rem) sat
     entirely inside that opaque, higher-z-index button's column, so it painted over the
     left edge of the "ファイル" tab instead of merely being a tight-fit text issue. */
  .markserv-sidebar-tabs {
    margin-left: 2.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* The sidebar itself is only 70vw wide here (see .markserv-sidebar above), and the row
     above now also loses 2.5rem to the hamburger column, so the three equal-width tabs
     (ファイル/変更/履歴) have much less room than on desktop — trim each tab's own
     horizontal padding so the labels fit on one line instead of shrinking/wrapping right
     at the edge of legibility (min-width: 0 + overflow-wrap: anywhere above already stop
     them from being clipped outright, but this keeps them comfortable). */
  .markserv-sidebar-tab {
    padding: 0.4rem 0.1rem;
  }

  /* Shares its row with the fixed hamburger column (0 to 2.5rem wide) instead of being
     pushed below it — same left offset already used for the file header row. */
  .markserv-project-nav {
    margin-left: 2.5rem;
  }

  .markserv-content {
    padding: 4.5rem 1rem 1rem;
  }

  /* Shares the fixed top row with the hamburger (left) and TOC toggle (right), like
     before, but as a two-column grid instead of one line: path+branch stacked on the
     left, diff/history links stacked (top-aligned) on the right — a longer,
     project-prefixed path plus a branch name has no natural break point that reads
     well crammed into a single scrolling line. */
  /* Matches the hamburger/TOC strips' height (4.5rem) exactly: this header's own content
     (2 short lines) is shorter than that, and without min-height the strips extended
     past the header's actual bottom edge — leaving a gap in the middle column, below
     the header but above where markserv-content's padding-top starts, uncovered by any
     opaque background, so content scrolling past showed through it. */
  /* right: 0 by default — most pages (non-Markdown files, Git diff/log, Markdown with no
     headings) have no TOC toggle button, so nothing occupies that column and the header can
     reach the true right edge. .markserv-has-toc (set on .markserv-layout only when a TOC
     actually renders) widens this to clear that button instead — reserving the gap
     unconditionally left it empty on every other page, with the underlying content visible
     bleeding through at the top-right corner. */
  .markserv-file-header {
    position: fixed;
    top: 0;
    left: 2.5rem;
    right: 0;
    min-height: 4.5rem;
    z-index: 15;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0;
    background: Canvas;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
  }

  .markserv-has-toc .markserv-file-header {
    right: 3.25rem;
    /* Cancels the wide-screen .markserv-has-toc .markserv-file-header padding-right
       reservation: this fixed mobile header uses `right` (its own box inset) instead of
       padding to clear the TOC toggle, so the wide-screen padding must not carry over. */
    padding-right: 0;
  }

  .markserv-file-header-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .markserv-git-links {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
  }

  .markserv-toc {
    top: 4.5rem;
    right: 0.5rem;
    left: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    /* Pinning both edges gives a fixed box height instead of relying on `max-height: 100vh`,
       which mobile browsers recompute unreliably as their address-bar chrome shows/hides. */
    max-height: none;
  }

  /* Margin/padding switch from the desktop values (matched to .markserv-content's 2rem
     side padding) to 1rem, matching this breakpoint's own side padding — otherwise the
     -2rem margin overshoots the 1rem padding and gets clipped by .markserv-content's
     overflow-x: hidden. The two-row field grouping (.markserv-grep-row) and each field's
     own flex-wrap already keep this compact without further per-field overrides here. */
  .markserv-grep-form {
    margin: 0 -1rem 0.75rem;
    padding: 0.4rem 1rem;
  }

  /* Fills the fixed hamburger/TOC strip with a plain title, the same slot
     .markserv-file-header occupies on Content/Git Route pages (Grep Search Route has no
     TOC toggle, so right:0 always — no .markserv-has-toc counterpart needed here). */
  .markserv-grep-page-title {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 2.5rem;
    right: 0;
    height: 4.5rem;
    z-index: 15;
    padding: 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
  }
}

/* Top page (Project List Route): no sidebar/tree, so it gets its own minimal styling
   instead of the full markserv-layout shell used by every project-scoped page. Needs its
   own overflow-y here (mirroring .markserv-content) because body has overflow: hidden,
   so without it a long project list is clipped and unreachable once it exceeds the
   viewport height, notably on mobile. */
.markserv-project-list {
  max-width: 40rem;
  min-height: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.markserv-project-list-title {
  margin: 0 0 2rem;
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
}

/* Refresh/logout icon pair (project-list-route.ts), replacing the previous plain-text
   "ログアウト" link — same .markserv-nav-icon glyph style as the sidebar nav bar
   (page-template.ts), right-aligned since there's no project name to share the row with. */
.markserv-project-list-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

/* Server picker (shared/remote-leaf-agent): always lists the hub itself plus
   every leaf, pill-styled and ccterm's own menu-screen design. Since markserv
   is a plain multi-page site (not ccterm's SPA), each pill is a real link
   whose href just navigates to that host's own project list; the "selected"
   state below marks whichever one this page's own URL is currently under. */
.markserv-server-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.markserv-server-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: rgba(128, 128, 128, 0.08);
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.markserv-server-pill:hover {
  background: rgba(128, 128, 128, 0.18);
  border-color: rgba(128, 128, 128, 0.5);
}

.markserv-server-pill--selected {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.markserv-server-pill--selected:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.markserv-server-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(128, 128, 128, 0.6);
}

.markserv-server-pill-dot--connected {
  background: #22c55e;
  border-color: #22c55e;
}

.markserv-server-pill--selected .markserv-server-pill-dot--connected {
  background: #fff;
  border-color: #fff;
}

.markserv-server-pill--selected .markserv-server-pill-dot--disconnected {
  border-color: #fff;
}

.markserv-project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.markserv-project-links li {
  margin: 0;
  flex: 1 1 12rem;
}

.markserv-project-link {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.08);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: inherit;
  overflow-wrap: anywhere;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.markserv-project-link:hover {
  background: rgba(128, 128, 128, 0.18);
  border-color: rgba(128, 128, 128, 0.5);
}

/* Re-login CTA on the logged-out page (Logout Route): reuses the project-card
   look (.markserv-project-link) for visual consistency with the rest of the
   app instead of a bare default-styled anchor. */
.markserv-relogin {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Login screen CTA (Auth Middleware's login-page decision, rendered as a
   GET form so it works as a real <button> rather than a link): same
   project-card look as .markserv-project-link instead of the browser's
   default button chrome. */
.markserv-login-form {
  margin: 0;
  /* .markserv-login-button is display: inline-block, so it otherwise sits at this
     block-level form's default left edge instead of under the centered title above it. */
  text-align: center;
}

.markserv-login-button {
  display: inline-block;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.08);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.markserv-login-button:hover {
  background: rgba(128, 128, 128, 0.18);
  border-color: rgba(128, 128, 128, 0.5);
}

.markserv-project-nav {
  display: flex;
  /* Never wrap: with 5 icons plus the project name, wrapping just drops the last icon onto
     an awkward second line instead of actually saving space — .markserv-project-name
     shrinking (below) is what keeps this row fitting in one line. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.markserv-project-name {
  opacity: 0.7;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 2rem;
  flex-shrink: 1;
}

/* プロジェクト一覧・ダッシュボード・更新・ログアウトは文言ではなく単一のグリフで表示し、
   何のリンクかはtitle属性のツールチップ（マウスオーバー）とaria-labelで示す。 */
.markserv-nav-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  font-size: 1.2rem;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}

.markserv-nav-icon:hover {
  background: rgba(128, 128, 128, 0.18);
}

.markserv-refresh-button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.markserv-sidebar-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.markserv-sidebar-tab {
  flex: 1;
  /* Without this, a flex item's automatic min-width defaults to its content's
     unbreakable width, which on a narrow mobile sidebar (70vw, see the mobile
     media query below) exceeds each tab's equal 1/3 share — the label then
     overflows past .markserv-sidebar's overflow: hidden and gets clipped
     instead of shrinking/wrapping (same fix pattern as the flex labels above). */
  min-width: 0;
  /* min-width: 0 alone still isn't enough on a <button>: unlike a plain <div>/<span>,
     browsers don't apply automatic line-breaking between adjacent CJK characters inside
     a button label, so an overflowing label like ファイル stayed a single unbroken line
     and got clipped (its first character disappearing off the sidebar's own left edge)
     instead of wrapping. Forcing a break point anywhere it doesn't otherwise fit fixes
     this the same way it does for arbitrary long tokens (URLs etc.) elsewhere in this file. */
  overflow-wrap: anywhere;
  padding: 0.4rem 0.25rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  font-size: 0.85rem;
  cursor: pointer;
}

.markserv-sidebar-tab-active {
  opacity: 1;
  font-weight: 700;
  border-bottom-color: currentColor;
}

.markserv-sidebar-panel {
  display: none;
}

.markserv-sidebar-panel-active {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1rem 1rem;
}

.markserv-dashboard-section {
  margin-bottom: 1.5rem;
}

.markserv-dashboard-section h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.markserv-sidebar-panel .markserv-dashboard-section h2 {
  font-size: 0.85rem;
  opacity: 0.7;
}

.markserv-dashboard-status-list,
.markserv-dashboard-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.markserv-dashboard-status-entry,
.markserv-dashboard-recent-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.markserv-sidebar-panel .markserv-dashboard-status-entry,
.markserv-sidebar-panel .markserv-dashboard-recent-entry {
  font-size: 0.85rem;
}

.markserv-dashboard-status-kind {
  flex-shrink: 0;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.15);
  font-size: 0.75rem;
}

.markserv-dashboard-status-modified .markserv-dashboard-status-kind {
  color: #d29922;
  background: rgba(210, 153, 34, 0.15);
}

.markserv-dashboard-status-added .markserv-dashboard-status-kind {
  color: #2ea043;
  background: rgba(46, 160, 67, 0.15);
}

.markserv-dashboard-status-deleted .markserv-dashboard-status-kind {
  color: #f85149;
  background: rgba(248, 81, 73, 0.15);
}

.markserv-dashboard-recent-date {
  flex-shrink: 0;
  font-size: 0.8rem;
  opacity: 0.6;
}

.markserv-dashboard-branch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.markserv-dashboard-ahead-behind {
  font-size: 0.85rem;
  opacity: 0.7;
}