/* ==========================================================================
   MY EXPERIENCE: the graphic organizer
   --------------------------------------------------------------------------
   Erik's whiteboard shows one rectangle with lines radiating to circles. With
   22 items and labels running from one word to ten, a literal 22-spoke wheel
   needs either 6px type or a 4000px canvas. So this keeps the organizer and
   adds one level: hub, six branches, twenty-two bubbles. Every one of his 22
   items appears verbatim.

   Every connector is orthogonal (vertical spines, horizontal stubs). That is
   deliberate: a diagonal line has to be re-aimed every time a bubble opens
   and pushes its neighbours down. A horizontal stub anchored to a heading is
   correct forever, at every width, with no JS measuring anything.

   This block is self-contained and depends only on tokens already in
   site.css. On adoption, paste it at the end of site.css and drop the extra
   <link>.
   ========================================================================== */

/* --- The bar above the map ---------------------------------------------- */
.orgz-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.5rem;
  margin-bottom: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
}
.orgz-bar__hint {
  margin: 0;
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.orgz-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .5rem 1.1rem;
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-size: .8rem;          /* 12.8px */
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 2px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.orgz-toggle:hover { border-color: var(--brand); color: var(--brand); }
.orgz-toggle__box {
  width: 15px;
  height: 15px;
  flex: none;
  border: 1.6px solid var(--brand-mid);
  border-radius: 2px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}
.orgz-toggle[aria-pressed="true"] .orgz-toggle__box {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231571D8' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.2 18 20 6.5'/%3E%3C/svg%3E");
}
/* The button does nothing without JS, so it does not appear without JS. */
html:not(.js) .orgz-toggle { display: none; }

/* --- The stage ----------------------------------------------------------
   Mobile first: a single vertical spine with branches hanging off it.     */
.orgz {
  --wire: 2px;
  --wire-col: rgba(21, 113, 216, .30);
  --wire-fade: rgba(21, 113, 216, 0);
  --node: 9px;
  --spine: 7px;        /* x position of the mobile spine */
  --indent: 1.55rem;   /* branch content offset from that spine */
  --rail: 1.15rem;     /* twig offset for the leaf bubbles */
  position: relative;
}

/* --- Hub: Erik's central rectangle --------------------------------------- */
.orgz__hub { position: relative; }
.orgz__hub-in {
  position: relative;
  background: var(--brand-deep);
  border: 2px solid var(--brand-deep);
  border-radius: 3px;
  padding: clamp(1.1rem, .85rem + 1.3vw, 1.9rem);
  box-shadow: 0 22px 44px -32px rgba(0, 30, 68, .6);
}
.orgz__hub h2 {
  margin: 0;
  font-size: clamp(1.05rem, .9rem + .8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.orgz__hub p {
  margin: .65rem 0 0;
  font-size: .84rem;      /* 13.4px */
  line-height: 1.5;
  color: var(--on-dark-soft);
}

/* --- Branch -------------------------------------------------------------- */
.orgz__branch {
  position: relative;
  min-width: 0;
  padding: 1.5rem 0 0 var(--indent);
}
/* Spine, drawn as one segment per branch so the segments butt together into
   a single continuous line no matter how tall each branch grows. */
.orgz__branch::before {
  content: "";
  position: absolute;
  left: var(--spine);
  top: 0;
  bottom: 0;
  width: var(--wire);
  background: var(--wire-col);
}
.orgz__branch:last-child::before {
  background: linear-gradient(var(--wire-col) 0, var(--wire-col) 46%, var(--wire-fade) 100%);
}
/* Node marker on the branch heading. */
.orgz__branch::after {
  content: "";
  position: absolute;
  left: calc(var(--spine) - 3.5px);
  top: calc(1.5rem + 5px);
  width: var(--node);
  height: var(--node);
  border-radius: 2px;
  background: var(--brand-mid);
}

.orgz__head {
  margin: 0 0 .9rem;
  font-family: var(--body);
  font-size: .86rem;      /* 13.8px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* --- Leaves -------------------------------------------------------------- */
.orgz__leaves {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--rail);
  display: grid;
  gap: .5rem;
  /* One column at tablet width would otherwise give "hiring" a 700px pill. */
  max-width: 36rem;
}
.orgz__leaves::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -.45rem;
  bottom: 1.5rem;
  width: var(--wire);
  background: linear-gradient(var(--wire-col), var(--wire-fade));
}
.orgz__leaf { position: relative; min-width: 0; }
.orgz__leaf::before {
  content: "";
  position: absolute;
  left: calc(var(--rail) * -1 + 2px);
  top: 20px;
  width: calc(var(--rail) - 2px);
  height: var(--wire);
  background: var(--wire-col);
}

/* --- The bubble ---------------------------------------------------------- */
.bub { min-width: 0; }

.bub__label {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-height: 44px;
  padding: .58rem .95rem .58rem .72rem;
  background: #fff;
  border: 2px solid var(--paper-3);
  border-radius: 22px;
  color: var(--ink);
  font-size: .95rem;       /* 15.2px */
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease);
}
/* Three rules, because the three engines each need a different one. */
.bub__label::-webkit-details-marker { display: none; }
.bub__label::marker { content: ""; }
.bub__label { -webkit-appearance: none; }

.bub__text { min-width: 0; overflow-wrap: anywhere; }

/* Ballot box: the site's signature, doing double duty as the open indicator */
.bub__box {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: .14em;
  border: 1.6px solid var(--brand-mid);
  border-radius: 2px;
  background-size: 78%;
  background-position: center;
  background-repeat: no-repeat;
  transition: border-color .3s var(--ease);
}


.bub > .bub__label {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
}
.bub > .bub__label .bub__box {
  border-color: var(--brand-accent);
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232591F4' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.2 18 20 6.5'/%3E%3C/svg%3E");
}

.bub__note {
  margin: .5rem 0 .35rem .55rem;
  padding: .7rem .95rem;
  background: var(--paper-2);
  border-left: 3px solid var(--brand-accent);
  border-radius: 0 3px 3px 0;
  font-size: .88rem;      /* 14.1px */
  line-height: 1.6;
  color: var(--ink-soft);
}
/* --- 320 to 419px: drop the second level of indent -----------------------
   At 320px the wrap is 280px wide. Two rails plus the spine would eat 44 of
   those, so below 420px the leaf twigs go and the bubbles sit under their
   heading. The branch grouping still reads; the bubbles get 40px back.    */
@media (max-width: 419.98px) {
  .orgz { --spine: 6px; --indent: 1.25rem; }
  .orgz__leaves { padding-left: 0; }
  .orgz__leaves::before,
  .orgz__leaf::before { display: none; }
  .orgz__hub-in { padding: 1.05rem 1rem; }
  .bub__label { padding-right: .8rem; }
}

/* --- 900px and up: the spider -------------------------------------------
   Hub in the centre column spanning every row, three branches down each
   side, two vertical spines in the gutters, one stub per branch heading.  */
@media (min-width: 900px) {
  .orgz {
    --gutter: clamp(2.2rem, 1rem + 4vw, 5rem);
    display: grid;
    grid-template-columns: 1fr minmax(215px, 300px) 1fr;
    /* Explicit rows on purpose. The hub spans 1 / -1, and -1 only resolves
       against the explicit grid; without this line the hub silently collapses
       to a single row and both spines shrink with it. */
    grid-template-rows: repeat(3, auto);
    column-gap: var(--gutter);
    row-gap: clamp(1.9rem, 1.2rem + 2vw, 3.2rem);
    align-items: start;
  }

  .orgz__hub {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  .orgz__hub-in {
    width: 100%;
    text-align: center;
    z-index: 1;
  }

  /* The two gutter spines. Percentage insets plus a taper at each end, so
     they stay right however tall the columns get when bubbles open. */
  .orgz__hub::before,
  .orgz__hub::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--wire);
    background: linear-gradient(to bottom,
      var(--wire-fade) 0,
      var(--wire-col) 4%,
      var(--wire-col) 78%,
      var(--wire-fade) 98%);
  }
  .orgz__hub::before { right: calc(100% + (var(--gutter) / 2) - (var(--wire) / 2)); }
  .orgz__hub::after  { left:  calc(100% + (var(--gutter) / 2) - (var(--wire) / 2)); }

  /* Two short spokes off the box itself, meeting each spine dead centre. */
  .orgz__hub-in::before,
  .orgz__hub-in::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(var(--gutter) / 2);
    height: var(--wire);
    background: var(--wire-col);
    transform: translateY(-50%);
  }
  .orgz__hub-in::before { right: 100%; }
  .orgz__hub-in::after  { left: 100%; }

  /* Explicit placement: child 1 is the hub, 2 to 7 are the branches. */
  .orgz > :nth-child(2) { grid-column: 1; grid-row: 1; }
  .orgz > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .orgz > :nth-child(4) { grid-column: 1; grid-row: 3; }
  .orgz > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .orgz > :nth-child(6) { grid-column: 3; grid-row: 2; }
  .orgz > :nth-child(7) { grid-column: 3; grid-row: 3; }

  .orgz__branch { padding: 0; }
  .orgz__leaves { max-width: none; }

  /* The spine segment becomes a horizontal stub reaching for the gutter. */
  .orgz__branch::before,
  .orgz__branch:last-child::before {
    top: 9px;
    bottom: auto;
    left: auto;
    right: auto;
    width: calc(var(--gutter) / 2);
    height: var(--wire);
    background: var(--wire-col);
  }
  .orgz > :nth-child(-n+4).orgz__branch::before { left: 100%; }
  .orgz > :nth-child(n+5).orgz__branch::before  { right: 100%; }

  /* Node marker sits fully outside the branch box. Inside it, at -4.5px, it
     eats the first few pixels of the heading in the right hand column. */
  .orgz__branch::after { top: 4.5px; }
  .orgz > :nth-child(-n+4).orgz__branch::after { left: auto; right: -15px; }
  .orgz > :nth-child(n+5).orgz__branch::after  { left: -15px; }

  /* Left hand headings point back at the hub. Two or three uppercase words,
     so right alignment costs nothing in legibility and the label ends up
     beside its own node instead of a column away from it. The bubbles stay
     left aligned, because those are read, not scanned. */
  .orgz > :nth-child(-n+4).orgz__branch .orgz__head { text-align: right; }

  /* Mirror the leaf rail on the left hand side too, so every twig grows away
     from the hub instead of doubling back around the bubbles. */
  .orgz > :nth-child(-n+4).orgz__branch .orgz__leaves { padding: 0 var(--rail) 0 0; }
  .orgz > :nth-child(-n+4).orgz__branch .orgz__leaves::before { left: auto; right: 1px; }
  .orgz > :nth-child(-n+4).orgz__branch .orgz__leaf::before {
    left: auto;
    right: calc(var(--rail) * -1 + 2px);
  }
}

/* --- Paper --------------------------------------------------------------
   site.js opens every bubble on beforeprint, so the sheet carries all 22
   items and all 22 notes as a plain two-level outline.                    */
@media print {
  .orgz-bar { display: none !important; }

  .orgz { display: block !important; }
  .orgz__hub::before, .orgz__hub::after,
  .orgz__hub-in::before, .orgz__hub-in::after,
  .orgz__branch::before, .orgz__branch::after,
  .orgz__leaves::before, .orgz__leaf::before { display: none !important; }

  .orgz__hub-in {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1.5pt solid #000 !important;
    box-shadow: none !important;
    text-align: left !important;
    padding: 0 0 .5rem !important;
  }
  .orgz__hub h2 { color: #000 !important; font-size: 15pt !important; }
  .orgz__hub p { color: #333 !important; }

  .orgz__branch { padding: .7rem 0 0 !important; break-inside: avoid; }
  /* Undo the desktop mirroring: on paper everything reads left to right. */
  .orgz__head { color: #000 !important; text-align: left !important; }
  .orgz__leaves { padding: 0 !important; gap: .1rem !important; max-width: none !important; }

  .bub__label {
    min-height: 0 !important;
    padding: .12rem 0 !important;
    background: none !important;
    border: 0 !important;
    color: #000 !important;
    font-weight: 600;
  }
  .bub__box { display: none !important; }
  .bub__note {
    margin: .05rem 0 .3rem !important;
    padding: 0 0 0 .55rem !important;
    background: none !important;
    border-left: 1pt solid #999 !important;
    color: #333 !important;
    font-size: 9.5pt !important;
    /* The open animation uses fill-mode both. Cancel it, or a note caught
       mid-fade prints at partial opacity. */
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}