/* axi0 Web builder (/code/build/): the first state, on top of /slides/slides.css (the family look: colours, header,
   buttons, the Key card, the footer). No inline styles in the markup (the page runs under style-src 'self'); the editor
   brings its own sheet (build-editor.css) when it loads. */
main { max-width: 1280px; }
.is-editing .intro, .is-editing .mode, .is-editing #keycard, .is-editing .sites, .is-editing .tpls { display: none; }
.is-editing main { max-width: none; padding-left: 12px; padding-right: 12px; }
.is-editing .foot .clause, .is-editing .foot > p:last-child { display: none; }

/* the sites under the Key */
.sites { margin-top: 22px; }
.sites h2, .tpls h2 { margin: 0 0 12px; }
.site-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-btn {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: center; width: 100%; min-height: 64px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--head); font: inherit; text-align: left; cursor: pointer;
}
.site-btn:hover { border-color: var(--line3b); }
.swatch { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line2); background: var(--field); position: relative; overflow: hidden; }
.swatch::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 9px; height: 8px; border-radius: 4px; background: var(--sw-accent, var(--core)); }
.site-btn .dt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-btn .dm { color: var(--mute); font-size: 13px; }

/* the templates */
.tpls { margin-top: 26px; }
.tpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tpl {
  display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; padding: 12px 12px 16px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); color: var(--head); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s;
}
.tpl:hover { border-color: var(--line3b); }
.tpl:disabled { opacity: .6; cursor: progress; }
.tpl-n { margin-top: 4px; font-weight: 600; font-size: 15px; }
.tpl-a { color: var(--mute); font-size: 13px; line-height: 1.45; }
.tpl-hint { max-width: 60em; margin-top: 14px; }

/* a sketch of each template, drawn with five boxes */
.tpl-art { display: grid; gap: 5px; height: 112px; padding: 10px; border-radius: 12px; background: var(--field); border: 1px solid var(--line2); grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; }
.tpl-art i { display: block; border-radius: 4px; background: var(--line2); }
.tpl-art i:nth-child(2) { background: var(--line3b); }
.tpl-art i:nth-child(3) { background: var(--core); opacity: .85; }
.art-bio { grid-template-rows: repeat(6, 1fr); }
.art-bio i:nth-child(1) { grid-column: 6 / span 2; grid-row: 1 / span 2; border-radius: 50%; }
.art-bio i:nth-child(2) { grid-column: 4 / span 6; grid-row: 3; }
.art-bio i:nth-child(3) { grid-column: 4 / span 6; grid-row: 4; }
.art-bio i:nth-child(4) { grid-column: 4 / span 6; grid-row: 5; }
.art-bio i:nth-child(5) { grid-column: 4 / span 6; grid-row: 6; }
.art-portfolio { grid-template-rows: repeat(4, 1fr); }
.art-portfolio i:nth-child(1) { grid-column: 1 / span 7; grid-row: 1; }
.art-portfolio i:nth-child(2) { grid-column: 9 / span 4; grid-row: 1 / span 2; }
.art-portfolio i:nth-child(3) { grid-column: 1 / span 4; grid-row: 3 / span 2; }
.art-portfolio i:nth-child(4) { grid-column: 5 / span 4; grid-row: 3 / span 2; }
.art-portfolio i:nth-child(5) { grid-column: 9 / span 4; grid-row: 3 / span 2; }
.art-shop { grid-template-rows: repeat(4, 1fr); }
.art-shop i:nth-child(1) { grid-column: 1 / span 12; grid-row: 1 / span 2; }
.art-shop i:nth-child(2) { grid-column: 1 / span 4; grid-row: 3 / span 2; }
.art-shop i:nth-child(3) { grid-column: 5 / span 4; grid-row: 3 / span 2; }
.art-shop i:nth-child(4) { grid-column: 9 / span 4; grid-row: 3 / span 2; }
.art-shop i:nth-child(5) { display: none; }
.art-journal { grid-template-rows: repeat(6, 1fr); }
.art-journal i:nth-child(1) { grid-column: 3 / span 8; grid-row: 1 / span 2; }
.art-journal i:nth-child(2) { grid-column: 3 / span 6; grid-row: 3; }
.art-journal i:nth-child(3) { grid-column: 3 / span 3; grid-row: 4; }
.art-journal i:nth-child(4) { grid-column: 3 / span 6; grid-row: 5; }
.art-journal i:nth-child(5) { grid-column: 3 / span 8; grid-row: 6; }
.art-event { grid-template-rows: repeat(4, 1fr); }
.art-event i:nth-child(1) { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.art-event i:nth-child(2) { grid-column: 9 / span 4; grid-row: 1 / span 2; }
.art-event i:nth-child(3) { grid-column: 1 / span 3; grid-row: 3; }
.art-event i:nth-child(4) { grid-column: 1 / span 6; grid-row: 4; }
.art-event i:nth-child(5) { grid-column: 7 / span 6; grid-row: 3 / span 2; }
.art-landing { grid-template-rows: repeat(4, 1fr); }
.art-landing i:nth-child(1) { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.art-landing i:nth-child(2) { grid-column: 9 / span 4; grid-row: 1 / span 3; }
.art-landing i:nth-child(3) { grid-column: 1 / span 3; grid-row: 3; }
.art-landing i:nth-child(4) { grid-column: 1 / span 4; grid-row: 4; }
.art-landing i:nth-child(5) { grid-column: 5 / span 4; grid-row: 4; }
.art-blank i { display: none; }
.art-blank { background-image: radial-gradient(var(--line2) 1px, transparent 1.2px); background-size: 14px 14px; }

/* the editor's place: empty until the editor loads; while it loads the template buttons wait */
.editor-root { margin-top: 8px; }
.is-loading .tpl, .is-loading .site-btn { pointer-events: none; }

@media (max-width: 600px) {
  .tpl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tpl { padding: 8px 8px 12px; border-radius: 14px; }
  .tpl-art { height: 84px; padding: 7px; gap: 4px; }
  .tpl-a { font-size: 12.5px; }
  .site-list { grid-template-columns: minmax(0, 1fr); }
}