/* ============================================================
   INTERACTIVE DIAGRAMS ,  mobile layout, larger tap targets
   ============================================================ */
@media (max-width: 820px){
  #view-diagrams .dg-hero{ padding:12px 14px 10px; }
  #view-diagrams .dg-hero-row{ gap:6px; }
  #view-diagrams .dg-topic{ padding:11px 13px; font-size:14px; min-width:0; }
  #view-diagrams .dg-pill{ padding:9px 13px; font-size:12px; min-height:42px; }
  #view-diagrams .dg-pill.primary{ padding:11px 18px; font-size:13px; }

  /* Horizontal scroll toolbar ,  every button stays reachable */
  #view-diagrams .dg-toolbar{
    padding:8px 12px;
    gap:6px;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #view-diagrams .dg-toolbar::-webkit-scrollbar{ display:none; }
  #view-diagrams .dg-toolbar > *{ flex:none; }
  #view-diagrams .dg-ibtn{ width:42px; height:42px; }
  #view-diagrams .dg-seg button{ padding:8px 12px; font-size:12px; }

  /* Secondary button row also scrolls */
  #view-diagrams .dg-hero-secondary{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:4px;
    margin-top:10px;
  }
  #view-diagrams .dg-hero-secondary::-webkit-scrollbar{ display:none; }
  #view-diagrams .dg-hero-secondary .dg-pill{ flex:none; }
}
@media (max-width: 520px){
  #view-diagrams .dg-split{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,120px) 1fr;
  }
  #view-diagrams .dg-pane{ border-right:none; border-bottom:1px solid var(--line); }
  #view-diagrams .dg-pane-head{ padding:8px 12px; }
  #view-diagrams .dg-rows{ padding:4px 6px; }
  #view-diagrams .dg-row{ padding:8px 10px; }
  #view-diagrams .dg-row b{ font-size:12.5px; }
}

/* Recall card ,  thumb-friendly on mobile */
@media (max-width: 640px){
  #dgCanvas .dg-recall-card{ padding:18px 20px; width:92%; max-width:400px; }
  #dgCanvas .dg-recall-card .q{ font-size:15px; min-height:auto; }
  #dgCanvas .dg-recall-card input{ padding:12px 14px; font-size:16px; margin-bottom:12px; }
  #dgCanvas .dg-recall-card .acts button{
    padding:11px 18px; font-size:14px; min-height:44px; min-width:100px;
  }
}

/* ============================================================
   Sidebar v4 ,  flat list, no dropdowns, scrollable chips
   ============================================================ */

/* ---- Flex chain: guarantee the list region scrolls. Many
       patches strip min-height:0 from flex ancestors; re-assert. ---- */
.dg-pane{
  display:flex;flex-direction:column;
  min-height:0;height:100%;overflow:hidden;
}
.dg-pane > .dg-toolbar-v2{flex:0 0 auto;}
.dg-pane > #dgRows,
.dg-pane > .dg-rows{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* ---- Toolbar ---- */
.dg-toolbar-v2{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 12px 8px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  flex:0 0 auto;
}
.dg-search-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;transition:border-color .15s,box-shadow .15s;
}
.dg-search-row:focus-within{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:var(--ring-soft);
}
.dg-search-ico{
  width:14px;height:14px;flex:none;color:var(--muted);
  transition:color var(--dur-layout);
}
.dg-search-row:focus-within .dg-search-ico{color:var(--accent);}
.dg-search{
  flex:1;min-width:0;border:0;background:transparent;box-shadow:none;
  outline:none;padding:0;font:400 13px var(--sans);color:var(--fg);
  -webkit-appearance:none;appearance:none;
}
.dg-search::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;width:0;height:0;
}
.dg-search::placeholder{color:var(--muted);opacity:.85;}

/* ---- Chips: single row, horizontally scrollable, no wrap ---- */
.dg-chips{
  display:flex;
  flex-wrap:nowrap;
  gap:5px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  padding:1px 0 3px;
  /* Fade the right edge so it reads as "more to the right" */
  mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
}
.dg-chips::-webkit-scrollbar{display:none;}
.dg-chip{
  display:inline-flex;align-items:center;gap:5px;
  flex:0 0 auto;              /* never shrink */
  padding:4px 10px;
  font:600 10.5px var(--mono);letter-spacing:.03em;
  border:1px solid var(--line);border-radius:99px;
  background:transparent;color:var(--soft);cursor:pointer;
  white-space:nowrap;transition:background .12s,color .12s,border-color .12s;
}
.dg-chip:hover{color:var(--fg);border-color:var(--line2);}
.dg-chip.on{
  background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent);
}
.dg-chip-n{
  font:600 9px var(--mono);
  background:color-mix(in srgb,currentColor 14%,transparent);
  border-radius:99px;padding:0 5px;min-width:14px;text-align:center;
}
.dg-chip.on .dg-chip-n{background:color-mix(in srgb,#000 18%,transparent);}

/* ---- Section header ,  a static divider, not a button ---- */
.dg-section{
  display:flex;align-items:center;gap:8px;
  padding:14px 12px 6px;
  position:sticky;top:0;z-index:2;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  pointer-events:none;         /* not clickable */
}
.dg-section-title{
  flex:1;min-width:0;
  font:600 10px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dg-section-count{
  font:600 10px var(--mono);color:var(--soft);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;padding:1px 7px;flex:none;
}

/* ---- Row: title + delete. No tag, no date, no layout shifts. ---- */
.dg-row{
  position:relative;
  display:flex;align-items:center;
  padding:10px 40px 10px 12px;   /* space reserved for the × */
  border-radius:9px;
  cursor:pointer;
  border:1px solid transparent;
  transition:background var(--dur-layout),border-color var(--dur-layout);
  /* Kill the flicker: no opacity transition on children. */
}
.dg-row:hover{background:var(--panel2);}
.dg-row:focus-visible{
  outline:none;
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:var(--ring-soft);
}
.dg-row.on{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent);
}
.dg-row-title{
  display:block;min-width:0;
  font:600 13.5px var(--sans);color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Delete button: always in the layout, always clickable, only
   colored on its own hover ,  no opacity transition, no flicker. */
.dg-row .dg-del{
  position:absolute;right:8px;top:50%;
  width:24px;height:24px;
  transform:translateY(-50%);
  border:1px solid transparent;background:transparent;
  color:transparent;                /* invisible until hover */
  cursor:pointer;
  font:600 14px/1 var(--sans);
  border-radius:6px;
  display:grid;place-items:center;padding:0;
}
.dg-row:hover .dg-del,
.dg-row:focus-within .dg-del{
  color:var(--muted);
}
.dg-row .dg-del:hover{
  color:#fff;background:var(--err);border-color:var(--err);
}

/* ---- Empty state ---- */
.dg-empty{
  display:flex;flex-direction:column;gap:6px;
  padding:36px 22px;text-align:center;
}
.dg-empty b{font:600 13.5px var(--sans);color:var(--fg);}
.dg-empty span{font:12.5px/1.55 var(--sans);color:var(--soft);}
.dg-empty kbd{
  font:600 10px var(--mono);
  padding:1px 6px;border-radius:4px;
  border:1px solid var(--line);background:var(--surface-2);
  color:var(--fg);
}

/* ---- Late-mount reserves and the catalog disclosure (7d.10) ---- */

/* The search row and the chip tray are painted by the shell now, but the
   chips are filled once the route module runs. Reserving the settled row
   height keeps the diagram list from jumping when they arrive: 110px on a
   desktop pointer, 135px once the 820px touch floor enlarges both rows. */
.dg-toolbar-v2{min-height:110px;}
@media (max-width:820px){
  .dg-toolbar-v2{min-height:135px;}
}

/* The mode bar above the canvas (Explore / Edit / Recall) is painted, but its
   segmented buttons grow when the mono face lands under the touch floor: 43 ->
   51px on a pointer, 39 -> 61px on a phone. Reserve the settled height so the
   canvas below it does not move. */
#view-diagrams .dg-toolbar{min-height:51px;}
@media (max-width:820px){
  #view-diagrams .dg-toolbar{min-height:61px;}
}

/* The APEX catalog is a browser for every scene in the atlas, not something
   the list needs above it. It is a closed disclosure pinned under the list,
   so opening it moves nothing above it. */
.dg-catalog{
  flex:0 0 auto;
  padding:5px 10px 6px;
  border-top:1px solid var(--line);
  font:12px var(--sans);
  color:var(--soft);
}
.dg-catalog>summary{
  cursor:pointer;list-style:none;
  font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);padding:2px 0;
}
.dg-catalog>summary::-webkit-details-marker{display:none;}
.dg-catalog>summary::before{content:'\25B8\00a0';}
.dg-catalog[open]>summary::before{content:'\25BE\00a0';}
.dg-catalog[open]{max-height:38vh;overflow:auto;}

/* On a phone the pane is 120-145px tall: the toolbar alone was 135px of it,
   which clipped the saved list away entirely. Give the list the room. */
@media (max-width:820px){
  .dg-toolbar-v2{display:none;}
  .dg-catalog{display:none;}
}