/* What this is: shared-unit graph layouts and readable controls for families. */
#graphsDialog{width:min(860px,calc(100% - 20px));max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);overflow:auto;box-sizing:border-box;padding:clamp(12px,3vw,28px);color:var(--ice);background:var(--scene-panel);font-family:inherit;line-height:var(--studio-leading,1.55);}
#graphsDialog [lang],.graph-entry [lang],[data-graph-entry] [lang],[data-graph-notice] [lang]{display:block;}
#graphsDialog [lang=th],.graph-entry [lang=th]{letter-spacing:normal!important;word-spacing:normal!important;}
.graph-entry{margin:24px 0;padding:20px;border:1px solid var(--muted);border-radius:16px;}
.graph-heading,.graph-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0;}
.graph-heading h2{flex:1 1 220px;}
#graphsDialog button{font:inherit;min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;}
#graphsDialog button[aria-pressed=true]{outline:2px solid currentColor;outline-offset:2px;}
#graphsDialog input{font:inherit;padding:8px;min-width:0;width:7em;max-width:100%;box-sizing:border-box;}
#graphsDialog table{width:100%;border-collapse:collapse;margin:18px 0;}
#graphsDialog caption{text-align:start;font-weight:bold;}
#graphsDialog th,#graphsDialog td{text-align:start;border-bottom:1px solid var(--muted);padding:8px;overflow-wrap:anywhere;}
#graphsDialog td{width:25%;font-variant-numeric:tabular-nums;}
#graphAxis{position:relative;margin:28px 12px 12px;height:2em;border-bottom:2px solid currentColor;font-size:.75em;}
#graphAxis span{position:absolute;bottom:0;transform:translateX(-50%);padding-bottom:8px;white-space:nowrap;width:max-content;word-break:normal;}
#graphAxis span::after{content:"";position:absolute;left:50%;bottom:0;height:8px;border-left:1px solid currentColor;}
.graph-row{margin:16px 12px;}
.graph-row p{margin:4px 0;}
.graph-track{height:30px;border-left:2px solid currentColor;border-bottom:1px solid currentColor;background:repeating-linear-gradient(to right,transparent 0,transparent calc(100% / var(--graph-max) - 1px),var(--muted) calc(100% / var(--graph-max) - 1px),var(--muted) calc(100% / var(--graph-max)));}
.graph-bar{display:block;height:24px;background:var(--ice);}
.graph-pictures{display:flex;height:auto;min-height:30px;flex-wrap:wrap;background:none;gap:5px;padding-left:4px;}
.graph-token{display:inline-block;font-size:1em;line-height:1.5;}
#graphForm{border:1px solid var(--muted);padding:12px;border-radius:12px;}
#graphPrompt{font-weight:600;}
.graph-build-row{margin:14px 0;}
#graphFeedback:empty,#graphHelp:empty{display:none;}
#graphFeedback,#graphHelp{border-left:3px solid currentColor;padding:12px;overflow-wrap:anywhere;}
.graph-scene{border-top:1px solid var(--muted);margin-top:20px;}
.graph-scene img{display:block;object-fit:contain;width:min(220px,100%);height:180px;margin:auto;}
@media(max-width:450px){#graphAxis{font-size:.62em;}#graphsDialog .graph-build-row input{width:4em;}#graphsDialog td{width:30%;}}
@media(forced-colors:active){#graphsDialog{background:Canvas;color:CanvasText;}.graph-bar{background:CanvasText;}.graph-track{background:none;}}
@media print{#graphsDialog,.graph-entry,[data-graph-entry],[data-graph-notice],[data-graph-retry]{display:none!important;}}

#graphsDialog select{font:inherit;min-height:44px;max-width:100%;padding:8px;box-sizing:border-box;}
#graphSelect{display:block;width:100%;margin:8px 0 16px;}
.graph-sort-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;margin:12px 0;padding:8px;border-bottom:1px solid var(--muted);}
@media(max-width:450px){.graph-sort-row{grid-template-columns:minmax(0,1fr);}}