/* ============================================================
   YCI · Kit de Wireframe (low-fi) — Fase 1
   Grayscale + 1 acento navy (#253571) só em CTAs / links / foco.
   Sem cor de marca, sem foto, sem fonte final: caixas, rótulos,
   hierarquia. Tipo de mão ("Architects Daughter") sinaliza
   "isto é wireframe, não design".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');

:root {
  --wf-ink:      #33312c;   /* rótulos principais            */
  --wf-muted:    #8d8a82;   /* texto secundário              */
  --wf-faint:    #b4b1a8;   /* placeholders/hint             */
  --wf-line:     #c7c4bc;   /* bordas                        */
  --wf-line-2:   #d9d6cd;   /* bordas suaves                 */
  --wf-fill:     #e7e4dc;   /* caixa cinza                   */
  --wf-fill-2:   #efece4;   /* caixa clara                   */
  --wf-bar:      #d6d3ca;   /* barra de texto placeholder    */
  --wf-bar-2:    #e2dfd6;   /* barra leve                    */
  --wf-paper:    #f4f2ec;   /* fundo da prancheta            */
  --wf-screen:   #ffffff;   /* fundo da tela                 */
  --wf-navy:     #253571;   /* ACENTO único                  */
  --wf-navy-ink: #1b2752;
  --wf-navy-08:  rgba(37,53,113,.08);
  --wf-navy-14:  rgba(37,53,113,.14);
  --wf-hand: 'Architects Daughter', 'Comic Sans MS', cursive;
  --wf-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wf-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
}

/* ---------- Prancheta (artboard interior) ---------- */
.wf-sheet{
  display:flex; gap:30px; align-items:flex-start;
  padding:30px 32px; background:var(--wf-paper);
  font-family:var(--wf-ui); color:var(--wf-ink);
  box-sizing:border-box; width:max-content;
}
.wf-screen{
  position:relative; background:var(--wf-screen);
  border:1px solid var(--wf-line);
  box-shadow:0 1px 0 rgba(0,0,0,.02), 0 10px 30px rgba(40,40,40,.07);
  box-sizing:border-box; overflow:hidden; flex:0 0 auto;
}
.wf-screen.is-mobile{ border-radius:18px; }
.wf-screen.is-desktop{ border-radius:6px; }

/* viewport ribbon */
.wf-vp{
  font-family:var(--wf-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--wf-faint);
  padding:0 0 7px 2px; display:flex; align-items:center; gap:8px;
}
.wf-vp::before{ content:''; width:14px; height:1px; background:var(--wf-faint); }

/* ---------- Notas / anotações de margem ---------- */
.wf-notes{ flex:0 0 250px; width:250px; padding-top:18px; }
.wf-note{
  font-family:var(--wf-hand); font-size:15.5px; line-height:1.34;
  color:#4a463d; margin:0 0 16px 0; padding-left:20px; position:relative;
}
.wf-note::before{
  content:''; position:absolute; left:0; top:7px;
  width:9px; height:9px; border:1.5px solid var(--wf-navy);
  border-radius:50%; background:var(--wf-navy-08);
}
.wf-note b{ color:var(--wf-navy-ink); font-weight:400; border-bottom:1.5px solid var(--wf-navy-14); }
.wf-note .k{ /* keyword underline in ink */ border-bottom:1.5px solid var(--wf-line); }
.wf-notes-title{
  font-family:var(--wf-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wf-muted);
  border-bottom:1px solid var(--wf-line-2); padding-bottom:8px; margin-bottom:16px;
}
.wf-note-state{ /* a note that documents a state */ }
.wf-note-state::before{ border-style:dashed; background:transparent; }

/* number badge that ties a note to a spot on the screen */
.wf-pin{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%;
  background:var(--wf-navy); color:#fff; font-family:var(--wf-ui);
  font-size:10px; font-weight:700; line-height:1; flex:0 0 auto;
  vertical-align:middle;
}
.wf-pin.on-screen{ position:absolute; z-index:6; box-shadow:0 0 0 2px #fff; }

/* ---------- Primitivos ---------- */
.wf-bar{ height:9px; border-radius:2px; background:var(--wf-bar); display:block; }
.wf-bar.lg{ height:13px; }
.wf-bar.sm{ height:7px; background:var(--wf-bar-2); }
.wf-lines{ display:flex; flex-direction:column; gap:8px; }
.wf-lines .wf-bar:last-child{ width:62%; }

.wf-box{
  background:var(--wf-fill); border:1px solid var(--wf-line-2);
  border-radius:4px; box-sizing:border-box;
}
.wf-box.dashed{ border-style:dashed; background:var(--wf-fill-2); }
.wf-box.plain{ background:var(--wf-fill-2); }

/* image / media placeholder with diagonal cross */
.wf-img{
  position:relative; background:
    linear-gradient(135deg, transparent calc(50% - .6px), var(--wf-line) 50%, transparent calc(50% + .6px)),
    linear-gradient(45deg,  transparent calc(50% - .6px), var(--wf-line) 50%, transparent calc(50% + .6px)),
    var(--wf-fill);
  border:1px solid var(--wf-line); border-radius:4px;
  box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  color:var(--wf-faint); font-family:var(--wf-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
}
.wf-img span{ background:var(--wf-fill); padding:2px 7px; border-radius:3px; }
.wf-img.video::after{
  content:''; position:absolute; width:0; height:0;
  border-left:16px solid var(--wf-muted); border-top:11px solid transparent;
  border-bottom:11px solid transparent; left:calc(50% - 5px); top:calc(50% - 11px);
}
.wf-img.video span{ display:none; }

.wf-avatar{
  border-radius:50%; background:var(--wf-fill); border:1px solid var(--wf-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--wf-faint); font-family:var(--wf-mono); font-size:9px; flex:0 0 auto;
}

/* ---------- Texto rotulado ---------- */
.wf-h{ font-weight:700; color:var(--wf-ink); line-height:1.12; letter-spacing:-.01em; }
.wf-h.xl{ font-size:30px; } .wf-h.lg{ font-size:22px; }
.wf-h.md{ font-size:17px; } .wf-h.sm{ font-size:14px; }
.wf-t{ color:var(--wf-muted); font-size:13px; line-height:1.4; }
.wf-t.sm{ font-size:11.5px; }
.wf-eyebrow{
  font-family:var(--wf-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--wf-muted);
  display:flex; align-items:center; gap:9px;
}
.wf-eyebrow::before{ content:''; width:22px; height:1px; background:var(--wf-line); }
.wf-data{ font-family:var(--wf-mono); font-size:11px; color:var(--wf-muted); letter-spacing:.02em; }

/* ---------- Controles ---------- */
.wf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 18px; border-radius:4px; box-sizing:border-box;
  font-family:var(--wf-ui); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.wf-btn.primary{ background:var(--wf-navy); color:#fff; border:1px solid var(--wf-navy); }
.wf-btn.ghost{ background:transparent; color:var(--wf-navy); border:1.5px solid var(--wf-navy); }
.wf-btn.plain{ background:var(--wf-fill); color:var(--wf-ink); border:1px solid var(--wf-line); }
.wf-btn.sm{ height:30px; padding:0 13px; font-size:11px; }
.wf-btn.lg{ height:46px; padding:0 26px; font-size:13px; }
.wf-btn.block{ display:flex; width:100%; }
.wf-btn .ar{ font-family:var(--wf-ui); font-weight:700; }

.wf-chip{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
  border-radius:999px; border:1px solid var(--wf-line); background:var(--wf-screen);
  font-size:11.5px; color:var(--wf-muted); white-space:nowrap;
}
.wf-chip.active{ border-color:var(--wf-navy); color:var(--wf-navy); background:var(--wf-navy-08); font-weight:600; }
.wf-tag{
  display:inline-flex; align-items:center; height:21px; padding:0 9px;
  border-radius:3px; background:var(--wf-fill); border:1px solid var(--wf-line-2);
  font-family:var(--wf-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--wf-muted);
}
.wf-tag.navy{ background:var(--wf-navy-08); color:var(--wf-navy); border-color:var(--wf-navy-14); }

/* input field */
.wf-field{ display:flex; flex-direction:column; gap:6px; }
.wf-field > label{
  font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--wf-muted);
  text-transform:uppercase; font-family:var(--wf-mono);
}
.wf-input{
  height:42px; border:1px solid var(--wf-line); border-radius:4px;
  background:var(--wf-screen); display:flex; align-items:center; padding:0 13px;
  color:var(--wf-faint); font-size:13px; box-sizing:border-box;
}
.wf-input.area{ height:96px; align-items:flex-start; padding-top:12px; }
.wf-input.focus{ border-color:var(--wf-navy); box-shadow:0 0 0 3px var(--wf-navy-14); color:var(--wf-ink); }
.wf-select{ justify-content:space-between; }
.wf-select::after{ content:'▾'; color:var(--wf-faint); }

/* links */
.wf-link{ color:var(--wf-navy); font-weight:600; border-bottom:1.5px solid var(--wf-navy-14); }

/* ---------- Header / Nav ---------- */
.wf-topbar{
  display:flex; align-items:center; gap:18px; padding:0 26px; height:64px;
  border-bottom:1px solid var(--wf-line-2); background:var(--wf-screen);
}
.wf-logo{
  display:flex; align-items:center; gap:9px; flex:0 0 auto;
}
.wf-logo .mark{
  width:30px; height:30px; border:1.5px dashed var(--wf-line); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--wf-mono); font-size:8px; color:var(--wf-faint); letter-spacing:.06em;
}
.wf-logo .wm{ display:flex; flex-direction:column; gap:3px; }
.wf-nav{ display:flex; gap:22px; align-items:center; }
.wf-nav a{ font-size:13px; font-weight:600; color:var(--wf-ink); white-space:nowrap; }
.wf-nav a.muted{ color:var(--wf-muted); font-weight:500; }
.wf-icon{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--wf-line);
  display:flex; align-items:center; justify-content:center; color:var(--wf-muted);
  flex:0 0 auto; background:var(--wf-screen);
}
.wf-langs{ display:flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:var(--wf-muted); font-family:var(--wf-mono); }
.wf-langs .on{ color:var(--wf-navy); }

/* mobile topbar */
.wf-mtop{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; height:54px; border-bottom:1px solid var(--wf-line-2);
  background:var(--wf-screen);
}
.wf-statusbar{
  height:22px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; font-family:var(--wf-mono); font-size:9px; color:var(--wf-faint);
  background:var(--wf-screen);
}
.wf-burger{ display:flex; flex-direction:column; gap:3.5px; }
.wf-burger i{ width:18px; height:1.8px; background:var(--wf-ink); display:block; }

/* bottom nav (mobile socio) */
.wf-botnav{
  display:flex; justify-content:space-around; align-items:center;
  height:56px; border-top:1px solid var(--wf-line-2); background:var(--wf-screen);
}
.wf-botnav .it{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--wf-faint); }
.wf-botnav .it .ic{ width:20px; height:20px; border-radius:5px; background:var(--wf-fill); }
.wf-botnav .it.on{ color:var(--wf-navy); }
.wf-botnav .it.on .ic{ background:var(--wf-navy-14); }
.wf-botnav .it small{ font-size:8.5px; }

/* ---------- Footer ---------- */
.wf-foot{ background:var(--wf-fill-2); border-top:1px solid var(--wf-line); }

/* ---------- Section helpers ---------- */
.wf-sec{ position:relative; }
.wf-rule{ height:1px; background:var(--wf-line-2); }
.wf-grid{ display:grid; gap:14px; }
.wf-row{ display:flex; gap:14px; }
.wf-between{ display:flex; align-items:center; justify-content:space-between; }
.wf-center{ display:flex; align-items:center; justify-content:center; }
.wf-stack{ display:flex; flex-direction:column; }

/* card surface */
.wf-card{
  background:var(--wf-screen); border:1px solid var(--wf-line-2);
  border-radius:5px; box-sizing:border-box; overflow:hidden;
}
.wf-card.flat{ box-shadow:none; }

/* breadcrumb */
.wf-crumb{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--wf-muted); font-family:var(--wf-mono); }
.wf-crumb .sep{ color:var(--wf-faint); }

/* state stamp */
.wf-state{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  border:1.5px dashed var(--wf-navy); border-radius:4px; background:var(--wf-navy-08);
  font-family:var(--wf-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--wf-navy); font-weight:700;
}
.wf-state.neutral{ border-color:var(--wf-line); color:var(--wf-muted); background:var(--wf-fill-2); }

/* spinner / loading skeleton shimmer (static) */
.wf-skel{ background:linear-gradient(90deg,var(--wf-fill) 25%,var(--wf-fill-2) 50%,var(--wf-fill) 75%); border-radius:4px; }

/* sponsor slot */
.wf-sponsor{
  border:1.5px dashed var(--wf-line); border-radius:4px; background:var(--wf-fill-2);
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--wf-faint); font-family:var(--wf-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
}
.wf-sponsor .lg-slot{ width:74px; height:30px; border:1px solid var(--wf-line); border-radius:3px; background:var(--wf-screen); }

/* journey shortcut tile */
.wf-jt{
  border:1px solid var(--wf-line-2); border-radius:6px; background:var(--wf-screen);
  padding:16px; display:flex; flex-direction:column; gap:10px;
}
.wf-jt .ic{ width:30px; height:30px; border-radius:6px; background:var(--wf-fill); border:1px solid var(--wf-line-2); }
.wf-jt.accent{ border-color:var(--wf-navy); background:var(--wf-navy-08); }
.wf-jt.accent .ic{ background:var(--wf-navy-14); border-color:transparent; }