/* Politick wireframes — deliberately low-fi. Structure only, no visual identity. */
* { box-sizing: border-box; }
body {
  margin: 0; background: #e8eaec; color: #333;
  font: 14px/1.45 -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.frame { max-width: 1240px; margin: 0 auto; background: #fff; min-height: 100vh; border-left: 1px solid #c5c9cd; border-right: 1px solid #c5c9cd; }
main { padding: 20px 28px 48px; }

/* wire boxes */
.box { position: relative; border: 1.5px solid #98a2ab; background: #f6f7f8; padding: 14px; margin: 0 0 14px; border-radius: 2px; }
.box .lbl, .lbl-only {
  display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: #5b6770; background: #e2e6e9; padding: 1px 6px; margin: -6px 0 8px -6px; border-radius: 2px;
}
.box.plain { background: #fff; }
.box.ghost { border-style: dashed; background: #fbfbfc; }

/* placeholder media */
.ph { border: 1.5px solid #98a2ab; background:
  linear-gradient(45deg, transparent calc(50% - 0.75px), #b6bec5 50%, transparent calc(50% + 0.75px)),
  linear-gradient(-45deg, transparent calc(50% - 0.75px), #b6bec5 50%, transparent calc(50% + 0.75px)), #eef0f2;
  display: flex; align-items: center; justify-content: center; color: #717d87; font-size: 11px; }
.ph span { background: #eef0f2; padding: 0 6px; }

/* layout utils */
.row { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; margin-bottom: 0; }
.row .w2 { flex: 2; } .row .w3 { flex: 3; }
.grid { display: grid; gap: 14px; }
.cols2 { grid-template-columns: repeat(2, 1fr); }
.cols3 { grid-template-columns: repeat(3, 1fr); }
.cols4 { grid-template-columns: repeat(4, 1fr); }
.cols6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 760px) {
  .row { flex-direction: column; }
  .cols3, .cols4 { grid-template-columns: repeat(2, 1fr); }
  .cols6 { grid-template-columns: repeat(3, 1fr); }
  main { padding: 12px 12px 32px; }
}

/* text wires */
h1.wire { font-size: 26px; margin: 4px 0 10px; font-weight: 700; }
h2.wire { font-size: 17px; margin: 0 0 10px; font-weight: 700; }
.tl { height: 12px; background: #d4d9dd; margin: 6px 0; border-radius: 1px; }   /* text line */
.tl.short { width: 55%; } .tl.tiny { width: 30%; } .tl.head { height: 18px; background: #c2c9ce; width: 70%; }
.meta { font-size: 11px; color: #6b7680; }
.big { font-size: 22px; font-weight: 700; }

/* controls */
.btn { display: inline-block; border: 1.5px solid #6f7b85; background: #e7eaec; padding: 6px 14px; font-size: 12px; font-weight: 600; color: #444; border-radius: 2px; white-space: nowrap; }
.btn.primary { background: #cdd4d9; border-width: 2px; }
.input { border: 1.5px solid #98a2ab; background: #fff; padding: 8px 10px; color: #8a949d; font-size: 13px; border-radius: 2px; }
.input.big { padding: 14px 12px; font-size: 16px; }
.select { border: 1.5px solid #98a2ab; background: #fff; padding: 6px 24px 6px 8px; font-size: 12px; color: #555; border-radius: 2px; position: relative; }
.select::after { content: "▾"; position: absolute; right: 6px; }
.chip { display: inline-block; border: 1px solid #98a2ab; border-radius: 10px; padding: 1px 10px; font-size: 11px; color: #5b6770; background: #fff; margin: 2px 2px 2px 0; }
.tag { display: inline-block; border: 1px solid #98a2ab; padding: 1px 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #5b6770; background: #eef0f2; margin-right: 4px; }
.dot { display: inline-block; width: 9px; height: 9px; background: #98a2ab; margin-right: 5px; }

/* lists / tables */
.listrow { display: flex; gap: 12px; align-items: center; padding: 9px 2px; border-bottom: 1px solid #d4d9dd; }
.listrow:last-child { border-bottom: 0; }
.listrow .grow { flex: 1; min-width: 0; }
.num { font-variant-numeric: tabular-nums; color: #5b6770; font-size: 12px; white-space: nowrap; }
table.wire { width: 100%; border-collapse: collapse; font-size: 12px; }
table.wire th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #6b7680; border-bottom: 2px solid #98a2ab; padding: 4px 8px 4px 0; }
table.wire td { border-bottom: 1px solid #d4d9dd; padding: 7px 8px 7px 0; }

/* sparkline / chart placeholders */
.spark { width: 84px; height: 20px; }
.chart { height: 120px; }
.chart.tall { height: 220px; }

/* annotations */
.ann { position: relative; background: #fff8c9; border: 1px solid #e0d27a; padding: 8px 10px 8px 28px; font-size: 12px; color: #5d5320; margin: 0 0 14px; border-radius: 2px; }
.ann::before { content: "✎"; position: absolute; left: 9px; top: 7px; }
.future { border: 2px dashed #9a86c9 !important; background: #f7f4fc !important; }
.future > .lbl { background: #e4dbf4; color: #5d4a8a; }

/* pagination */
.pager { display: flex; gap: 6px; justify-content: center; padding: 10px 0 0; }
.pager .btn { padding: 4px 10px; }

/* masthead / footer (injected by wf.js) */
.masthead { border-bottom: 2px solid #6f7b85; padding: 12px 28px; display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; background: #fff; }
.masthead .wordmark { font-weight: 800; font-size: 19px; letter-spacing: .02em; }
.masthead .subbrand { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #6b7680; }
.masthead nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.masthead nav a { font-size: 12px; padding: 4px 9px; color: #444; text-decoration: none; border: 1px solid transparent; }
.masthead nav a.active { border: 1.5px solid #6f7b85; background: #e7eaec; font-weight: 700; }
.masthead .live { font-size: 10px; border: 1px dashed #98a2ab; padding: 2px 7px; color: #6b7680; }
.editionstrip { border-bottom: 1px solid #c5c9cd; padding: 5px 28px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6b7680; background: #f6f7f8; }
footer.colophon { border-top: 2px solid #6f7b85; margin-top: 30px; padding: 22px 28px; background: #f6f7f8; font-size: 12px; color: #5b6770; }
footer.colophon .grid { margin-bottom: 0; }
@media (max-width: 760px) { .masthead, .editionstrip, footer.colophon { padding-left: 12px; padding-right: 12px; } }

details.acc { border: 1.5px solid #98a2ab; background: #f6f7f8; margin-bottom: 8px; }
details.acc summary { padding: 10px 12px; cursor: pointer; display: flex; gap: 12px; align-items: center; list-style: none; }
details.acc .accbody { border-top: 1px solid #c5c9cd; padding: 10px 12px; background: #fff; }