/* ==========================================================
   Braid User Flow Wireframe – styles
   Colours are plain CSS colour names:
     midnightblue = root and persona boxes
     steelblue    = workflows and screens
     chocolate    = notifications
   ========================================================== */

/* Sizes used in several places (change them here) */
:root {
  --card-width: 420px;    /* every card is the same width, so columns line up */
  --shot-height: 216px;   /* height of the screenshot box */
  --gap: 56px;            /* space between two cards (the arrow lives here) */
  --branch: 44px;         /* length of the tree connector lines */
}

/* ---------- page ---------- */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: aliceblue;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

button {
  font: 14px Arial, Helvetica, sans-serif;
  color: black;
  background: white;
  border: 1px solid lightsteelblue;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover { border-color: steelblue; }

/* ---------- top bar ---------- */
.toolbar {
  background: white;
  border-bottom: 1px solid lightsteelblue;
  padding: 8px 16px;
}
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.toolbar h1 { margin: 0; font-size: 18px; }
.meta, .legend { font-size: 13px; color: dimgray; }
.legend { display: flex; gap: 14px; }
.spacer { flex: 1; }
#zoomLabel { min-width: 44px; text-align: center; font-size: 13px; color: dimgray; }

.dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 5px;
}

/* persona buttons (User, Admin, User Manager ...) */
.persona-nav { margin-top: 8px; }
.persona-nav button { font-weight: bold; }
.persona-nav button.active {
  background: midnightblue;
  border-color: midnightblue;
  color: white;
}

/* ---------- drawing area ---------- */
/* The canvas uses "margin: auto", so it is centred whenever it is smaller than the page
   and simply scrolls when it is bigger. */
.viewport {
  flex: 1;
  display: flex;
  overflow: auto;
  cursor: grab;
}
.viewport.dragging { cursor: grabbing; user-select: none; }

.canvas {
  display: flex;
  align-items: center;
  flex: none;
  margin: auto;
  padding: 40px;
}

/* ---------- tree boxes (Braid, persona, workflow) ---------- */
.box {
  flex: none;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  color: white;
}
.box b { font-size: 18px; line-height: 1.25; }
.box small { font-size: 13px; line-height: 1.5; color: aliceblue; }

.box.root { width: 200px; height: 240px; background: midnightblue; }
.box.root b { font-size: 38px; }

.box.persona { width: 220px; min-height: 130px; background: midnightblue; }

.box.workflow {
  width: 250px;
  height: 150px;
  background: steelblue;
  /* push the box down so it lines up with the middle of the screenshots */
  margin-top: calc((var(--shot-height) - 150px) / 2);
}

/* short line leaving a box on the right */
.box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--branch);
  border-top: 3px solid lightsteelblue;
}

/* ---------- tree branches: a vertical line with a short stub for each child ---------- */
.branch { display: flex; flex-direction: column; padding-left: var(--branch); }

.item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 0 16px var(--branch);
}
.item::before {                       /* vertical line */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-left: 3px solid lightsteelblue;
}
.item::after {                        /* stub to the child */
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: var(--branch);
  border-top: 3px solid lightsteelblue;
}
.item:first-child::before { top: 50%; }
.item:last-child::before { bottom: 50%; }
.item:only-child::before { display: none; }

.persona-group { padding: 28px 0 28px var(--branch); }

/* workflow rows: line up with the middle of the screenshot instead of the middle of the row */
.workflow-row { align-items: flex-start; }
.workflow-row::after { top: calc(16px + var(--shot-height) / 2); }
.workflow-row:first-child::before { top: calc(16px + var(--shot-height) / 2); }
.workflow-row:last-child::before { bottom: auto; height: calc(16px + var(--shot-height) / 2); }
.workflow-row .box.workflow::after { border-color: steelblue; }

/* ---------- cards (one screen or notification) ---------- */
.cards { display: flex; gap: var(--gap); padding-left: var(--branch); }

.card {
  position: relative;
  flex: none;
  width: var(--card-width);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: zoom-in;
}

/* arrow to the next card: a line ... */
.card:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(100% + 8px);
  top: calc(var(--shot-height) / 2 - 1px);
  width: calc(var(--gap) - 22px);
  border-top: 3px solid steelblue;
}
/* ... and its arrow head */
.card:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(100% + var(--gap) - 14px);
  top: calc(var(--shot-height) / 2 - 7px);
  border: 7px solid transparent;
  border-left: 10px solid steelblue;
}

.shot {
  position: relative;
  height: var(--shot-height);
  display: grid;
  place-items: center;
  background: ghostwhite;
  border: 1px solid lightsteelblue;
  border-radius: 10px;
}
.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
  object-fit: contain;
}
.card:hover .shot { outline: 2px solid steelblue; }

.shot.missing {
  border: 2px dashed lightsteelblue;
  color: dimgray;
  font-weight: bold;
  text-align: center;
  cursor: default;
}
.shot.missing small { display: block; font-weight: normal; font-size: 12px; }

/* the round step number in the corner */
.step {
  position: absolute;
  left: -12px;
  top: -12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 3px solid aliceblue;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  color: white;
}

.label {
  min-height: 60px;
  padding: 7px 10px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
}
.label span { display: block; font-size: 11px; letter-spacing: 0.05em; }
.desc { font-size: 13px; line-height: 1.45; color: dimgray; }

.screen { background: steelblue; }
.notice { background: chocolate; }

/* ---------- full-size viewer ---------- */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: black;
}
.viewer img {
  max-width: min(1500px, 96vw);
  max-height: 72vh;
  border-radius: 6px;
  background: white;
}
.viewer .info {
  width: min(1100px, 96vw);
  padding: 12px 16px;
  border-radius: 10px;
  background: white;
}
.viewer .crumb { font-size: 12px; font-weight: bold; color: dimgray; }
.viewer h2 { margin: 4px 0; font-size: 18px; }
.viewer p { margin: 0; line-height: 1.5; color: dimgray; }
.viewer-buttons { display: flex; gap: 8px; }

/* small screens: hide the extra text in the top bar */
@media (max-width: 700px) {
  .legend, .meta { display: none; }
}