/* ============================================================
   Medialog homepage wireframes — sketchy / low-fi vocabulary
   ============================================================ */

/* Brand palette (from PDF p.11) */
:root {
  --ml-blue:    #1A74B6;
  --ml-cyan:    #00B1ED;
  --ml-yellow:  #F59E0B;
  --ml-magenta: #FF35DC;
  --ml-red:     #E41649;
  --ink:        #0f1419;
  --paper:      #fdfcf9;
  --paper-2:    #F2EFE6;
  --line:       #111111;
  --muted:      #5b636d;

  --accent-on: 1; /* tweak: 0 hides palette accents (pure b&w) */
  --density:   1; /* tweak: 0.85 compact, 1.15 spacious */

  --sketch-radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Open Sans', system-ui, sans-serif;
  background: white;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.label, .nav, .ui {
  font-family: 'Open Sans', system-ui, sans-serif;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.01em; }
.serif { font-family: 'Open Sans', system-ui, sans-serif; }

/* Override all Caveat / Architects Daughter inline references with Open Sans */
[style*="Caveat"], [style*="Architects Daughter"], [style*="Patrick Hand"] {
  font-family: 'Open Sans', system-ui, sans-serif !important;
}

/* italic line texture — désactivée pour le hi-fi */
body::before { display: none; }
.frame { position: relative; }
.frame::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    102deg,
    transparent 0,
    transparent 11px,
    color-mix(in oklab, var(--ml-blue) 14%, transparent) 11px,
    color-mix(in oklab, var(--ml-blue) 14%, transparent) 12px
  );
  mix-blend-mode: multiply;
  opacity: .35;
}
.section, .frame > * { position: relative; z-index: 1; }


/* ---------- sketchy primitives ---------- */
.sk-box {
  border: 2px solid var(--line);
  border-radius: var(--sketch-radius);
  background: var(--paper);
  position: relative;
}
.sk-box.dashed { border-style: dashed; }
.sk-box.thick  { border-width: 3px; }
.sk-box.thin   { border-width: 1.5px; }

/* hand-drawn double border via box-shadow */
.sk-box.shadow-1 { box-shadow: 4px 5px 0 0 var(--ink); }
.sk-box.shadow-2 { box-shadow: 6px 7px 0 0 var(--ink); }
.sk-box.shadow-soft { box-shadow: 3px 4px 0 0 rgba(17,17,17,.25); }

.sk-box.tilt-l { transform: rotate(-.6deg); }
.sk-box.tilt-r { transform: rotate(.5deg); }
.sk-box.tilt-r2 { transform: rotate(.9deg); }

/* placeholder fills */
.ph {
  background:
    repeating-linear-gradient(45deg,
      transparent 0 8px,
      rgba(17,17,17,.07) 8px 9px);
}
.ph-dense {
  background:
    repeating-linear-gradient(45deg,
      transparent 0 5px,
      rgba(17,17,17,.10) 5px 6px);
}
.ph-x {
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(17,17,17,.35) 50%, transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), rgba(17,17,17,.35) 50%, transparent calc(50% + 1px));
}

/* squiggly underline */
.squiggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8'><path d='M0 4 Q 10 0 20 4 T 40 4 T 60 4 T 80 4' fill='none' stroke='%23111' stroke-width='1.6'/></svg>");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 80px 8px;
  padding-bottom: 6px;
}

/* highlighter */
.hl {
  background: linear-gradient(180deg, transparent 55%, color-mix(in oklab, var(--swatch, var(--ml-yellow)) calc(100% * var(--accent-on)), transparent) 55%);
  padding: 0 2px;
}

/* color chip */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 2px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: .8em;
  background: var(--paper);
}
.chip::before {
  content: "";
  width: .7em; height: .7em; border-radius: 999px;
  background: var(--swatch, var(--ink));
  border: 1px solid rgba(0,0,0,.4);
  opacity: var(--accent-on);
}
.chip.on { background: color-mix(in oklab, var(--swatch, var(--ink)) calc(20% * var(--accent-on)), var(--paper)); }

/* arrow connectors */
.arrow {
  position: absolute;
  pointer-events: none;
}

/* annotations (handwritten margin notes) */
.note {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: var(--muted);
  position: absolute;
  white-space: nowrap;
}
.note.red    { color: color-mix(in oklab, var(--ml-red) calc(100% * var(--accent-on)), var(--ink)); }
.note.blue   { color: color-mix(in oklab, var(--ml-blue) calc(100% * var(--accent-on)), var(--ink)); }

/* dotted grid backdrop — remplacé par blanc uni */
.canvas {
  background-color: white;
}

/* ---------- frame chrome (browser-ish) ---------- */
.frame {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 8px 10px 0 0 var(--ink);
}
.frame-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper-2);
  font-family: 'Architects Daughter', cursive;
  font-size: 14px;
}
.frame-bar .dots { display: inline-flex; gap: 6px; }
.frame-bar .dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.frame-bar .url {
  flex: 1;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-align: center;
}

/* ---------- tabs ---------- */
.tabs {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: end; gap: 0;
  padding: 16px 24px 0;
}
.tab {
  border: 2px solid var(--ink);
  border-bottom: none;
  background: var(--paper);
  padding: 10px 18px 10px;
  margin-right: -2px;
  border-radius: 14px 14px 0 0;
  cursor: pointer;
  font-family: 'Architects Daughter', cursive;
  font-size: 16px;
  position: relative;
  transition: transform .08s;
}
.tab .badge {
  display: inline-block;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0 7px;
  margin-right: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}
.tab[aria-selected="true"] .badge {
  background: var(--paper);
  color: var(--ink);
}
.tab:hover:not([aria-selected="true"]) { transform: translateY(-2px); }

.tab-meta {
  margin-left: auto;
  display: flex; gap: 10px; align-items: center;
  padding-bottom: 12px;
  font-family: 'Architects Daughter', cursive;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- header strip ---------- */
.proj-header {
  padding: 28px 32px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  border-bottom: 1.5px dashed var(--ink);
}
.proj-header h1 {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-size: 44px;
  line-height: 1;
}
.proj-header .sub {
  font-family: 'Architects Daughter', cursive;
  color: var(--muted);
  margin-top: 6px;
}
.proj-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
}

/* ---------- wireframe page wrapper ---------- */
.wireframe {
  padding: calc(28px * var(--density)) 32px 80px;
  display: none;
}
.wireframe[data-active="true"] { display: block; }

/* ---------- common page bits ---------- */
.section-tag {
  display: inline-block;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-family: 'Architects Daughter', cursive;
  font-size: 12px;
  background: var(--paper-2);
  margin-bottom: 8px;
}
.section-tag.accent {
  background: color-mix(in oklab, var(--swatch, var(--ml-blue)) calc(80% * var(--accent-on)), var(--paper-2));
  color: color-mix(in oklab, var(--ink) 100%, var(--paper) 0%);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--paper);
  font-family: 'Architects Daughter', cursive;
  font-size: 16px;
  box-shadow: 3px 3px 0 0 var(--ink);
  cursor: pointer;
}
.btn.primary {
  background: color-mix(in oklab, var(--ml-blue) calc(100% * var(--accent-on)), var(--ink));
  color: var(--paper);
}
.btn.ghost { background: transparent; box-shadow: none; }
.btn .arr { display: inline-block; transform: translateY(-1px); }

/* hr — torn paper feel */
.tear {
  border: none;
  height: 14px;
  background:
    radial-gradient(circle at 8px 14px, var(--paper) 8px, transparent 8.5px) repeat-x,
    radial-gradient(circle at 8px 0, var(--paper) 8px, transparent 8.5px) repeat-x;
  background-size: 16px 14px, 16px 14px;
  background-color: var(--ink);
  background-position: 0 0, 0 100%;
  margin: calc(28px * var(--density)) 0;
}

/* density-aware spacing helper */
.section { margin-block: calc(40px * var(--density)); }
.section.tight { margin-block: calc(20px * var(--density)); }

/* hidable */
.section[data-hidden="true"] { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .proj-header { grid-template-columns: 1fr; }
  .proj-meta { text-align: left; }
  .tabs { flex-wrap: wrap; padding-inline: 12px; }
  .wireframe { padding-inline: 14px; }
}

/* ---------- Tweaks panel local tweaks ---------- */
.legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-family: 'Architects Daughter', cursive;
  font-size: 12px;
}

/* arrow shapes */
.arrow-curve {
  position: absolute;
  pointer-events: none;
}

/* for big numbers */
.bignum {
  font-family: 'Caveat', cursive;
  font-size: 86px;
  line-height: .85;
  font-weight: 700;
}