/* /gantt-chart-maker/ page styles. Built from /assets/polyatic.css tokens only (no new fonts or theme colours).
   Group colours on the bars are the visitor's own content (Okabe-Ito set), written into the SVG by gantt-core.js;
   on screen the chart's paper, grid and text follow the theme through the classes below. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.g-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.g-head .sub{margin-bottom:1rem}
@media(max-width:520px){.g-head h1{font-size:1.5rem;margin-bottom:0.125rem}.g-head .sub{font-size:0.875rem;margin-bottom:0.625rem}}
.g-page .k{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.g-h{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 0.375rem}

/* layout: phone = paste, chart, table, settings; desktop = paste + settings on the left, chart wide on the right */
.g-duo{display:grid;gap:0.875rem;align-items:start;grid-template-columns:minmax(0,1fr);grid-template-areas:"paste" "chart" "table" "side"}
.g-pastecard{grid-area:paste}.g-chartcard{grid-area:chart}.g-tablecard{grid-area:table}.g-side{grid-area:side}
@media(min-width:920px){.g-duo{grid-template-columns:minmax(17rem,21rem) minmax(0,1fr);grid-template-areas:"paste chart" "side chart" "side table";grid-template-rows:auto auto 1fr;gap:1.25rem 1.5rem}}
.g-pastecard,.g-chartcard,.g-tablecard,.g-side{min-width:0}
.g-pastecard,.g-side{display:grid;grid-template-columns:minmax(0,1fr);gap:0.625rem;align-content:start}
@media(max-width:520px){.g-pastecard,.g-chartcard,.g-tablecard,.g-side{padding:0.75rem}}

.g-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.g-help:empty{display:none}
.g-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.g-row .btn{flex:1 1 auto}
.g-row select{flex:1 1 7rem;min-width:0;width:auto}
.g-inline{font-size:0.8125rem;color:var(--muted)}
.g-side .field{display:grid;gap:0.5rem}
.g-side .field[hidden]{display:none}
.g-modes{margin-bottom:0}
.g-pdfrow select{flex:1 1 9rem}
.g-row input[type=text]{flex:1 1 12rem;min-width:0;font-family:var(--mono);font-size:0.75rem}

/* paste box */
.g-pastecard .field .head{margin-bottom:0.375rem}
.g-pastecard textarea{width:100%;height:6.25rem;min-height:4.5rem;resize:vertical;font-family:var(--mono);font-size:0.8125rem;line-height:1.5;white-space:pre;overflow-x:auto;tab-size:12}
@media(min-width:920px){.g-pastecard textarea{height:13rem}}
.g-pastecard .g-row select{flex:1 1 10rem}
.g-cols{font-size:0.8125rem;color:var(--ink-2)}
.g-cols summary{cursor:pointer;color:var(--muted);font-family:var(--mono);font-size:0.75rem;padding:0.25rem 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-cols[open] summary{white-space:normal}
.g-check{display:flex;gap:0.5rem;align-items:center;margin:0.375rem 0}
.g-colpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:0.5rem}
.g-colitem{display:grid;gap:0.25rem;min-width:0}
.g-colcap{font-family:var(--mono);font-size:0.6875rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-colitem select{padding:0.4375rem 0.5rem;font-size:0.8125rem}

.g-notice{margin:0 0 1rem;padding:0.75rem 0.875rem;border:1px solid var(--line-2);border-left:0.25rem solid var(--accent);border-radius:0.5rem;background:var(--accent-soft);font-size:0.875rem;line-height:1.5;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}
.g-notice[hidden]{display:none}
.g-notice .chip{padding:0.375rem 0.6875rem;font-size:0.8125rem}
.g-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}

/* chart */
.g-tools{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center;margin-bottom:0.5rem}
.g-tools .g-modes{flex:0 1 15rem}
@media(max-width:520px){.g-tools{flex-wrap:nowrap}.g-tools .g-modes{flex:1 1 auto}}
.g-tools .g-modes button{padding:0.375rem 0.5rem;font-size:0.8125rem}
.g-tools .chip{padding:0.375rem 0.625rem;font-size:0.8125rem}
@media(max-width:520px){.g-tools #expandall{display:none}}
.g-stage{border:1px solid var(--line);border-radius:0.5rem;background:var(--surface);overflow:auto;max-height:70vh;-webkit-overflow-scrolling:touch}
.g-stage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.g-svg{display:block;font-family:var(--sans)}
.g-svg .g-bg{fill:var(--surface)}
.g-svg .g-text{fill:var(--ink)}
.g-svg .g-muted{fill:var(--muted)}
.g-svg .g-grid{stroke:var(--line)}
.g-svg .g-off{fill:var(--surface-2)}
.g-svg .g-sum{fill:var(--ink);cursor:pointer}
.g-svg .g-crit{stroke:var(--ink)}
.g-svg .g-arrow{stroke:var(--muted)}
.g-svg .g-head{fill:var(--muted)}
.g-svg .g-carrow{stroke:var(--ink)}
.g-svg .g-chead{fill:var(--ink)}
.g-svg .g-pct{fill:#111312}
.g-svg .g-glabel,.g-svg .g-toggle{cursor:pointer}
.g-svg .g-glabel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.g-summary{margin:0.5rem 0 0;font-size:0.875rem;line-height:1.5;color:var(--ink)}
.g-legend{margin:0.25rem 0 0;font-size:0.75rem;line-height:1.6;color:var(--muted)}
.g-lg{display:inline-block;width:0.875rem;height:0.625rem;margin:0 0.25rem 0 0.375rem;vertical-align:baseline;border-radius:2px}
.g-lg:first-child{margin-left:0}
.g-lg-crit{border:2px solid var(--ink);background:var(--surface-2)}
.g-lg-ms{width:0.5625rem;height:0.5625rem;transform:rotate(45deg);background:var(--ink-2);border-radius:1px}
.g-lg-today{width:0;height:0.75rem;border-left:2px dashed var(--warn);border-radius:0}
.g-lg-off{background:var(--surface-2);border:1px solid var(--line)}
.g-crit{margin-top:0.75rem}
.g-crit ol{margin:0;padding-left:1.25rem;font-size:0.875rem;line-height:1.55;color:var(--ink)}
#fixfmt{margin-top:0.625rem}
#fixfmt[hidden]{display:none}
.g-issues{margin:0.5rem 0 0;padding-left:1.125rem;font-size:0.8125rem;line-height:1.5;color:var(--bad)}
.g-issues:empty{display:none}

/* table editor */
.g-tablewrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:0.5rem;margin-bottom:0.625rem}
.g-table{border-collapse:collapse;width:100%;min-width:52rem;font-size:0.8125rem}
.g-table th{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:0.375rem 0.375rem;background:var(--surface-2);border-bottom:1px solid var(--line)}
.g-table tbody th{text-transform:none;letter-spacing:0;text-align:right;width:2rem;background:transparent}
.g-table td{padding:0.1875rem;border-bottom:1px solid var(--line)}
.g-table input[type=text]{padding:0.375rem 0.4375rem;font-size:0.8125rem;border-radius:0.375rem}
.g-table .g-c-name{min-width:9rem}
.g-table .g-c-dur,.g-table .g-c-prog{width:4.5rem}
.g-table .g-c-start,.g-table .g-c-end{width:7.5rem}
.g-out{font-family:var(--mono);font-size:0.75rem;color:var(--muted);white-space:nowrap;padding:0 0.5rem}
.g-del{padding:0.25rem 0.5rem;font-size:0.875rem;line-height:1}

/* settings */
.g-off{display:flex;flex-wrap:wrap;gap:0.25rem 0.75rem;font-size:0.875rem;color:var(--ink-2)}
.g-off label{display:inline-flex;gap:0.3125rem;align-items:center}
.g-side textarea{min-height:4.5rem;height:4.5rem;font-size:0.8125rem}
.explainer code{font-family:var(--mono);font-size:0.8125rem}
.g-svg .g-today{stroke:var(--warn)}