/* Blogspace dashboard — "paper & ink": flat colours, 2px rules, hard shadows,
   square corners. Plain CSS (no variables, no flex for layout) so it renders on
   old browsers; works down to ~320px. */
* { box-sizing: border-box; }
html { background: #f4efe4; }
body { margin: 0; font-family: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #1d1a17; background: #f4efe4; }
a { color: #c8541a; }
a:hover { color: #a3420f; }
h1, h2, h3, .mono { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: -0.01em; }
h1 { font-size: 1.5em; margin: 0.2em 0 0.6em; line-height: 1.2; }
h2 { font-size: 1.05em; margin: 0 0 0.8em; text-transform: uppercase; letter-spacing: 0.06em; }
h3 { font-size: 0.95em; margin: 0 0 0.4em; text-transform: uppercase; letter-spacing: 0.06em; }
code { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; background: #ebe5d6; padding: 0 0.3em; font-size: 0.92em; }
p { margin: 0.6em 0; }
.muted { color: #6b655c; }
.nowrap { white-space: nowrap; }
.narrow { max-width: 480px; }
.center { margin-left: auto; margin-right: auto; }
.small { font-size: 0.9em; }

/* ---- bars ---------------------------------------------------------------- */
.topbar { background: #1d1a17; color: #f4efe4; }
.topbar a { color: #f4efe4; text-decoration: none; }
.topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0.55em 1em; overflow: hidden; }
.brand { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: bold; text-transform: uppercase; letter-spacing: 0.12em; margin-right: 1.2em; }
.who { color: #b8b0a3; font-size: 0.9em; }
.topbar .links { float: right; font-size: 0.9em; }
.topbar .links a, .topbar .links form { margin-left: 1.2em; }
.topbar .links a:hover, .topbar .links .linkbtn:hover { color: #f2a67c; }
.topbar .links a.active { border-bottom: 2px solid #f2a67c; }
.blogbar { background: #fffdf8; border-bottom: 2px solid #1d1a17; }
.blogbar .topbar-inner { padding: 0.5em 1em 0; }
.blogbar .blogname { display: inline-block; margin: 0 1em 0.5em 0; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; }
.blogbar .tabs { display: inline-block; vertical-align: bottom; }
.blogbar .tabs a { display: inline-block; padding: 0.35em 0.8em; margin: 0 0.15em 0 0; text-decoration: none; color: #1d1a17; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; border: 2px solid transparent; border-bottom: 0; }
.blogbar .tabs a:hover { border-color: #1d1a17; }
.blogbar .tabs a.active { background: #1d1a17; color: #f4efe4; border-color: #1d1a17; }
.blogbar .view { float: right; margin: 0 0 0.5em; padding: 0.25em 0.7em; border: 2px solid #1d1a17; color: #1d1a17; text-decoration: none; font-size: 0.85em; font-weight: bold; background: #fffdf8; }
.blogbar .view:hover { background: #1d1a17; color: #f4efe4; }

/* ---- page ---------------------------------------------------------------- */
.main { max-width: 1100px; margin: 0 auto; padding: 1.4em 1em 3em; }
.pagehead { overflow: hidden; margin-bottom: 0.8em; }
.pagehead h1 { float: left; margin: 0.1em 1em 0.3em 0; }
.pagehead .actions { float: right; margin-top: 0.1em; }
.pagehead .lead { clear: both; margin: 0; }
.card { background: #fffdf8; border: 2px solid #1d1a17; box-shadow: 4px 4px 0 #1d1a17; padding: 1.1em 1.3em; margin: 0 4px 1.6em 0; }
.card > :last-child { margin-bottom: 0; }
.cols { overflow: hidden; }
.cols .card { float: left; width: 48.5%; margin-right: 3%; }
.cols .card + .card { margin-right: 4px; }
.flash { padding: 0.6em 1em; border: 2px solid #1d1a17; margin: 0 4px 1.2em 0; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; }
.flash.ok { background: #e4f0dc; }
.flash.err { background: #f6dfd9; }
.tag { display: inline-block; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid #1d1a17; color: #1d1a17; padding: 0 0.45em; margin-left: 0.5em; vertical-align: middle; line-height: 1.6; }
.tag.off { color: #6b655c; border-color: #b8b0a3; }

/* ---- forms --------------------------------------------------------------- */
label { display: block; margin: 0.8em 0; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; }
label .muted { text-transform: none; letter-spacing: 0; }
label code { text-transform: none; letter-spacing: 0; }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], input:not([type]), input[type=file], select, textarea {
  width: 100%; max-width: 100%; padding: 0.5em 0.6em; margin-top: 0.25em; border: 2px solid #1d1a17; font: inherit; font-family: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; text-transform: none; letter-spacing: 0; background: #fffdf8; color: #1d1a17; }
input:focus, select:focus, textarea:focus, button:focus, .btn:focus { outline: 2px solid #c8541a; outline-offset: 1px; }
input[type=color] { width: 4em; height: 2.3em; padding: 0.1em; margin-top: 0.25em; border: 2px solid #1d1a17; background: #fffdf8; }
input[type=file] { padding: 0.35em; }
select { -webkit-appearance: none; appearance: none; padding-right: 1.8em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1a17' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6em center; }
textarea { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.95em; line-height: 1.5; }
textarea.editor { min-height: 28em; }
label.check { text-transform: none; letter-spacing: 0; font-family: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1em; }
label.check input { width: auto; margin: 0 0.4em 0 0; vertical-align: middle; }
.row { overflow: hidden; }
.row label { float: left; margin-right: 1.5em; min-width: 12em; }
.row label:last-child { margin-right: 0; }
button, .btn { display: inline-block; font: inherit; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5em 1.1em; border: 2px solid #1d1a17; background: #c8541a; color: #fffdf8; cursor: pointer; text-decoration: none; box-shadow: 3px 3px 0 #1d1a17; vertical-align: middle; }
button:hover, .btn:hover { background: #a3420f; color: #fffdf8; }
button:active, .btn:active { box-shadow: none; position: relative; top: 3px; left: 3px; }
.btn.secondary, button.secondary { background: #fffdf8; color: #1d1a17; }
.btn.secondary:hover, button.secondary:hover { background: #ebe5d6; color: #1d1a17; }
.btn.small { font-size: 0.75em; padding: 0.4em 0.9em; }
button.mini, .mini { font-size: 0.72em; padding: 0.15em 0.55em; background: #fffdf8; color: #1d1a17; border-width: 1px; box-shadow: none; font-weight: normal; }
button.mini:hover, .mini:hover { background: #1d1a17; color: #fffdf8; }
button.mini:active { top: 0; left: 0; }
button.danger { background: #a12b1e; }
button.danger:hover { background: #7d1f14; }
a.danger { color: #a12b1e; }
button.mini.danger { color: #a12b1e; border-color: #a12b1e; background: #fffdf8; }
button.mini.danger:hover { background: #a12b1e; color: #fffdf8; }
button.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: none; box-shadow: none; text-transform: none; letter-spacing: 0; }
button.linkbtn:active { top: 0; left: 0; }
form.inline, .inline { display: inline; }
details.inline summary { display: inline; cursor: pointer; }
summary.mini { display: inline-block; list-style: none; }
.filter { margin: 0 0 1em; }
.filter label { display: inline-block; margin: 0; }
.filter select { width: auto; margin: 0 0 0 0.4em; }
.actionrow { margin: 1.2em 0 0; }
.actionrow a { margin-left: 0.8em; }

/* ---- tables & lists ------------------------------------------------------ */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.5em 0.6em; border-bottom: 1px solid #ddd6c7; vertical-align: middle; }
th { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.08em; color: #1d1a17; border-bottom: 2px solid #1d1a17; }
tr:nth-child(even) td { background: #f9f6ee; }
tr:hover td { background: #f1ecdf; }
tr.disabled td { color: #8f887c; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.3em 0; border-bottom: 1px solid #ddd6c7; }
ul.plain li:last-child { border-bottom: 0; }
details.help { margin: 0.8em 0 0; border: 2px dashed #1d1a17; padding: 0.5em 1em; background: #fbf8f0; }
details.help summary { cursor: pointer; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; }
details.help[open] summary { margin-bottom: 0.5em; }
.cheat td { border: 0; padding: 0.2em 1em 0.2em 0; background: none; }

.editor-tools { margin: 0.5em 0 0; font-size: 0.9em; }
.editor-tools .upload { display: inline-block; margin: 0 0.8em 0 0; padding: 0.25em 0.7em; border: 2px solid #1d1a17; background: #fffdf8; cursor: pointer; font-size: 0.8em; }
.editor-tools .upload:hover { background: #ebe5d6; }
.editor-tools .upload input { display: inline-block; width: auto; max-width: 14em; margin: 0 0 0 0.4em; padding: 0; border: 0; background: none; font-size: 0.9em; }
.editor-tools .upload-status { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85em; margin-right: 0.6em; }

/* ---- images -------------------------------------------------------------- */
.gallery { overflow: hidden; }
.thumb { float: left; width: 200px; margin: 0 1.2em 1.6em 0; padding: 0.6em; text-align: center; }
.thumb img { max-width: 100%; max-height: 140px; border: 1px solid #ddd6c7; }
.thumb .meta { font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.4em; }
.thumb .copy { font-size: 0.75em; margin: 0.4em 0; padding: 0.3em; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; }
.imagepick { margin-top: 0.5em; padding-top: 0.5em; border-top: 2px dashed #ddd6c7; }
.imagepick > label { margin-bottom: 0.3em; }
.imagepick .picks { overflow: hidden; margin: 0.4em 0 0; }
.imagepick .pick { float: left; width: 120px; margin: 0 0.7em 0.7em 0; padding: 0.35em; border: 2px solid #ddd6c7; background: #fffdf8; text-align: center; font-size: 0.75em; text-transform: none; letter-spacing: 0; cursor: pointer; }
.imagepick .pick:hover { border-color: #1d1a17; }
.imagepick .pick input { display: block; width: auto; margin: 0 auto 0.3em; }
.imagepick .pick img, .imagepick .pick .swatch { display: block; width: 100%; height: 64px; margin: 0 auto 0.3em; border: 1px solid #ddd6c7; background: #f4efe4; }
.imagepick .pick img { object-fit: contain; }
.imagepick .pick .swatch { line-height: 64px; font-size: 1.6em; color: #b8b0a3; }
.imagepick .pick .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imagepick .pick input:checked ~ img, .imagepick .pick input:checked ~ .swatch { border: 3px solid #c8541a; }

/* ---- design page ---------------------------------------------------------- */
.jumps { margin: 0 0 1.2em; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; }
.jumps a { display: inline-block; margin: 0 0.8em 0.3em 0; color: #1d1a17; text-decoration: none; border-bottom: 2px solid #ddd6c7; }
.jumps a:hover { border-color: #c8541a; }
.presets { overflow: hidden; }
.presets .preset { float: left; width: 8.5em; margin: 0 0.9em 0.9em 0; padding: 0.45em; background: #fffdf8; color: #1d1a17; font-size: 0.8em; text-align: center; }
.presets .preset:hover { background: #ebe5d6; color: #1d1a17; }
.presets .sw { display: inline-block; width: 22%; height: 2.2em; margin: 0 1%; border: 1px solid rgba(0,0,0,0.25); vertical-align: middle; }
.presets .pname { display: block; margin-top: 0.4em; }
/* layout page: the column diagram, area cards with their module tables */
.lay { margin: 0 0 1em; border: 2px solid #1d1a17; background: #f4efe4; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
.lay-row { padding: 0.5em; background: #1d1a17; color: #f4efe4; }
.lay-cols { overflow: hidden; padding: 0.5em 0; }
.lay-col { float: left; padding: 1.6em 0.3em; border: 1px dashed #1d1a17; background: #fffdf8; }
.lay-col.lay-main { background: #ebe5d6; }
.lay .off { opacity: 0.4; text-decoration: line-through; }
.lay-col.off { text-decoration: none; }
.lay-col.empty { background: transparent; }
.row input[type=number] { width: 6em; }
.cardhead { overflow: hidden; }
.cardhead h2 { float: left; margin-right: 1em; }
.cardhead .switch { float: right; margin-top: -0.2em; }
.card.area-off { border-style: dashed; box-shadow: none; }
.card.area-off .modules, .card.area-off .addmod { opacity: 0.6; }
table.modules { margin: 0.5em 0 1em; }
table.modules td.order, table.modules td.actions { width: 1%; }
table.modules th { width: 10em; }
.addmod { border-top: 2px dashed #ddd6c7; padding-top: 0.6em; }
.addmod label, .add label { display: inline-block; margin: 0 0.8em 0.4em 0; min-width: 14em; }
.addmod select, .add select, .add input { width: auto; min-width: 14em; }
.addmod button, .add button { vertical-align: bottom; margin-bottom: 0.4em; }
.addrow { margin-top: 1em; border-top: 2px dashed #ddd6c7; padding-top: 0.6em; }
.addrow .add { float: left; width: 48%; margin-right: 4%; }
.addrow .add + .add { margin-right: 0; }
textarea.mono { font-size: 0.9em; }
.hoverpick { margin: 0.8em 0; }
.hoverpick > input { width: auto; margin: 0 0.4em 0 0; vertical-align: middle; }
.hoverpick > label.check { display: inline; margin: 0; }
.hoverpick .hover-color { margin: 0.4em 0 0 1.6em; }
.hoverpick > input:not(:checked) ~ .hover-color { display: none; }
.savebar { position: sticky; bottom: 0; margin: 0 4px 0 0; padding: 0.8em 0; background: #f4efe4; border-top: 2px solid #1d1a17; }
.savebar .btn { margin-left: 0.8em; }
details.reset { margin-top: 1.6em; }

/* ---- login --------------------------------------------------------------- */
.login-brand { text-align: center; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; text-transform: uppercase; letter-spacing: 0.2em; margin: 2em 0 1em; }

@media (max-width: 700px) {
  .cols .card, .row label, .thumb { float: none; width: auto; margin-right: 4px; }
  .imagepick .pick { width: 46%; margin-right: 4%; }
  .presets .preset { width: 46%; margin-right: 4%; }
  .addrow .add { float: none; width: auto; margin-right: 0; }
  .cardhead h2, .cardhead .switch { float: none; margin-top: 0; }
  .cardhead .switch { display: block; margin-bottom: 0.6em; }
  .cols .card + .card { margin-right: 4px; }
  .topbar .links { float: none; display: block; margin-top: 0.3em; }
  .topbar .links a, .topbar .links form { margin-left: 0; margin-right: 1em; }
  .blogbar .topbar-inner { overflow: visible; }
  .blogbar .blogname { display: block; margin-right: 0; }
  .blogbar .view { float: none; display: inline-block; margin: 0 0 0.6em; }
  .blogbar .tabs { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; margin: 0 -1em; padding: 0 1em; }
  .pagehead h1, .pagehead .actions { float: none; }
  .pagehead .actions { margin-bottom: 0.6em; }
  .card { padding: 0.9em 1em; overflow-x: auto; }
  table { font-size: 0.9em; }
  th, td { padding: 0.35em 0.3em; }
}