/* galley.css · P30, Galley: the layout of the engine page, the
   typesetting page and the page against Chromium on the design system's
   tokens. The selects, segmented controls, switches, fields, banner, menu
   and table are the design system's; this file places them and draws what
   a layout engine's pages have that the design system does not: the paper
   the canvas sits on, the box model, the lines' spacing bars and the
   fuzzer's progress. Every value is a token. */

.g { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; background: var(--paper); overflow: hidden; }
.g-edit { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; background: var(--ground); box-shadow: inset calc(-1 * var(--px)) 0 0 var(--line-2); }
.g-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-edit-head [data-r="select"] { min-width: 0; flex: 1; }
.g-edit-note, .g-edit-foot { color: var(--ink-3); font-size: var(--fs-11); line-height: var(--lh-11); font-variant-numeric: tabular-nums; }
.g-edit-foot { margin: 0; }
.g-source { flex: 1; min-height: 0; display: flex; }
.g-source > textarea { flex: 1; min-height: 0; resize: none; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: var(--fs-11); line-height: var(--lh-11); white-space: pre; tab-size: 2; }

.g-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 12px 16px 12px; }
.g-top { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.g-times { margin-left: auto; color: var(--ink-3); font-size: var(--fs-11); line-height: var(--lh-11); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-export { display: flex; gap: 2px; }
.g-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.g-panes[data-view="galley"], .g-panes[data-view="diff"] { grid-template-columns: minmax(0, 1fr); }
.g-panes[data-view="galley"] [data-pane="chromium"], .g-panes[data-view="diff"] [data-pane="chromium"] { display: none; }
.g-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 6px; }
.g-pane-head { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.g-pane-head b { font-weight: var(--fw-550); color: var(--ink); }
.g-pane-head span { color: var(--ink-3); }
.g-scroll { flex: 1; min-height: 0; overflow: auto; border-radius: var(--r-contain); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); padding: 12px; }
/* the paper: the page as wide as the chosen width, white in both themes, as a page is */
.g-paper { position: relative; width: max-content; background: var(--gray-0); box-shadow: 0 0 0 var(--px) var(--line-2); }
.g-paper > canvas, .g-paper > iframe { display: block; border: 0; }
/* a canvas draws text with the font settings of its element: Galley's canvases take the browser's defaults,
   as the canvas that measures them has, instead of the design system's optical size and features */
.g-paper > canvas, .g-type-art > canvas { font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-kerning: auto; text-rendering: auto; letter-spacing: normal; }
.g-overlay { position: absolute; inset: 0; pointer-events: none; }
.g-handle { position: absolute; top: 0; left: 0; width: 12px; height: 100%; cursor: ew-resize; }
.g-handle::after { content: ""; position: absolute; top: 50%; left: 4px; width: 4px; height: 32px; margin-top: -16px; border-radius: var(--r-press); background: var(--line-3); }
.g-handle:hover::after, .g-handle[data-drag]::after { background: var(--accent); }

.g-side { min-height: 0; overflow: auto; padding: 12px 16px; background: var(--ground); box-shadow: inset var(--px) 0 0 var(--line-2); }
.g-hint { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.g-el { margin: 0 0 4px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-family: var(--font-mono, "JetBrains Mono", monospace); overflow-wrap: anywhere; }
.g-path { margin: 0 0 12px; color: var(--ink-3); font-size: var(--fs-11); line-height: var(--lh-11); overflow-wrap: anywhere; }
.g-h { margin: 16px 0 6px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink-2); }
/* the box model: margin, border, padding and content nested, as the inspector of a browser draws it */
.g-bm { display: grid; text-align: center; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-bm div { position: relative; padding: 18px 26px; border-radius: var(--r-value); }
.g-bm div > i { position: absolute; top: 3px; left: 6px; font-style: normal; color: var(--ink-3); }
.g-bm .m { background: var(--orange-100); box-shadow: inset 0 0 0 var(--px) var(--orange-300); }
.g-bm .b { background: var(--yellow-100); box-shadow: inset 0 0 0 var(--px) var(--yellow-400); }
.g-bm .p { background: var(--green-100); box-shadow: inset 0 0 0 var(--px) var(--green-300); }
.g-bm .c { padding: 8px; background: var(--blue-100); box-shadow: inset 0 0 0 var(--px) var(--blue-300); color: var(--ink); }
.g-bm span { position: absolute; }
.g-bm .t { top: 3px; left: 50%; transform: translateX(-50%); }
.g-bm .bo { bottom: 3px; left: 50%; transform: translateX(-50%); }
.g-bm .l { left: 6px; top: 50%; transform: translateY(-50%); }
.g-bm .r { right: 6px; top: 50%; transform: translateY(-50%); }
.g-props { display: grid; gap: 2px; }
.g-props [data-part="value"] { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.g-vs { display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr; gap: 2px 8px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-vs b { font-weight: var(--fw-550); color: var(--ink-3); }
.g-vs .off { color: var(--red-600); }
.g-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* the typesetting page */
.g-type { flex: 1; min-height: 0; overflow: auto; padding: 24px 24px 40px; background: var(--paper); }
.g-type-head h1, .g-conf-head h1 { margin: 0 0 6px; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); color: var(--ink); }
.g-type-head p, .g-conf-head p { max-width: 720px; margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
.g-type-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0; }
.g-type-range { display: flex; align-items: center; gap: 8px; }
.g-type-range input { width: 160px; accent-color: var(--accent); }
.g-type-range span { min-width: 44px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }
.g-type-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.g-type-col h2 { margin: 0 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.g-type-col h2 span { margin-left: 6px; font-weight: var(--fw-450); color: var(--ink-3); }
.g-type-art { position: relative; display: flex; gap: 10px; align-items: flex-start; }
.g-type-art > canvas:first-child { background: var(--gray-0); border-radius: var(--r-value); box-shadow: 0 0 0 var(--px) var(--line-2); }
.g-type-stats { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 12px; margin: 10px 0 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-type-stats dt { color: var(--ink-3); }
.g-type-stats dd { margin: 0; }
.g-type-text { margin-top: 20px; max-width: 760px; }
.g-type-text textarea { min-height: 96px; resize: vertical; }

/* the page against Chromium */
.g-conf { flex: 1; min-height: 0; overflow: auto; padding: 24px 24px 40px; background: var(--paper); }
.g-conf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: 1100px; margin-bottom: 12px; }
.g-conf-sum, .g-fuzz-sum { max-width: 1100px; margin: 0 0 12px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); font-variant-numeric: tabular-nums; }
.g-conf [data-part="table"] { max-width: 1100px; }
.g-conf td a { color: var(--ink); }
.g-fuzz { max-width: 1100px; margin-top: 28px; }
.g-fuzz-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.g-fuzz-head h2 { margin: 0 auto 0 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.g-fuzz-bar { height: 4px; border-radius: var(--r-press); background: var(--line-2); overflow: hidden; margin-bottom: 12px; }
.g-fuzz-bar > i { display: block; width: 0; height: 100%; background: var(--accent); }
.g-fuzz-fails { margin: 0; padding-left: 20px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-fuzz-fails li { margin-bottom: 4px; }
/* the frame Chromium draws the reference in: measured, and hidden from view */
.g-conf-frame { position: fixed; left: 0; top: 0; border: 0; opacity: 0; pointer-events: none; z-index: -1; }

@media (max-width: 1100px) {
  .g { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; align-content: start; overflow: auto; }
  .g-edit, .g-stage, .g-side { min-height: auto; }
  .g-edit { box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--line-2); }
  .g-source { flex: none; height: 260px; }
  .g-stage { min-height: auto; }
  /* stacked, each pane scrolls inside its own height */
  .g-panes { flex: none; grid-template-columns: minmax(0, 1fr); }
  .g-pane { min-height: auto; }
  .g-scroll { flex: none; height: 70vh; min-height: 360px; }
  .g-side { box-shadow: inset 0 var(--px) 0 var(--line-2); }
}