/* CanAsia Custom Theme — assets-wireframes/wireframes.css
 * Deliberately plain, deliberately NOT the brand system -- this is a
 * planning tool (page-wireframes.php), not real design, so it stays flat
 * greyscale and off the colors_and_type.css token system on purpose. Only
 * enqueued on that one template.
 */

.wf-intro { max-width: 720px; margin: 0 auto var(--sp-56); text-align: center; }
.wf-intro p { color: var(--fg-muted); font-size: var(--type-body); line-height: 1.5; }

.wf-page { max-width: 960px; margin: 0 auto var(--sp-56); padding: 24px; border: 1px dashed #94a3b8; border-radius: 8px; background: #fff; }
.wf-page__label { margin: 0 0 4px; color: #64748b; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.wf-page__title { margin: 0 0 6px; color: #1e293b; font-family: var(--font-sans); font-size: 16px; font-weight: 700; }
.wf-page__note { max-width: 640px; margin: 0 0 20px; color: #64748b; font-family: var(--font-sans); font-size: 13px; line-height: 1.5; }

.wf-nav { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 16px; background: #f1f5f9; border-radius: 4px; }
.wf-nav span { display: block; height: 8px; background: #cbd5e1; border-radius: 2px; }
.wf-nav span:first-child { width: 56px; }
.wf-nav span.wf-nav__push { margin-left: auto; width: 32px; }

.wf-block { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; }
.wf-img { display: flex; align-items: center; justify-content: center; min-height: 90px; color: #94a3b8; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; background-image: repeating-linear-gradient(45deg, #e2e8f0, #e2e8f0 6px, #f8fafc 6px, #f8fafc 12px); border: 1px solid #e2e8f0; border-radius: 4px; }
.wf-line { height: 8px; margin-bottom: 6px; background: #cbd5e1; border-radius: 2px; }
.wf-line:last-child { margin-bottom: 0; }
.wf-line--title { height: 12px; width: 60%; background: #94a3b8; }
.wf-line--short { width: 40%; }
.wf-line--med { width: 70%; }
.wf-btn { display: inline-block; padding: 7px 16px; background: #cbd5e1; border-radius: 3px; color: #475569; font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.wf-grid { display: grid; gap: 14px; margin-top: 16px; }
.wf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wf-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.wf-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.wf-table th { padding: 8px 10px; background: #f1f5f9; text-align: left; }
.wf-table td { padding: 10px; border-top: 1px solid #e2e8f0; }

@media (max-width: 700px) {
  .wf-grid--2, .wf-grid--3, .wf-grid--4 { grid-template-columns: 1fr 1fr; }
}