/* Shared styles for every Gamedev Quick Tools page.
   Rules used by only one page live in that page's inline <style>. */

:root{
  /* Palette (dark only): page background, panels, inset areas (inputs, drop zones, code, canvas
     checkerboards), borders, text, muted text, amber accent and the text on it. --good and --bad are
     status colours (loaded files, valid and invalid moves). States derive from these with color-mix. */
  --bg:#121212; --surface:#1a1a1a; --inset:#101010; --line:#2c2c2c; --ink:#ececec; --muted:#9c9c9c;
  --accent:#f2a93b; --on-accent:#1a1203; --good:#4cd1a1; --bad:#ff6b7d; --shadow:rgba(0,0,0,.55);
  --line-hover:color-mix(in srgb,var(--muted) 45%,var(--line));
  --accent-hover:color-mix(in srgb,var(--accent) 86%,var(--ink));
  --accent-active:color-mix(in srgb,var(--accent) 82%,var(--bg));
  --disabled-opacity:.65;
  /* Compact density and shapes: base text size and line height, control height, base gap, panel
     padding, and corners (3px on controls, 4px on panels and cards; no pill or round shapes) */
  --fs:13.5px; --lh:1.5; --control-h:32px; --gap:10px; --pad:16px; --r-ctl:3px; --r-panel:4px;
  /* Page layout: content column width, side gutter, and the two side areas reserved for sticky ad
     rails that will be added later. The rails stay empty until ads go live. */
  /* Fonts: --font-sans for headings and text, --font-mono for data (labels, numbers, readouts) */
  --font-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Fragment Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  --content-max:1280px; --rail-width:160px; --rail-gap:24px; --gutter:32px;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}

/* Self-hosted fonts (SIL Open Font License; licences in fonts/). Schibsted Grotesk is one variable
   latin-subset file (weights 400 to 900) for headings and text; Fragment Mono 400 is for data. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("fonts/schibsted-grotesk-latin.woff2") format("woff2")}
@font-face{font-family:"Fragment Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/fragment-mono-latin-400.woff2") format("woff2")}

/* Base */
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:var(--fs);font-weight:400;
  line-height:var(--lh)}
/* Desktop-first page grid: [side area] [content] [side area]. The side areas are real grid
   columns kept empty for the future ad rails. From 1500px they reserve --rail-width + --rail-gap
   each; below that they collapse and the content uses the window width up to --content-max. */
body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--content-max)) minmax(0,1fr)}
body>header.site,body>main{grid-column:2;min-width:0}
@media(min-width:1500px){
  body{grid-template-columns:minmax(calc(var(--rail-width) + var(--rail-gap)),1fr) minmax(0,var(--content-max)) minmax(calc(var(--rail-width) + var(--rail-gap)),1fr)}
}
@media(max-width:700px){:root{--gutter:18px}}
main{padding:20px var(--gutter) 40px}
h1,h2,h3,.brand{font-family:var(--font-sans);font-weight:700;letter-spacing:-.02em}
h1{font-size:2.4em;line-height:1.1;margin:0 0 8px}
h2{font-size:1.1em;line-height:1.3;margin:24px 0 6px}
h3{font-size:1em;line-height:1.3;margin:18px 0 4px}
p{margin:0 0 10px}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:2px}
::selection{background:var(--accent);color:var(--on-accent)}
.lede{color:var(--muted);font-size:1.1em}
/* Data in the mono font: readouts, statistics, status lines, file names, numbers and code */
.data,.fstatus,.file-name,.file-info strong,.file-info span,output,input[type=number],code,pre,kbd{font-family:var(--font-mono);font-weight:400;font-variant-numeric:tabular-nums}
code,pre{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl)}
code{padding:1px 4px}
pre{padding:var(--gap);overflow:auto}

/* Tool panels and form controls */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:var(--pad);margin-top:16px}
.panel.dragging{outline:2px dashed var(--accent);outline-offset:-8px;background:var(--inset)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
/* A single row of three fields at every width */
.grid.grid3,.ws-export .grid.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid+.grid3{margin-top:var(--gap)}
/* Field labels above inputs: small uppercase mono. Checkbox and option labels stay in the sans font. */
label{display:block;font-family:var(--font-mono);font-size:.7em;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
/* Field labels stay on one line; shorten the visible text (full wording as title and aria-label) if needed */
label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.checks label,.anim-ctl label{font-family:var(--font-sans);font-size:1em;text-transform:none;letter-spacing:normal;white-space:normal;overflow:visible}
input[type=number],input[type=text],select{width:100%;height:var(--control-h);font:inherit;color:var(--ink);background:var(--inset);
  border:1px solid var(--line);border-radius:var(--r-ctl);padding:0 8px}
input[type=number]{font-family:var(--font-mono)}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
select,input[type=checkbox],input[type=range]{cursor:pointer}
select:hover:not(:disabled),input[type=number]:hover:not(:disabled),input[type=text]:hover:not(:disabled){border-color:var(--line-hover)}
input[type=checkbox],input[type=range]{accent-color:var(--accent)}
input:disabled,select:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.checks{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.checks label{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink);cursor:pointer}
.sub{color:var(--muted);margin-top:6px}
.primary{font:inherit;font-weight:600;text-transform:none;letter-spacing:normal;display:inline-flex;align-items:center;justify-content:center;height:var(--control-h);line-height:1;background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r-ctl);padding:0 14px;cursor:pointer;margin-top:12px}
.primary:hover:not(:disabled){background:var(--accent-hover)}
.primary:active:not(:disabled){background:var(--accent-active)}
.primary:disabled,.chipbtn:disabled,.tab:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
/* Shared classes such as .checks set display, which would override the hidden attribute */
.panel [hidden]{display:none}
.sec-h{font-size:1em;margin:20px 0 6px}
.warn{border-left:3px solid var(--accent);padding-left:10px;color:var(--ink)}
/* Row of fields with one wide and two narrow columns (single column on phones) */
.field-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:end}
.field-row select,.field-row input{height:var(--control-h)}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}

/* Tabs (pressed state shows the active one) */
.tabs{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.tab{font:inherit;font-weight:500;display:inline-flex;align-items:center;height:var(--control-h);padding:0 12px;border-radius:var(--r-ctl);border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.tab:hover:not(:disabled){border-color:var(--accent)}
.tab[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tabs+.panel{margin-top:10px}

/* Image preview on a checkerboard */
.checker{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:auto;max-height:480px;background:repeating-conic-gradient(var(--inset) 0 25%,var(--surface) 0 50%) 0 0/16px 16px}
.checker canvas{display:block;max-width:100%;height:auto}
/* Zoomable preview: the canvas keeps its own size and the box scrolls */
.checker.zoom{width:fit-content;max-width:100%}
.checker.zoom canvas{max-width:none}

/* List of loaded files: thumbnail, name and details, Remove button */
.file-list{list-style:none;margin:10px 0 0;padding:0}
.file-list li{display:flex;align-items:center;gap:var(--gap);padding:6px 0;border-top:1px solid var(--line)}
.file-list li:last-child{border-bottom:1px solid var(--line)}
.file-list canvas{flex-shrink:0;display:block;border:1px solid var(--line);border-radius:var(--r-ctl);background:repeating-conic-gradient(var(--inset) 0 25%,var(--surface) 0 50%) 0 0/10px 10px}
.file-info{flex:1;min-width:0}
.file-info strong{display:block;overflow-wrap:anywhere}
.file-info span{color:var(--muted);font-size:.85em}
.file-list .chipbtn{margin:0}
.file-list.scroll{max-height:360px;overflow-y:auto}
.file-list li.selected{background:var(--inset);box-shadow:inset 3px 0 0 var(--accent)}
.file-name{display:block;padding:0;border:0;background:none;font:inherit;font-family:var(--font-mono);color:var(--ink);text-align:left;overflow-wrap:anywhere;cursor:pointer}
.file-name:hover{color:var(--accent)}

/* File picker bar */
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.vh:focus-visible+label{outline:2px solid var(--accent);outline-offset:1px}
canvas[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.filebar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 10px;margin-top:6px;background:var(--inset)}
.filebar.loaded{border-color:var(--good)}
.btnlike{margin:0;display:inline-flex}
.fstatus{color:var(--muted);overflow-wrap:anywhere}
.filebar.loaded .fstatus{color:var(--good)}
.chipbtn{font:inherit;font-weight:500;display:inline-flex;align-items:center;justify-content:center;height:var(--control-h);line-height:1;padding:0 10px;border-radius:var(--r-ctl);border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;margin-left:auto}
.chipbtn:hover:not(:disabled){border-color:var(--accent)}

/* Row of download buttons on the tool pages */
.dl-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap);margin-top:12px}
.dl-row .primary{margin-top:0}
.dl-row .chipbtn{margin:0}

/* Drag to reorder (GQT.dragReorder in script.js): drop marker, no text selection while dragging,
   and lifted rows in a sortable file list */
.fdrop{border:2px dashed var(--accent);border-radius:var(--r-ctl);background:var(--inset)}
.fdrop.out{opacity:.35}
.frame-dragging,.frame-dragging *{user-select:none;-webkit-user-select:none;cursor:grabbing}
.file-list.sortable li{cursor:grab;-webkit-touch-callout:none}
.file-list li.lifted{position:fixed;z-index:20;margin:0;padding:8px 10px;cursor:grabbing;background:var(--surface);border:1px solid var(--accent);border-radius:var(--r-ctl);box-shadow:0 10px 24px var(--shadow)}
.file-list li.fdrop{padding:0;border:2px dashed var(--accent)}

/* Smaller bordered box inside a tool panel (the atlas packer's Selected sprite panel) */
.subpanel{margin-top:12px;padding:12px 14px 14px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--bg)}
.subpanel>.sec-h:first-child{margin-top:0}

/* Home page tool cards: a grid of cards (three across on desktop, one on phones) */
.tools{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.tools li{display:flex}
.tools a{display:block;flex:1;padding:var(--pad);text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel)}
.tools a:hover{border-color:var(--accent)}
.tools strong{display:block;font-size:1.15em;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.tools span{color:var(--muted)}
.tools a:hover strong{color:var(--accent)}

/* Tool workspace: from 900px the panel is a grid with the areas "controls preview" / "export preview".
   The settings (.ws-controls) and the Export panel (.ws-export) stack in the left column, with Export
   directly under the settings; the preview (.ws-output) is the right column alone, spanning both rows
   and aligned to the top. .ws-main has display:contents there, so its two children take part in the
   panel's grid while the DOM order stays settings, preview, export. Below 900px everything stacks in
   that order. */
.ws-export{margin-top:16px;padding:var(--pad);border:1px solid var(--line);border-radius:var(--r-panel);background:var(--bg);container-type:inline-size}
.ws-export>.sec-h:first-child{margin-top:0}
.ws-export>.primary:first-of-type{margin-top:4px}
/* Export fields: four in a row when the panel is wide enough, otherwise two per row (one on phones) */
@container (min-width:680px){.ws-export .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px){
  .workspace:not([hidden]){display:grid;grid-template-columns:minmax(340px,380px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"controls preview" "export preview";column-gap:24px;row-gap:16px}
  .workspace>.ws-main{display:contents}
  .ws-controls{grid-area:controls;min-width:0}
  .ws-output{grid-area:preview;align-self:start;min-width:0}
  .ws-export{grid-area:export;align-self:start;margin-top:0}
  .ws-output>:first-child{margin-top:0}
  .workspace .checker{max-height:72vh;width:fit-content;max-width:100%}
  .workspace .checker:not(.zoom) canvas{width:auto;height:auto;max-width:100%;max-height:70vh}
}

/* Ad slots and footer */
.ad{margin:40px 0;min-height:96px;border:1px dashed var(--line);border-radius:var(--r-panel);display:flex;
  align-items:center;justify-content:center;color:var(--muted);font-size:.85em}
.ad[hidden]{display:none}
footer{margin-top:36px;color:var(--muted);font-size:.85em}
.footer-links{margin:6px 0 0}
/* Footer links (the shared Privacy link): quiet at rest, text colour with a thin underline on hover and focus.
   The focus ring comes from a:focus-visible. Other links keep their own style. */
.footer-links a,.footer-links a:visited{color:var(--muted);text-decoration:none;font-weight:400}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--ink);text-decoration:underline 1px;text-underline-offset:3px}
/* "Clear saved work" (session persistence): a text button styled like the footer link, shown only while
   this tab has saved work. The focus ring comes from button:focus-visible. */
.footer-clear{margin-left:14px;padding:0;border:0;background:none;font:inherit;color:var(--muted);text-decoration:none;cursor:pointer}
.footer-clear:hover,.footer-clear:focus-visible{color:var(--ink);text-decoration:underline 1px;text-underline-offset:3px}

/* Site header. The nav is a row on wide screens (wrapping as tools are added)
   and a menu button under 640px. Without JS the button stays hidden and the
   links show as a wrapping list. */
header.site{display:flex;align-items:center;gap:8px 18px;padding:18px var(--gutter) 0}
.brand{color:var(--ink);text-decoration:none;font-size:1.1em;flex-shrink:0}
.site-nav{flex:1 1 0;min-width:0}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 16px}
.site-nav a{color:var(--muted);text-decoration:none}
.brand:hover,.site-nav a:hover{color:var(--accent)}
.site-nav a[aria-current]{color:var(--ink);text-decoration:underline 2px var(--accent);text-underline-offset:6px}
.nav-toggle{display:none;align-items:center;gap:8px;margin-left:auto;font:inherit;font-weight:500;height:var(--control-h);padding:0 10px;border-radius:var(--r-ctl);
  border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.nav-toggle:hover{border-color:var(--accent)}
@media(max-width:640px){
  header.site{flex-wrap:wrap}
  .site-nav{order:3;flex-basis:100%}
  .site-nav ul{justify-content:flex-start}
  .js .nav-toggle{display:inline-flex}
  .js .site-nav{display:none}
  .js .site-nav.open{display:block}
  .js .site-nav ul{flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
  .js .site-nav li+li{border-top:1px solid var(--line)}
  .js .site-nav a{display:block;padding:9px 12px}
}