/* The shared frame, as in The System: one centred column (max --wrap-w, from the page-width
   setting) inside 16px of page padding, filling the window: header, export bar, then the view. */

html,
body { height: 100%; }
html,
body { overflow-x: hidden; }

body {
  display: flex;
  flex-direction: column;
  /* the padding clears the notch and home bar (viewport-fit=cover) */
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.app {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: var(--wrap-w, 1100px);
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
}

.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-header .left {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* a space that asks for a quiet header (focus) keeps only the path and view switch, as The System
   did, and the status pill while it reports an error (a save that failed must never go unseen) */
.app.quiet-header .app-header :is(.search, .status:not([data-state="error"], [data-state="offline"]), .width-btn, .theme-btn, .dark-pick:not(.view-pick)) { display: none; }

/* [≡] never shrinks: when the row is full the header wraps, as The System's did */
.side-toggle { flex: none; }

.crumb {
  margin: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumb::before { content: "> "; }

.app-header .right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Header buttons: the same small tab as the file tabs */
.hdr-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--tedge);
  border-bottom-width: 2px;
  border-radius: 2px;
  background: var(--tab);
  color: var(--fg);
  font: 500 12px var(--font-ui);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}

.hdr-btn[hidden] { display: none; }
.hdr-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.hdr-btn:active { transform: translateY(1px); }

@media (hover: hover) {
  .hdr-btn:hover { border-color: var(--accent); color: var(--accent); }
}

/* light | dark: a terminal-style segmented switch, with a block that slides under the active side */
.theme-btn {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--tab);
  color: var(--muted);
  font: 400 11px/1 var(--font-ui);
  letter-spacing: .04em;
  cursor: pointer;
}

.theme-btn .ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0 8px;
  transition: color .18s ease;
}

.theme-btn[aria-checked="false"] .ico.sun,
.theme-btn[aria-checked="true"] .ico.moon { color: var(--accent); }

.theme-btn .knob {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 2px;
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
  transition: transform .18s ease;
}

.theme-btn[aria-checked="true"] .knob { transform: translateX(100%); }

@media (hover: hover) {
  .theme-btn:hover { border-color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-btn .knob { transition: none; }
}

/* The view switch sits apart at the far right, after a separator */
.viewsw {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}

.hsep {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--line);
}

.dark-pick.view-pick .pick-btn {
  gap: 8px;
  padding: 0 10px;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.hbreak { display: none; }

/* Phone: row one is the path and the view switch, row two the search and the note controls */
@media (max-width: 700px) {
  .app-header { gap: 8px; }
  .app-header .left { flex: 1 1 140px; order: 1; }
  .viewsw { order: 2; margin-left: auto; gap: 8px; }
  .viewsw .hsep { display: none; }
  .dark-pick.view-pick .pick-btn { padding: 0 8px; font-size: 11px; }
  .hbreak { display: block; flex-basis: 100%; order: 3; height: 0; }
  .app-header .search { order: 4; flex: 1 1 60px; min-width: 60px; max-width: none; }
  .app-header .right { flex: none; flex-wrap: nowrap; order: 5; gap: 6px; }
  .app-header .right .status { gap: 0; }
  .hdr-btn { padding: 0 8px; }
  .theme-btn .ico { padding: 0 6px; }
  /* the sidebar button moves into the tab row */
  .side-toggle { display: none; }
}

.app-body {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.view {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* The status area (core/status-area.js): a dock column beside the view, strips under it */
.status-dock {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 360px;
  min-height: 0;
  margin-left: 6px;
}

.status-strip {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 6px;
}

.status-dock[hidden],
.status-strip[hidden] { display: none; }

.ava-slot {
  width: 320px;
  border-left: 1px solid var(--line);
}

.view-error {
  color: var(--muted);
}

/* Export button and the bar it opens under the header */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.bar[hidden] { display: none; }
.bar .label { margin-right: 2px; }
.bar .gap { flex: none; width: 10px; }

.exportbar {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--sheet);
}

/* The dark-look picker (dark mode only) */
.dark-pick { position: relative; }
.dark-pick[hidden] { display: none; }

.dark-pick .pick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--tedge);
  border-bottom-width: 2px;
  border-radius: 2px;
  background: var(--tab);
  color: color-mix(in srgb, var(--fg) 80%, var(--muted));
  font: 400 12px var(--font-ui);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}

.dark-pick .pick-btn:active { transform: translateY(1px); }
.dark-pick .pick-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

@media (hover: hover) {
  .dark-pick .pick-btn:hover { border-color: var(--accent); color: var(--accent); }
}

.dark-pick .sq {
  display: block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.sq[data-look="claude"] { background: #d97757; }
.sq[data-look="mono"] { background: #e6e6e6; }
/* only the menu's mono square has a ring (the button's square is plain, as in The System) */
.dark-pick .menu .sq[data-look="mono"] { outline: 1px solid #7d7d7d; }
.sq[data-look="green"] { background: #6fdc8c; }
.sq[data-look="amber"] { background: #f2a93b; }
.sq[data-look="blue"] { background: #6aa8ff; }

.dark-pick .menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 130px;
  padding: 4px;
  border: 1px solid var(--tedge);
  border-radius: 2px;
  background: var(--sheet);
  box-shadow: 0 6px 18px rgb(0 0 0 / .18);
}
.view-pick .menu { z-index: 40; min-width: 140px; }
.view-pick .menu.from-left { right: auto; left: 0; }

.dark-pick .menu[hidden] { display: none; }

.dark-pick .menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: 400 12px var(--font-ui);
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .dark-pick .menu button:hover { background: var(--sel-bg); box-shadow: inset 2px 0 0 var(--accent); }
}

/* the current one: accent, with The System's ticked box on the right (an image: the CSP blocks data: URLs) */
.dark-pick .menu button[aria-checked="true"] { color: var(--accent); }
.dark-pick .menu button[aria-checked="true"]::after {
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: auto;
  background: var(--accent);
  content: "";
  -webkit-mask: url("/img/tick-box.svg") center / 12px no-repeat;
  mask: url("/img/tick-box.svg") center / 12px no-repeat;
}