/* =========================================================
   D.I.G.G.E.R. FIELD JOURNAL
   Page 85 — Following the Flow of Thought
   ========================================================= */

.flow-tool .field-tool-page__inner {
  padding-bottom: 0.30in;
}

.flow-tool__hero {
  margin-top: 0.038in;
}

.flow-tool__hero .field-tool-title {
  font-size: 29pt;
  line-height: 0.94;
}

.flow-tool__hero .field-tool-subtitle {
  max-width: 6.2in;
  margin: 0.065in auto 0;
  font-size: 10.45pt;
  line-height: 1.12;
}

.flow-tool__hero .ornament-rule {
  margin-top: 0.07in;
  margin-bottom: 0.07in;
}

.flow-tool__hero .field-tool-intro {
  max-width: 6.55in;
  font-size: 8.95pt;
  line-height: 1.16;
}

.flow-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 0.18in;
  margin-bottom: 0.05in;
}

.flow-section-heading p,
.flow-section-heading h2 {
  margin: 0;
}

.flow-section-heading h2 {
  font-size: 9.8pt;
  line-height: 1;
}

/* ---------- Three rules ---------- */

.flow-rules {
  margin-top: 0.09in;
  break-inside: avoid;
}

.flow-rules__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.09in;
}

.flow-rule {
  display: grid;
  grid-template-columns: 0.23in minmax(0, 1fr);
  gap: 0.06in;
  padding: 0.07in 0.075in;
  border-top: 1.5px solid var(--olive);
  border-bottom: 1px solid var(--rule-light);
}

.flow-rule:nth-child(2) {
  border-top-color: var(--bronze);
}

.flow-rule__number {
  display: grid;
  place-items: center;
  width: 0.22in;
  height: 0.22in;
  border-radius: 50%;
  background: var(--olive-dark);
  font-family: var(--font-sans);
  font-size: 6.5pt;
  font-weight: 700;
  color: var(--paper);
}

.flow-rule:nth-child(2) .flow-rule__number {
  background: var(--bronze-dark);
}

.flow-rule h3 {
  margin: 0 0 0.014in;
  font-size: 7.45pt;
  line-height: 1;
}

.flow-rule p {
  margin: 0;
  font-size: 6.3pt;
  line-height: 1.08;
}

/* ---------- Relationship guide ---------- */

.relationship-guide {
  margin-top: 0.085in;
  break-inside: avoid;
}

.relationship-guide__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.055in 0.075in;
}

.relationship-item {
  padding: 0.052in 0.065in;
  border: 1px solid var(--rule-light);
  background: rgba(255, 255, 255, 0.12);
}

.relationship-item__label {
  display: block;
  margin-bottom: 0.018in;
  font-family: var(--font-sans);
  font-size: 6.2pt;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--olive-dark);
}

.relationship-item p {
  margin: 0;
  font-size: 5.95pt;
  line-height: 1.08;
}

.relationship-item__words {
  margin-top: 0.02in !important;
  font-family: var(--font-sans);
  font-size: 5.55pt !important;
  font-style: italic;
  color: var(--ink-muted);
}

/* ---------- Worked example ---------- */

.flow-example {
  margin-top: 0.085in;
  padding: 0.075in 0.10in;
  border: 1px solid var(--rule-light);
  background: rgba(255, 255, 255, 0.15);
  break-inside: avoid;
}

.flow-example__header {
  display: flex;
  justify-content: space-between;
  gap: 0.18in;
  align-items: end;
  margin-bottom: 0.055in;
}

.flow-example__header p,
.flow-example__header h2 {
  margin: 0;
}

.flow-example__header h2 {
  font-size: 10.1pt;
  line-height: 1;
}

.flow-example__note {
  max-width: 2.2in;
  font-family: var(--font-sans);
  font-size: 5.95pt;
  font-style: italic;
  line-height: 1.05;
  text-align: right;
  color: var(--ink-muted);
}

.flow-diagram {
  padding: 0.065in 0.08in;
  border-left: 2px solid var(--olive);
  background: var(--paper);
}

.flow-line {
  display: grid;
  grid-template-columns: 0.68in minmax(0, 1fr);
  gap: 0.08in;
  align-items: baseline;
  min-height: 0.19in;
}

.flow-line + .flow-line {
  margin-top: 0.012in;
}

.flow-line--level-2 {
  margin-left: 0.28in;
}

.flow-line--level-3 {
  margin-left: 0.56in;
}

.flow-line--main .flow-line__text {
  font-weight: 700;
  color: var(--olive-dark);
}

.flow-line__relationship {
  font-family: var(--font-sans);
  font-size: 5.5pt;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze-dark);
}

.flow-line__text {
  font-size: 7.15pt;
  line-height: 1.1;
}

.flow-example__observations {
  margin-top: 0.055in;
  padding-top: 0.05in;
  border-top: 1px solid var(--rule-light);
}

.flow-example__observations h3 {
  margin: 0 0 0.025in;
  font-size: 7.2pt;
  line-height: 1;
}

.flow-example__observations ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.018in 0.16in;
  margin: 0;
  padding-left: 0.14in;
}

.flow-example__observations li {
  font-size: 6.25pt;
  line-height: 1.08;
}

/* ---------- Five-pass process ---------- */

.flow-process {
  margin-top: 0.085in;
  padding: 0.07in 0.095in;
  border-top: 1px solid var(--bronze);
  border-bottom: 1px solid var(--bronze);
  break-inside: avoid;
}

.flow-process__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 0.18in;
  margin-bottom: 0.045in;
}

.flow-process__header p,
.flow-process__header h2 {
  margin: 0;
}

.flow-process__header h2 {
  font-size: 9.4pt;
  line-height: 1;
}

.flow-process__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.065in;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow-process__steps li {
  display: grid;
  grid-template-columns: 0.18in minmax(0, 1fr);
  gap: 0.045in;
  align-items: start;
}

.flow-process__steps span {
  display: grid;
  place-items: center;
  width: 0.175in;
  height: 0.175in;
  border-radius: 50%;
  background: var(--olive-dark);
  font-family: var(--font-sans);
  font-size: 5.6pt;
  font-weight: 700;
  color: var(--paper);
}

.flow-process__steps p {
  margin: 0;
  font-size: 5.7pt;
  line-height: 1.06;
}

/* ---------- Practice ---------- */

.flow-practice {
  margin-top: 0.08in;
  padding: 0.07in 0.095in;
  border: 1px solid var(--rule-light);
  break-inside: avoid;
}

.flow-practice__header {
  display: flex;
  justify-content: space-between;
  gap: 0.18in;
  align-items: end;
  margin-bottom: 0.045in;
}

.flow-practice__header p,
.flow-practice__header h2 {
  margin: 0;
}

.flow-practice__header h2 {
  font-size: 9.3pt;
  line-height: 1;
}

.flow-practice__header > p {
  max-width: 2.7in;
  font-family: var(--font-sans);
  font-size: 5.9pt;
  font-style: italic;
  line-height: 1.05;
  text-align: right;
  color: var(--ink-muted);
}

.flow-practice__lines {
  display: grid;
  grid-template-rows: repeat(4, 0.22in);
  border-top: 1px solid var(--rule-light);
}

.flow-practice__lines span {
  border-bottom: 1px solid var(--rule-light);
}

/* ---------- Bottom panels ---------- */

.flow-tool__bottom {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 0.14in;
  align-items: stretch;
  margin-top: 0.08in;
}

.flow-tool__bottom .panel {
  padding: 0.09in 0.13in;
}

.flow-tool__use .numbered-tool-list li {
  padding: 0.012in 0;
  font-size: 7pt;
  line-height: 1.05;
}

.flow-tool__use .numbered-tool-list li::before {
  width: 0.16in;
  height: 0.16in;
  font-size: 6.4pt;
}

.flow-tool__remember {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flow-tool__remember .remember-panel__head {
  margin-bottom: 0.028in;
}

.flow-tool__remember p {
  font-size: 7.55pt;
  line-height: 1.1;
}

@media print {
  .flow-rule,
  .relationship-guide,
  .flow-example,
  .flow-process,
  .flow-practice,
  .flow-tool__bottom .panel {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}