/* The frame: top bar, outline, content, pane, status bar. At phone width
   (the app's own width: a container query) the tabs move to the bottom,
   the outline and the pane become full-width sheets. */

.dr-app {
  container: app / inline-size;
  display: grid;
  /* (each bar sets its own height: a container query can't restyle the container itself) */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr); /* (wide content scrolls inside; it never widens the app) */
  height: 100%;
  min-height: 0;
  background: var(--color-page);
  overflow: clip;
}

/* ── top bar ── */
.dr-top {
  height: var(--chrome-h);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0 var(--space-3) 0 var(--space-2);
  background: var(--color-chrome);
  border-bottom: 1px solid var(--color-popover-border);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  color: var(--color-text-dimmer);
  white-space: nowrap;
}
.dr-outline-toggle { width: var(--control-h-small); height: var(--control-h-small); }

.dr-project {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  height: var(--control-h-small);
  padding: 0 var(--space-2);
  border-radius: var(--radius-control);
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.dr-project:hover { color: var(--color-text); background: var(--color-popover-hover); }
.dr-project-title { overflow: hidden; text-overflow: ellipsis; }

.dr-tabs { display: flex; gap: var(--space-1); }
.dr-tabs-top { margin-left: var(--space-2); padding-left: var(--space-3); border-left: 1px solid var(--color-popover-border); }
.dr-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-h-small);
  padding: 0 var(--space-2);
  border-radius: var(--radius-control);
  color: var(--color-text-dimmer);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.dr-tab:hover { color: var(--color-text-dim); background: var(--color-popover-hover); }
.dr-tab[aria-selected='true'] { color: var(--color-text); background: var(--color-popover-active); }
.dr-tabs-top .dr-tab .dr-icon { display: none; }
.dr-tabs-bottom { display: none; }

.dr-top-end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.dr-search {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-small);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-control);
  color: var(--color-text-dimmer);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.dr-search:hover { color: var(--color-text-dim); border-color: var(--color-text-dimmer); }
.dr-search-label { min-width: var(--space-16); text-align: left; }

.dr-backup { display: inline-flex; color: var(--color-text-dimmer); }
.dr-backup[data-state='error'] { color: var(--color-danger); }
.dr-backup[data-state='ok'] .bt-duo-tint { --duo-tint: var(--color-success); }

.dr-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-small);
  height: var(--control-h-small);
  border-radius: 50%;
  background: var(--color-popover-active);
  color: var(--color-text);
  font-size: var(--text-label);
}
.dr-user:hover { box-shadow: 0 0 0 1px var(--color-text-dimmer); }

/* ── body: outline, content, pane ── */
.dr-body { display: flex; min-height: 0; }
.dr-content { flex: 1 1 auto; min-width: 0; overflow: auto; }

.dr-outline {
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--outline-w);
  min-height: 0;
  background: var(--color-column);
  border-right: 1px solid var(--color-popover-border);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
}
.dr-outline-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-3) var(--space-2); }
.dr-outline-group + .dr-outline-group { margin-top: var(--space-4); }
.dr-outline-head {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 var(--space-2) var(--space-1);
  font: inherit;
  color: var(--color-text-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dr-outline-list { list-style: none; margin: 0; padding: 0; }
.dr-outline-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--control-h-small);
  padding: 0 var(--space-2);
  border-radius: var(--radius-control);
  color: var(--color-text-dim);
  text-align: left;
}
.dr-outline-row:hover { background: var(--color-popover-hover); color: var(--color-text); }
.dr-outline-row[aria-current='true'] { background: var(--color-popover-active); color: var(--color-text); }
.dr-outline-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-outline-name[data-unnamed='true'] { color: var(--color-text-dimmer); font-style: italic; }
.dr-outline-empty { margin: 0; padding: 0 var(--space-2); color: var(--color-text-dimmer); }
.dr-outline-new {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-2) var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-2);
  border-top: 1px solid var(--color-popover-border);
  color: var(--color-text-dim);
}
.dr-outline-new:hover { color: var(--color-text); }

.dr-pane {
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--detail-w);
  min-height: 0;
  background: var(--color-bg);
  border-left: 1px solid var(--color-popover-border);
}
.dr-pane-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ── status bar ── */
.dr-status {
  height: var(--status-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-3);
  background: var(--color-chrome);
  border-top: 1px solid var(--color-popover-border);
  font-size: var(--text-ui);
  color: var(--color-text-dimmer);
  white-space: nowrap;
}
.dr-status-group { display: flex; gap: var(--space-4); }
.dr-status-backup[data-state='error'] { color: var(--color-danger); }

/* ── a view's head row ── */
.dr-view { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-12); }
.dr-view-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.dr-view-title { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 auto 0 0; font-size: var(--text-title); line-height: var(--lh-title); font-weight: 400; color: var(--color-text); }
.dr-view-count { font-size: var(--text-ui); color: var(--color-text-dimmer); }
.dr-filter { width: calc(4 * var(--space-16)); }

/* ── phone width ── */
@container app (max-width: 720px) {
  .dr-status { display: none; }
  .dr-tabs-top { display: none; }
  .dr-search-label, .dr-search .dr-kbd { display: none; }
  .dr-search { width: var(--control-h); height: var(--control-h); justify-content: center; padding: 0; border: 0; }
  .dr-tabs-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    height: calc(var(--tab-bar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-chrome);
    border-top: 1px solid var(--color-popover-border);
  }
  .dr-tabs-bottom .dr-tab { flex-direction: column; justify-content: center; gap: var(--space-1); height: auto; border-radius: 0; font-size: var(--text-label); line-height: var(--space-3); }
  .dr-tabs-bottom .dr-tab[aria-selected='true'] { background: transparent; color: var(--color-accent); }
  .dr-body { position: relative; }
  .dr-outline, .dr-pane { position: absolute; inset: 0; z-index: 5; width: auto; border: 0; }
  .dr-view { padding: var(--space-4) var(--space-4) var(--space-8); }
  .dr-filter { width: 100%; order: 3; }
  .dr-view-head .dr-button-label { display: none; }
}