/* global */
body {
    background: #000 no-repeat center center;
    background-image: url("daniel-leone-v7daTKlZzaw-unsplash.jpg");
    background-size: cover;
    background-attachment: fixed;
    font-family: arial;
}
body.drag {
    cursor: grabbing;
}
a {
    color: inherit;
}

/* canvas */
main {
    display: grid;
    grid-template-columns: repeat(10, auto) 1fr;
    grid-gap: 10px;
}

/* stage */
main > section {
    box-shadow: 2px 0px 4px #0001;
    padding: 20px;
    counter-reset: cards;
    background-color: #fff2;
    border-radius: 4px;

    display: grid;
    grid-template-columns: 200px;
    grid-auto-rows: 200px;
    grid-template-rows: min-content repeat(4, 200px); /* show at least 4 rows for drop target */
    grid-gap: 20px;
}
main > section > header {
    height: 2em;
    background-color: #0006;
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px 0px;

    grid-row-start: 1;
    grid-column: 1 / -1;
}
main > section > header > a {
    margin-right: .5em;
    padding: 2px;
    background-color: #3b9d82;
    border-radius: 50%;
    color: #fff;
    box-shadow: 1px 1px 2px #0003;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;

    font-weight: bold;
    text-decoration: none;
    text-align: center;
}
main > section > header > a + a {
    background-color: #993a3a;
    display: none;
}
main > section.drag > header > a, main[data-readonly] > section > header > a {
    display: none;
}
main:not([data-readonly]) > section.drag > header > a + a {
    display: inline-block;
}
main > section > header > h1 {
    margin: 0 0 20px 0;
    border-bottom: 2px solid #0001;
    display: inline-block;
    font-size: 1em;
}
main > section:after {
    content: "(" counter(cards) ")";
    position: absolute;
    top: 3.2em;
    margin-left: 170px;
    color: #ccc;
    font-size: .8em;
}
main > section[data-limit]:after {
    content: "(" counter(cards) "/" attr(data-limit) ")";
}
section[data-limit="1"] {
    grid-template-rows: min-content repeat(1, 200px);
}
section[data-limit="2"] {
    grid-template-rows: min-content repeat(2, 200px);
}
section[data-limit="3"] {
    grid-template-rows: min-content repeat(3, 200px);
}
section[data-columns="2"] {
    grid-template-columns: repeat(2, 200px);
}
section[data-columns="3"] {
    grid-template-columns: repeat(3, 200px);
}
section[data-columns="4"] {
    grid-template-columns: repeat(4, 200px);
}
section[data-columns="5"] {
    grid-template-columns: repeat(5, 200px);
}
section[data-columns="6"] {
    grid-template-columns: repeat(6, 200px);
}
section[data-columns="7"] {
    grid-template-columns: repeat(7, 200px);
}
section[data-columns="8"] {
    grid-template-columns: repeat(8, 200px);
}
section[data-columns="9"] {
    grid-template-columns: repeat(9, 200px);
}

/* card */
article {
    background-color: #f7f3add1;
    box-shadow: 3px 3px 10px #0001;
    counter-increment: cards;
    overflow: hidden;
    overflow-wrap: break-word;
    border: 20px solid #0000;
    transition: .1s ease;
    transition-property: transform, box-shadow;
    backface-visibility: hidden;
    border-top: 0;
    padding-top: 20px;
    grid-column: var(--x);
    grid-row: calc(var(--y) + 1);
}
body:not(.drag) article[draggable] {
    cursor: pointer;
}
body:not(.drag) article[draggable]:hover {
    transform: scale(1.12);
    box-shadow: 3px 3px 20px #0006;
}
article[data-x]:hover::before {
    counter-reset: x var(--x);
    content: "#" counter(x, upper-alpha) attr(data-y);
    float: right;
    position: relative;
    top: -14px;
    height: 0px;
    font-size: 11px;
    font-family: monospace;
    letter-spacing: 1px;
    opacity: .5;
}
article h1 {
    font-size: 1.17em;
    margin: 0;
}
article p {
    margin: 1em 0 0 0;
}
article ul {
    padding: 0 0 0 1em;
    list-style: square;
}
article blockquote {
    margin: 0;
    border: 0 solid #0004;
    border-left-width: .2em;
    padding: 0 0 0 .8em;
}
article hr {
    border: 0 solid #0004;
    border-top-width: .15em;
    margin: 1em 0;
}
article.placeholder {
    opacity: .5;
    counter-increment: none;
}
article[data-color="green"], input[value="green"]:checked ~ article:last-of-type {
    background-color: #a8db6bd1;
}
article[data-color="blue"], input[value="blue"]:checked ~ article:last-of-type {
    background-color: #bcd7dfd1;
}
article[data-x="1"] {
    --x: 1;
}
article[data-x="2"] {
    --x: 2;
}
article[data-x="3"] {
    --x: 3;
}
article[data-x="4"] {
    --x: 4;
}
article[data-x="5"] {
    --x: 5;
}
article[data-x="6"] {
    --x: 6;
}
article[data-x="7"] {
    --x: 7;
}
article[data-x="8"] {
    --x: 8;
}
article[data-x="9"] {
    --x: 9;
}
article[data-y="1"] {
    --y: 1;
}
article[data-y="2"] {
    --y: 2;
}
article[data-y="3"] {
    --y: 3;
}
article[data-y="4"] {
    --y: 4;
}
article[data-y="5"] {
    --y: 5;
}
article[data-y="6"] {
    --y: 6;
}
article[data-y="7"] {
    --y: 7;
}
article[data-y="8"] {
    --y: 8;
}
article[data-y="9"] {
    --y: 9;
}
article[data-y="10"] {
    --y: 10;
}
article[data-y="11"] {
    --y: 11;
}
article[data-y="12"] {
    --y: 12;
}
article[data-y="13"] {
    --y: 13;
}
article[data-y="14"] {
    --y: 14;
}
article[data-y="15"] {
    --y: 15;
}
article[data-y="16"] {
    --y: 16;
}
article[data-y="17"] {
    --y: 17;
}
article[data-y="18"] {
    --y: 18;
}
article[data-y="19"] {
    --y: 19;
}
article[data-y="20"] {
    --y: 20;
}
article[data-y="21"] {
    --y: 21;
}
article[data-y="22"] {
    --y: 22;
}
article[data-y="23"] {
    --y: 23;
}
article[data-y="24"] {
    --y: 24;
}
article[data-y="25"] {
    --y: 25;
}
article[data-y="26"] {
    --y: 26;
}
article[data-y="27"] {
    --y: 27;
}
article[data-y="28"] {
    --y: 28;
}
article[data-y="29"] {
    --y: 29;
}
article[data-y="30"] {
    --y: 30;
}
article[data-y="31"] {
    --y: 31;
}
article[data-y="32"] {
    --y: 32;
}
article[data-y="33"] {
    --y: 33;
}
article[data-y="34"] {
    --y: 34;
}
article[data-y="35"] {
    --y: 35;
}
article[data-y="36"] {
    --y: 36;
}
article[data-y="37"] {
    --y: 37;
}
article[data-y="38"] {
    --y: 38;
}
article[data-y="39"] {
    --y: 39;
}
article[data-y="40"] {
    --y: 40;
}
article[data-y="41"] {
    --y: 41;
}
article[data-y="42"] {
    --y: 42;
}
article[data-y="43"] {
    --y: 43;
}
article[data-y="44"] {
    --y: 44;
}
article[data-y="45"] {
    --y: 45;
}
article[data-y="46"] {
    --y: 46;
}
article[data-y="47"] {
    --y: 47;
}
article[data-y="48"] {
    --y: 48;
}
article[data-y="49"] {
    --y: 49;
}
article[data-y="50"] {
    --y: 50;
}
article[data-y="51"] {
    --y: 51;
}
article[data-y="52"] {
    --y: 52;
}
article[data-y="53"] {
    --y: 53;
}
article[data-y="54"] {
    --y: 54;
}
article[data-y="55"] {
    --y: 55;
}
article[data-y="56"] {
    --y: 56;
}
article[data-y="57"] {
    --y: 57;
}
article[data-y="58"] {
    --y: 58;
}
article[data-y="59"] {
    --y: 59;
}
article[data-y="60"] { /* ROWS_MAX */
    --y: 60;
}

/* card form */
dialog:not([open]) {
    display: none;
}
form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #123a;
}
form section {
    margin: 2em auto;
    width: min-content;
}
form article {
    margin: 2em auto;
    cursor: auto;
}
textarea {
    background-color: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    min-width: 10em;
    max-width: 25em;
    min-height: 10em;
    max-height: 25em;
}
input[type="radio"] {
    display: none;
}
input + article {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
    width: auto;
    height: auto;
}
label {
    cursor: pointer;
    display: block;
    width: 2em;
    height: 2em;
}
input + article:hover label {
    background-color: #fff4;
}
input:checked + article {
    outline: 3px solid #fff;
}
input[type="submit"], input[type="reset"] {
    display: block;
    margin: 0 auto;
}
form[method="get"] input[type="submit"], form:not([method="get"]) input[type="reset"] {
    display: none;
}
form a:link, form a:visited {
    color: #eee;
    float: right;
}
form a:not([href]) {
    display: none;
}

/* history */
body > ol, body > footer {
    background-color: #fff3;
    padding: 1em;
    margin: 0 auto;
    max-width: 1400px;
}
body > ol > li {
    background: #fff8;
    margin: 1em 0 0 0;
    padding: 1em;
    list-style: none;
}
body > ol > li:first-child {
    margin: 0;
}