/* Flattis base styles — deliberately minimal until the UI steps. */
:root {
  --ink: #1a1a1a;
  --paper: #fafaf7;
  --accent: #b5432a;
  --muted: #6b6b6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-bottom: 2px solid var(--ink);
}

.brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
}
.site-header nav a:hover { color: var(--accent); }

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.brand a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 0.75rem; max-width: 24rem; }
.stack label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.stack label.inline { flex-direction: row; align-items: center; gap: 0.5rem; }
.row { display: flex; gap: 1rem; }
input, select, button {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
}
button {
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  align-self: flex-start;
}
button:hover { background: var(--accent); border-color: var(--accent); }
.inline-form { display: inline; }
.link-button {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  text-decoration: underline;
}
.link-button:hover { background: none; color: var(--ink); }

/* Tables */
table { border-collapse: collapse; margin: 0.5rem 0 1rem; }
th, td { text-align: left; padding: 0.35rem 1rem 0.35rem 0; border-bottom: 1px solid #ddd; }
th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }

/* Flash messages */
.flash { padding: 0.6rem 1rem; border-radius: 4px; }
.flash-ok { background: #e6f4e6; border: 1px solid #9ac59a; }
.flash-error { background: #fbe9e7; border: 1px solid #e0a49a; }

section { margin-bottom: 2.5rem; }

.swatch {
  display: inline-block;
  width: 0.9rem; height: 0.9rem;
  border-radius: 3px;
  vertical-align: -0.1rem;
  margin-right: 0.35rem;
  border: 1px solid rgba(0,0,0,0.15);
}
.narrow { width: 6rem; }
tr.archived td, tr.archived a { color: var(--muted); }
.status-list { list-style: none; padding: 0; }
.status-list li { padding: 0.25rem 0; }
input[type="color"] { padding: 0.1rem; width: 3rem; height: 2rem; }

.magazine-list { list-style: none; padding: 0; }
.magazine-list li { padding: 0.5rem 0; border-bottom: 1px solid #ddd; }
.magazine-list .muted { margin-left: 0.75rem; }

.magazine-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.magazine-card h2 { margin: 0 0 0.25rem; }
.magazine-card h2 a { color: inherit; text-decoration: none; }
.magazine-card h2 a:hover { color: var(--accent); }
.mag-meta { font-size: 0.85rem; font-weight: 400; margin-left: 0.6rem; }
.issue-list { list-style: none; padding: 0; margin: 0.25rem 0; }
.issue-list li { padding: 0.3rem 0; border-bottom: 1px solid #eee; }
.issue-list li.archived a { color: var(--muted); }
.issue-list .muted { margin-left: 0.6rem; }
.mag-edit { margin-top: 0.5rem; }
.hex-input { font-family: ui-monospace, monospace; width: 6.5rem; }

/* --- Flat plan view --- */
.tallies {
  display: flex;
  gap: 1.5rem;
  padding: 0.6rem 1rem;
  margin: 1rem 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
}

.plan {
  --page-w: 7.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  align-items: flex-start;
}

.spread {
  display: flex; /* the two pages of a spread touch at the spine */
}

.page {
  width: var(--page-w);
  aspect-ratio: calc(1 / var(--page-ratio, 1.414));
  background: #fff;
  border: 1px solid #c9c9c4;
  display: flex;
  flex-direction: column;
  position: relative;
  color: inherit;
  text-decoration: none;
}
a.page:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.page-overfull { border-color: #d0342c; box-shadow: inset 0 0 0 1px #d0342c; }

.box {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 0.1rem 0.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.6);
}
.box-label {
  font-size: 0.58rem;
  line-height: 1.15;
  color: rgba(0,0,0,0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.box-ad {
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.35) 6px 8px);
}

/* --- Plan editing --- */
.plan-toolbar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0 0 1rem;
}
.plan-toolbar button { padding: 0.35rem 0.7rem; }
.toolbar-link {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
}
.toolbar-link:hover { border-color: var(--accent); color: var(--accent); }
.inline-check { font-size: 0.8rem; color: var(--muted); margin-left: 0.4rem; white-space: nowrap; }
.site-header nav a { margin-left: 0.9rem; }
.drag-hint { font-size: 0.8rem; }

.page-handle {
  height: 0.65rem;
  background: repeating-linear-gradient(90deg, #d8d8d2 0 3px, transparent 3px 6px);
  cursor: grab;
  touch-action: none; /* required for pointer-event dragging on touch */
}
.page-handle:active { cursor: grabbing; }

.page-menu {
  position: absolute;
  top: 0.7rem; right: 0.15rem;
  background: none; border: none; color: var(--muted);
  font-size: 0.8rem; line-height: 1; padding: 0.1rem;
  cursor: pointer; z-index: 2;
}
.page-menu:hover { color: var(--accent); background: none; }

.page-ghost {
  position: fixed;
  z-index: 100;
  opacity: 0.75;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  width: var(--page-w, 7.5rem);
}
.page-dragging { opacity: 0.35; }

.drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.drop-after  { box-shadow:  3px 0 0 0 var(--accent); }
.parkki.drop-park .parkki-tray { outline: 2px dashed var(--accent); outline-offset: 4px; }

.parkki { margin-top: 2.5rem; }

/* Article bands: exactly two lila shades, alternating per article. */
:root {
  --band-0: #5e4791;
  --band-1: #a58fd0;
}
.article-band {
  height: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.25rem;
  flex-shrink: 0;
  overflow: hidden;
}
.band-0 { background: var(--band-0); color: #fff; }
.band-1 { background: var(--band-1); color: #2d2154; }
.band-title {
  font-size: 0.58rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band-end { font-size: 0.5rem; margin-left: auto; }
.band-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.58rem;
  padding: 0.1rem 0.25rem;
  background: #fff;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.band-status .swatch { width: 0.6rem; height: 0.6rem; margin-right: 0; flex-shrink: 0; }
.clash-mark {
  position: absolute;
  top: 1rem; right: 0.2rem;
  color: #d0342c;
  font-size: 0.8rem;
  z-index: 2;
}
.space-tally {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  background: #eef;
  border: 1px solid #ccd;
  font-size: 0.9rem;
}
.space-tally.flash-error { background: #fbe9e7; border-color: #e0a49a; }
.quick-add input[type="text"] { min-width: 16rem; }
.status-cell { white-space: nowrap; }
.danger-link { color: #a32d2d; }
.danger-link:hover { color: #d0342c; }

/* Article elements: no nested scrollbars — compact fit instead. */
.elements-table { width: 100%; }
.elements-table select { max-width: 8.5rem; }
.elements-table input[type="text"] { max-width: 7rem; }
.elements-table td, .elements-table th { padding-right: 0.5rem; }
.image-url-row td { padding-bottom: 0.75rem; }
.image-url-row label { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; color: var(--muted); }
.image-url-row input { flex: 1; max-width: 28rem; }

dialog {
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  min-width: 18rem;
}
dialog::backdrop { background: rgba(0,0,0,0.35); }
dialog h3 { margin-top: 0; }

/* --- Dashboard / articles --- */
.over-text { color: #d0342c; font-weight: 600; }
.over-badge {
  display: inline-block;
  background: #d0342c; color: #fff;
  border-radius: 50%;
  width: 1.05rem; height: 1.05rem;
  text-align: center; line-height: 1.05rem;
  font-size: 0.75rem; font-weight: 700;
}
.unplaced { color: #b05c00; font-style: italic; }
.budget-line { font-size: 0.95rem; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 0.5rem 0.9rem; display: inline-block; }
textarea { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid #bbb; border-radius: 4px; }
.idea-list { list-style: none; padding: 0; }
.idea-list li { padding: 0.35rem 0; border-bottom: 1px solid #e2e2dc; }
.idea-list .muted { margin-left: 0.5rem; }
table.wide { display: block; overflow-x: auto; }

/* --- Text import / budget bars --- */
.text-import {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.text-import-over { border-color: #d0342c; }
.text-import h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.budget-bar {
  height: 0.55rem;
  background: #eceae4;
  border-radius: 4px;
  overflow: hidden;
  max-width: 28rem;
}
.budget-fill { height: 100%; background: #7ed321; border-radius: 4px; }
.budget-fill-over { background: #d0342c; }
.budget-caption { margin: 0.3rem 0 0.6rem; font-size: 0.85rem; }
.text-preview { font-size: 0.85rem; font-style: italic; max-width: 40rem; overflow-wrap: anywhere; }
details summary { cursor: pointer; color: var(--accent); }
details { margin-top: 0.5rem; }
.box-over { box-shadow: inset 0 0 0 2px #d0342c; }

/* --- Pixel calculator --- */
.dropzone {
  border: 2px dashed #b8b8b0;
  border-radius: 10px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: #fff;
  margin: 1rem 0 1.5rem;
}
.dropzone-hot { border-color: var(--accent); background: #fdf6f4; }
.dropzone p { margin: 0 0 0.75rem; font-weight: 600; }
.filepick { color: var(--accent); cursor: pointer; text-decoration: underline; }
.filepick input { display: none; }
tr.px-good td:nth-child(4) { color: #2e7d32; }
tr.px-ok td:nth-child(4) { color: #b05c00; }
tr.px-bad td:nth-child(4) { color: #d0342c; }
.spread .page + .page { border-left: 1px dashed #c9c9c4; margin-left: -1px; }

.page-empty {
  background: transparent;
  border-color: transparent;
}

.page-body { flex: 1; overflow: hidden; } /* overfull pages clip; red border signals it */

.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.15rem 0.35rem;
  font-size: 0.72rem;
}
.page-number { font-weight: 600; }
.page-label { font-size: 0.65rem; }

/* Verso pages number bottom-left, recto bottom-right — like print. */
.page-verso .page-footer { flex-direction: row; }
.page-recto .page-footer { flex-direction: row-reverse; }