/* /gallery/ and /gallery/<slug>/: the card grid and the toolbar of one page. The view itself is assets/viewer/view.css.
   Sizes only from the scale of polish.css (--fs-xs, --fs-sm, --fs-body, --fs-lead, --fs-h1). */
#gmsg{margin:0;font-size:var(--fs-sm);line-height:1.5}
/* the raw layout gives the page no container: the same width as wire's pages */
#app{max-width:1120px;margin:0 auto;padding:var(--space-lg,1.5rem) var(--space-md,1rem)}
#app>h1{font-size:var(--fs-h1);line-height:1.15;margin:.1em 0 .25em}
#app>.lead{font-size:var(--fs-lead);line-height:1.5;margin:0 0 8px;max-width:60ch}
#gnote{margin:0 0 20px;font-size:var(--fs-sm);color:var(--mut)}
.gback{margin:0;font-size:var(--fs-sm)}
.gback a::before{content:"\2190\00a0"}
/* text links follow the link colour of the site (raw layout has no wire link rule); AA in light and dark */
main a:not([class]){color:var(--link);text-underline-offset:2px}
main a:not([class]):hover{color:var(--link-hover)}

/* the card grid: one plain link per test page; image, title, one sentence */
.gcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));gap:20px}
.gcard{margin:0;min-width:0}
.gcard a{display:flex;flex-direction:column;height:100%;box-sizing:border-box;color:var(--fg);text-decoration:none;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius,10px);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.gcard a:hover{border-color:var(--acc);box-shadow:var(--lift,0 6px 18px var(--shadow));transform:translateY(-2px)}
.gcard a:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
.gthumb{display:block;aspect-ratio:4/3;background:var(--bg-subtle);border-bottom:1px solid var(--border);overflow:hidden}
.gthumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;max-width:none}
.gct{display:block;padding:14px 16px 4px;font-size:var(--fs-body);font-weight:600;line-height:1.3}
.gcs{display:block;padding:0 16px 16px;font-size:var(--fs-sm);line-height:1.45;color:var(--mut)}
.gmore{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}

/* the side sheet of one page: a light data table (fields down, pipelines across; the head of a column picks the pipeline), the licence in one line below */
.gtool{margin:12px 0 0;display:grid;gap:8px;min-width:0;max-width:100%}
.gtool>*{min-width:0}
.gmxw{overflow-x:auto;width:fit-content;max-width:100%;border:0;background:none}
.gmxw:focus-visible{outline:3px solid var(--fg);outline-offset:1px}
.gmx{border-collapse:collapse;border-spacing:0;font-size:var(--fs-xs);line-height:1.3;width:max-content!important;min-width:0;margin:0!important;border:0!important;background:none!important}
.gmx th,.gmx td{text-transform:none;letter-spacing:0;font-family:var(--sans);padding:3px 10px 3px 0;text-align:left;vertical-align:top;border:0;border-bottom:1px solid var(--border);white-space:nowrap;background:none}
.gmx thead,.gmx tbody,.gmx tr{border:0!important;background:none}
.gmx td{padding-left:10px;white-space:normal;overflow-wrap:anywhere;min-width:5rem;max-width:18rem}
.gmx tbody tr:last-child th,.gmx tbody tr:last-child td{border-bottom:0}
.gmx tbody th{font-weight:400;color:var(--mut);position:sticky;left:0;z-index:1;background:var(--bg)}
.gmx thead th{font-weight:600;vertical-align:bottom;padding:0;border-bottom:1px solid var(--fg)}
.gmx thead th:first-child{position:sticky;left:0;z-index:2;background:var(--bg);padding:3px 10px 3px 0;font-weight:400;vertical-align:middle}
.gmx thead th:first-child a{white-space:normal;display:inline-block;min-width:7rem}
.gmx thead button{display:block;width:100%;border:0;border-bottom:2px solid transparent;border-radius:0;padding:4px 10px;min-height:44px;font:600 var(--fs-xs) var(--sans);background:transparent;color:var(--fg);cursor:pointer;text-align:left;white-space:nowrap}
.gmx thead button:hover{background:var(--bg-subtle)}
.gmx thead button:focus-visible{outline:3px solid var(--fg);outline-offset:-3px}
.gmx thead button[aria-pressed="true"]{border-bottom-color:var(--acc);color:var(--fg)}
@media (max-width:600px){.gmxw .gmx tbody th,.gmxw .gmx thead th:first-child{white-space:normal;width:6.5rem;min-width:6.5rem;max-width:6.5rem;padding-right:6px;overflow-wrap:anywhere}.gmx thead th:first-child a{min-width:0}.gmx td{padding-left:8px}.gmx.gone{width:100%!important}.gmx.gone td{max-width:none;min-width:0}}
.gmx td.graw{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:.92em;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
.gmx td.sel{background:color-mix(in srgb,var(--acc) 8%,var(--bg))}
.gmx td.gdash{color:var(--mut)}
.glic{margin:0;line-height:1.5;overflow-wrap:anywhere}
.glic details{display:inline}
.glic summary{display:inline;cursor:pointer}
.glic .gll{color:var(--mut)}
.glic details p{margin:6px 0 0;color:var(--mut)}
.glic>a{margin-left:12px}
.glic summary:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
.gph{border:1px solid var(--border);border-left:4px solid var(--cta);padding:8px 14px;margin:8px 0 0;font-size:var(--fs-sm);line-height:1.45}
@media (max-width:480px){.gcards{gap:14px}}

/* the view: the control bar and the tabs as quiet segments, the page and the answer as two hairline cards */
.ov-g .ov-side{border-bottom:1px solid var(--border);padding:14px 0 10px}
.ov-play{border-radius:8px;font-weight:500;padding:6px 18px}
.ov-count{font:400 var(--fs-xs) var(--font-accent,var(--sans));letter-spacing:.06em}
.ov-g .ov-steps li.cur{background:var(--bg-subtle);border-radius:0;border-top:1px solid var(--border)}
.ov-tablist{gap:2px;border:1px solid var(--border);border-radius:8px;background:var(--bg-subtle);padding:3px;width:fit-content;max-width:100%}
.ov-tablist button{min-height:34px;padding:4px 14px;border:0;border-radius:6px;font:500 var(--fs-sm) var(--sans)}
.ov-tablist button:hover{background:var(--bg)}
.ov-tablist button[aria-selected="true"]{background:var(--bg);color:var(--fg);border:0;box-shadow:0 1px 3px var(--shadow)}
.ov-panel{border-radius:0;border-color:var(--border)}
.ov-page{border-color:var(--border);box-shadow:0 6px 18px var(--shadow)}
.gmx td.gnone{color:var(--fg);font-style:italic}
.gmx thead th.gnone button{cursor:default;color:var(--mut)}