/* shared line-art wireframe styles
   browser-default text. black 1px borders. white background. no decoration. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: #000; }

.wrap { max-width: 1400px; margin: 0 auto; padding: 20px; }

/* nav */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.brand { color: #000; text-decoration: none; border: 1px solid #000; padding: 4px 10px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a { padding: 4px 10px; border: 1px solid #000; text-decoration: none; color: #000; }
.tabs a.active { background: #000; color: #fff; }

.metastrip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  margin-bottom: 18px;
  border-bottom: 1px dashed #000;
}

/* canvas */
.canvas {
  position: relative;
  border: 1px solid #000;
  min-height: 820px;
  padding: 24px;
}

/* zones */
.zone {
  position: relative;
  background: #fff;
  border: 1px solid #000;
  padding: 14px;
  min-height: 60px;
}
.zone-tag {
  position: absolute;
  top: -10px;
  left: 8px;
  background: #fff;
  border: 1px solid #000;
  padding: 0 6px;
  font-size: small;
}

/* upload placeholder - every img/asset slot reads SQUARE */
.art-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 60px;
  background: #fff;
  border: 1px dashed #000;
  text-align: center;
  padding: 10px;
  letter-spacing: 2px;
}

/* layouts */
.layout-scrapbook { position: relative; min-height: 900px; }
.layout-scrapbook .zone { position: absolute; }

.layout-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  grid-auto-rows: 110px;
}
.layout-grid .zone { padding: 8px; }

.layout-zine {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 900px;
}
.layout-zine::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: #000;
  transform: translateX(-50%);
}
.zine-page { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.zine-page.left  { padding-right: 36px; }
.zine-page.right { padding-left: 36px; }
.folio { font-size: small; margin-top: auto; }

.layout-desktop {
  position: relative;
  min-height: 900px;
  border: 1px dashed #000;
}
.window {
  position: absolute;
  background: #fff;
  border: 1px solid #000;
}
.titlebar {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  background: #000;
  color: #fff;
}
.titlebar .btns { display: flex; gap: 4px; }
.titlebar .btns span {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid #fff;
  text-align: center;
}
.window-body { padding: 12px; }

.layout-corkboard { position: relative; min-height: 900px; }
.layout-corkboard .zone { position: absolute; }
.layout-corkboard .zone::before {
  content: '+';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 12px;
  font-size: small;
  z-index: 2;
}

/* small generic widgets */
.btn-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.btn-88 {
  width: 88px;
  height: 31px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #000;
  letter-spacing: 1px;
}
.gb-entry { border-bottom: 1px dashed #000; padding: 6px 0; }
.gb-entry:last-child { border-bottom: none; }
.gb-input { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gb-input input, .gb-input textarea {
  border: 1px solid #000;
  background: #fff;
  padding: 4px 6px;
  color: #000;
}
.gb-input button {
  border: 1px solid #000;
  background: #fff;
  padding: 4px 12px;
  align-self: flex-start;
  color: #000;
}
.counter {
  display: inline-flex;
  background: #fff;
  border: 1px solid #000;
  padding: 4px 10px;
  letter-spacing: 4px;
}
.marquee {
  border: 1px dashed #000;
  padding: 6px 10px;
  overflow: hidden;
  white-space: nowrap;
}
.nav-list { list-style: none; padding: 0; margin: 4px 0; }
.nav-list li {
  padding: 4px 0;
  border-bottom: 1px dashed #000;
  display: flex;
  justify-content: space-between;
}
.nav-list li:last-child { border-bottom: none; }
.nav-list li a { text-decoration: none; color: #000; }

.embed-frame {
  border: 1px solid #000;
  padding: 6px 10px;
}

.tag {
  display: inline-block;
  border: 1px solid #000;
  padding: 1px 8px;
  margin: 2px;
  text-decoration: none;
  color: #000;
}

.taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 14px;
}

.footer {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #000;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .layout-scrapbook .zone,
  .layout-corkboard .zone,
  .layout-desktop .window {
    position: static !important;
    width: auto !important;
    margin-bottom: 16px;
    transform: none !important;
  }
  .layout-scrapbook,
  .layout-corkboard,
  .layout-desktop { min-height: 0; }
  .layout-zine { grid-template-columns: 1fr; }
  .layout-zine::before { display: none; }
  .zine-page.left, .zine-page.right { padding: 20px; border-right: none; }
  .layout-grid { grid-template-columns: repeat(4, 1fr); }
  .layout-grid .zone { grid-column: span 4 !important; grid-row: span 2 !important; }
}