/* Astronotes: mobile hardening. Loaded last, shared by every workspace.
   Goal: no sideways page scroll for ANY content; wide things scroll inside their own box;
   long words and URLs wrap; phones get a calmer, less dense page. Checked by `astronotes mobile`. */

/* ---------- everywhere: things that must never push the page wider than the screen ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }                      /* safety net only: real overflow is fixed below and caught by the check */
.app, .app > *, .reading, .frame, #content, .page, .article, .prose, .blk, .home, .split > *, .stats > *, .database, .db-view, .an-database, .an-db-scroll { min-width: 0; }
.article, .prose, .an-title, .article h1, .meta, .deck, .tag-row, .callout, .backlinks, .toc, .rows, .row, .an-snip, .an-dl dd, .ac-crumbs [aria-current] { overflow-wrap: anywhere; }
.prose p, .prose li, .prose dd, .prose blockquote, .prose td, .prose th, .ac-pv { overflow-wrap: anywhere; word-break: normal; }
.prose a, .ac-pv a { overflow-wrap: anywhere; word-break: break-word; }
.prose :not(pre) > code { overflow-wrap: anywhere; word-break: break-all; white-space: normal; }
.prose pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: pre; }
.prose pre code { white-space: pre; word-break: normal; overflow-wrap: normal; }
.prose img, .prose video, .prose iframe, .prose canvas { max-width: 100%; height: auto; }
.prose svg:not(.mermaid-view svg) { max-width: 100%; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.prose .table-scroll table th, .prose .table-scroll table td { overflow-wrap: break-word; word-break: normal; min-width: 7rem; max-width: 24rem; }
.prose .table-scroll table th:first-child, .prose .table-scroll table td:first-child { min-width: 6rem; }
/* tables that fit get full width; many columns scroll inside the box with a soft edge hint */
.table-scroll { background: linear-gradient(to right, var(--canvas) 30%, transparent) left / 24px 100% no-repeat local,
  linear-gradient(to left, var(--canvas) 30%, transparent) right / 24px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent) left / 10px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) right / 10px 100% no-repeat scroll; }
/* mermaid: fits the column by default; tap to see it full size and pan inside its own box */
.an-mermaid, .mermaid-view { max-width: 100%; }
.mermaid-view { overflow: auto; -webkit-overflow-scrolling: touch; cursor: zoom-in; }
.mermaid-view svg { max-width: 100% !important; height: auto; }
.mermaid-view.is-zoomed { cursor: zoom-out; max-height: 75vh; }
.mermaid-view.is-zoomed svg { max-width: none !important; }
.an-zoom-hint { display: none; font-size: 12px; color: var(--dim); margin: 4px 0 0; }
.mermaid-view.is-wide + .an-zoom-hint { display: block; }
.sc-board, .an-board { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-card-t, .sc-card, .an-gantt-row > *, .an-timeline li { overflow-wrap: anywhere; min-width: 0; }
.an-lead { font-size: 1.08rem; line-height: 1.5; color: var(--ink); margin: 6px 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.ac-props > summary .an-count { color: var(--dim); font-weight: 400; margin-left: 6px; letter-spacing: 0; text-transform: none; }

/* ---------- tablets and phones ---------- */
@media (max-width: 1099px) {
  .topbar.ac-top { flex-wrap: wrap; }
  .ac-top .ac-brand { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ac-top .ac-brand b, .ac-top .ac-brand span { overflow: hidden; text-overflow: ellipsis; }
  .ac-top .ac-actions { flex: none; margin-left: auto; }
  input, select, textarea, .ac-blk-edit { font-size: 16px !important; }
  [contenteditable]:not(h1):not(h2):not(h3) { font-size: max(16px, 1em) !important; }   /* below 16px iOS zooms the page on focus */
}
@media (max-width: 800px) {
  .ac-top .ac-prod, .ac-top .ac-sep { display: none; }
  .reading .frame, .reading .page, .reading .home { width: calc(100% - 32px) !important; max-width: 40rem; }
  .page { padding: 10px 0 32px; }
  .article .kicker { margin-bottom: 4px; }
  .article h1, .an-title { font-size: clamp(1.55rem, 7vw, 1.9rem); line-height: 1.2; margin: 0 0 6px; }
  .article .meta { font-size: 13px; line-height: 1.45; }
  .tag-row { gap: 6px; margin: 8px 0 10px; }
  .tag { font-size: 10.5px; padding: 3px 7px; }
  .prose { font-size: 16px; line-height: 1.62; }
  .prose p, .prose ul, .prose ol { margin: 0 0 .85em; }
  .prose li + li { margin-top: .25em; }
  .prose h2 { font-size: 1.22rem; margin: 1.6em 0 .5em; line-height: 1.3; }
  .prose h3 { font-size: 1.06rem; margin: 1.3em 0 .4em; }
  .prose pre { font-size: 13px; padding: 10px 12px; }
  .prose blockquote, .callout { margin-inline: 0; }
  .prose table { font-size: 14px; }
  /* properties: collapsed by default (JS), and stacked label-over-value instead of two cramped columns */
  .ac-props { margin: 6px 0 14px; }
  .ac-props > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
  .ac-props .an-table, .ac-props .an-table tbody, .ac-props .an-table tr, .ac-props .an-table th, .ac-props .an-table td { display: block; width: 100%; box-sizing: border-box; }
  .ac-props .an-table tr { padding: 8px 12px; border-bottom: 1px solid var(--line); }
  .ac-props .an-table th { padding: 0 0 2px !important; border: 0 !important; background: none !important; font-size: 11px; box-shadow: none !important; }
  .ac-props .an-table td { padding: 0 !important; border: 0 !important; background: none !important; font-size: 15px; line-height: 1.45; }
  .ac-props .table-scroll { overflow: visible; background: none; }
  .an-lead { font-size: 1rem; padding: 8px 12px; }
  /* right rail sits under the article: compact, collapsible, graph small */
  .side-right { padding: 8px 16px 24px !important; }
  .side-right section.graph .graph-outer, .side-right [data-local-graph] { height: 220px !important; max-height: 220px; }
  .toc-header, .backlinks .toc-header, .ac-props > summary { min-height: 44px; }
  .toc-content a, .backlink, .tree a, .side-sections a, .tree summary, .rows .row, .ac-menu a, .ac-menu button { min-height: 44px; box-sizing: border-box; }
  .toc-content a, .tree a, .side-sections a { display: flex; align-items: center; }
  .rows .row { padding-block: 10px; gap: 8px; }
  .an-snip { font-size: 15px; line-height: 1.5; }
  .row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .row .meta { flex: none; max-width: 45%; text-align: right; }
  .an-graph-page { height: 62dvh; }
  .an-legend { font-size: 12px; gap: 6px 10px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sc-hero, .hero { padding: 16px !important; }
  .sc-meta span { border-radius: 8px; white-space: normal; overflow-wrap: anywhere; }
  .sc-eyebrow { letter-spacing: .08em; overflow-wrap: anywhere; }
  .split { gap: 20px; }
  .log-row { grid-template-columns: 1fr; }
  .an-dl { grid-template-columns: 1fr !important; }
  .an-dl dt { margin-top: 8px; }
  .an-code-row { flex-wrap: wrap; }
  .an-code-row input { min-width: 0; flex: 1 1 10rem; }
  .an-gantt-row { grid-template-columns: minmax(70px, 34%) 1fr; }
  .palette, .palette-panel { max-width: calc(100vw - 16px); }
}
@media (max-width: 380px) {
  .reading .frame, .reading .page, .reading .home { width: calc(100% - 24px) !important; }
  .stats { grid-template-columns: 1fr; }
}
.ac-props > summary { list-style: none; }
.ac-props > summary::-webkit-details-marker { display: none; }
.ac-props > summary::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; }
.ac-props[open] > summary::before { transform: rotate(90deg); }
@media (max-width: 1099px) {
  .topbar.ac-top .ac-crumbs [aria-current] { display: inline-block; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}
@media (max-width: 800px) {
  /* small tables become one card per row: label on the left, value on the right */
  .prose .table-scroll:has(> table.an-stack) { overflow: visible; background: none; }
  .prose table.an-stack, .prose table.an-stack tbody { display: block; width: 100%; border: 0; }
  .prose table.an-stack thead { display: none; }
  .prose table.an-stack tr { display: block; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
  .prose table.an-stack td { display: grid; grid-template-columns: minmax(5.5rem, 30%) 1fr; gap: 10px; min-width: 0 !important; max-width: none !important; padding: 5px 0 !important; border: 0 !important; background: none !important; }
  .prose table.an-stack td + td { border-top: 1px dashed var(--line) !important; }
  .prose table.an-stack td::before { content: attr(data-label); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 3px; overflow-wrap: anywhere; }
  .prose table.an-stack td:empty { display: none; }
  .prose table.an-stack td > * { min-width: 0; }
  .prose table.an-stack td > .an-cell { display: block; overflow-wrap: anywhere; }
  a.tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .prose table.an-stack td:not([data-label]), .prose table.an-stack td[data-label=""] { grid-template-columns: 1fr; }
  .prose table.an-stack td[data-label=""]::before { display: none; }
  .prose table.an-kv td:first-child { display: none; }
  .prose table.an-kv td + td { border-top: 0 !important; }
}
@media (max-width: 800px) and (hover: none) {
  .an-blk-src { display: none; }   /* block-source pens overlap boards and bars on phones; edit those blocks on a wider screen */
}
@media (max-width: 800px) {
  /* agent keys: one card per key */
  .an-table-wrap:has(> .an-keys) { overflow: visible; }
  .an-keys, .an-keys tbody { display: block; width: 100%; }
  .an-keys thead { display: none; }
  .an-keys tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .an-keys td { display: block; padding: 0 !important; border: 0 !important; overflow-wrap: anywhere; font-size: 14px; }
  .an-keys td:first-child { grid-column: 1 / -1; font-size: 15px; }
  .an-keys td:first-child .muted { display: block; font-size: 13px; }
  .an-keys td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
  .an-keys td:last-child { grid-column: 2; grid-row: 2 / span 3; align-self: center; }
  .an-keys .an-btn { min-height: 44px; white-space: nowrap; }
}
/* breadcrumbs: a very long title or folder name never pushes the bar off-screen */
.ac-crumbs a, .ac-crumbs [aria-current] { display: inline-block; max-width: min(32rem, 40vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ac-crumbs a { max-width: min(16rem, 24vw); }
@media (max-width: 1099px) { .ac-crumbs a { max-width: 40vw; } }
/* short labels (type, status, counts) never break mid-word */
.backlink .meta, .row .meta, .tree .meta, .an-count, .sc-count, .pill, .tag { overflow-wrap: normal; word-break: keep-all; white-space: nowrap; flex: none; }
.backlink > span:first-child { min-width: 0; }