/* ==========================================================
   D.I.G.G.E.R. FIELD JOURNAL
   FIELD TOOL 82 — CONTEXT CHECKLIST
   Minimum visible type size: 10pt
   ========================================================== */

.context-tool {
  --ctx-green: #405e4d;
  --ctx-green-dark: #2f473a;
  --ctx-green-light: #edf2ee;
  --ctx-blue: #566f7c;
  --ctx-blue-dark: #3f5662;
  --ctx-blue-light: #edf2f4;
  --ctx-bronze: #8b6944;
  --ctx-bronze-dark: #6f5134;
  --ctx-bronze-light: #f4efe7;
  --ctx-ink: #292d2a;
  --ctx-muted: #59605b;
  --ctx-rule: #b8c0ba;
  --ctx-rule-light: #d7ddd8;

  position: relative;
  box-sizing: border-box;
  width: 8.5in;
  height: 11in;
  overflow: hidden;
  background: #fff;
  color: var(--ctx-ink);
}

.context-tool .field-tool-page__inner {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 0.42in 0.58in 0.62in 0.72in;
}

.context-tool h1,
.context-tool h2,
.context-tool h3,
.context-tool p,
.context-tool li,
.context-tool span { box-sizing: border-box; }

.context-tool .tool-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.09in;
  min-height: 0.34in;
  padding: 0.04in 0.16in 0.04in 0.05in;
  border-radius: 0 0.14in 0.14in 0;
  background: var(--ctx-green-dark);
  color: #fff;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.context-tool .tool-ribbon__medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.28in;
  height: 0.28in;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  font-size: 13pt;
  line-height: 1;
}

.context-header {
  padding-bottom: 0.14in;
  border-bottom: 1px solid var(--ctx-rule);
}

.workflow-identity {
  display: flex;
  align-items: center;
  gap: 0.12in;
  margin-top: 0.14in;
}

.workflow-identity__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.58in;
  height: 0.58in;
  border: 2px solid var(--ctx-green-dark);
  border-radius: 0.11in;
  background: var(--ctx-green-dark);
  color: #fff;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 26pt;
  font-weight: 800;
  line-height: 1;
}

.workflow-identity__phase,
.workflow-identity__step {
  margin: 0;
  font-family: "Alegreya Sans", sans-serif;
}

.workflow-identity__phase {
  color: var(--ctx-green-dark);
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.workflow-identity__step {
  margin-top: 0.035in;
  color: var(--ctx-ink);
  font-size: 13pt;
  font-weight: 700;
  line-height: 1.05;
}

.context-header__eyebrow,
.continuation-header__eyebrow {
  margin: 0.14in 0 0.025in;
  color: var(--ctx-green-dark);
  font-family: "Alegreya Sans", sans-serif;
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.context-header h1,
.continuation-header h1 {
  margin: 0;
  font-family: "Alegreya", serif;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.context-header h1 { font-size: 25pt; line-height: 1; }
.continuation-header h1 { font-size: 22pt; line-height: 1.04; }

.context-header__subtitle {
  margin: 0.055in 0 0;
  color: var(--ctx-bronze-dark);
  font-family: "Alegreya", serif;
  font-size: 12pt;
  font-style: italic;
  line-height: 1.25;
}

.context-intro {
  margin-top: 0.12in;
  padding: 0.105in 0.14in;
  border-left: 4px solid var(--ctx-green);
  background: var(--ctx-green-light);
  color: var(--ctx-muted);
  font-family: "Alegreya", serif;
  font-size: 10.5pt;
  line-height: 1.32;
}

.context-intro strong { color: var(--ctx-green-dark); }

.context-section { margin-top: 0.15in; }

.section-band {
  display: flex;
  align-items: baseline;
  gap: 0.12in;
  padding: 0.075in 0.11in;
  border: 1px solid var(--ctx-green-dark);
  background: var(--ctx-green-light);
}

.section-band--bronze {
  border-color: var(--ctx-bronze-dark);
  background: var(--ctx-bronze-light);
}

.section-band span {
  color: var(--ctx-green-dark);
  font-family: "Alegreya Sans", sans-serif;
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.section-band--bronze span { color: var(--ctx-bronze-dark); }

.section-band h2 {
  margin: 0;
  color: var(--ctx-ink);
  font-family: "Alegreya", serif;
  font-size: 13pt;
  font-weight: 600;
  line-height: 1.1;
}

.context-step-list {
  display: grid;
  gap: 0.095in;
  margin-top: 0.11in;
}

.context-step {
  display: grid;
  grid-template-columns: 0.48in minmax(0, 1fr);
  gap: 0.12in;
  align-items: start;
  padding: 0.11in 0.13in;
  border: 1px solid var(--ctx-rule-light);
  border-left: 4px solid var(--ctx-green);
  background: #fff;
  break-inside: avoid;
}

.context-step--bronze { border-left-color: var(--ctx-bronze); }

.context-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.42in;
  height: 0.42in;
  border-radius: 50%;
  background: var(--ctx-green-dark);
  color: #fff;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 14pt;
  font-weight: 800;
  line-height: 1;
}

.context-step--bronze .context-step__number { background: var(--ctx-bronze-dark); }

.context-step h3 {
  margin: 0;
  color: var(--ctx-ink);
  font-family: "Alegreya", serif;
  font-size: 13pt;
  font-weight: 600;
  line-height: 1.12;
}

.context-step p {
  margin: 0.045in 0 0;
  color: var(--ctx-muted);
  font-family: "Alegreya", serif;
  font-size: 10pt;
  line-height: 1.28;
}

.context-principle {
  display: grid;
  grid-template-columns: 0.92in 1fr;
  margin-top: 0.14in;
  border: 1px solid var(--ctx-green-dark);
  background: var(--ctx-green-light);
}

.context-principle__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.09in;
  background: var(--ctx-green-dark);
  color: #fff;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.context-principle p {
  margin: 0;
  padding: 0.1in 0.14in;
  color: var(--ctx-muted);
  font-family: "Alegreya", serif;
  font-size: 10.5pt;
  line-height: 1.3;
}

.continuation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.2in;
  padding-bottom: 0.13in;
  border-bottom: 1px solid var(--ctx-rule);
}

.continuation-header > div:last-child {
  flex: 1;
  text-align: right;
}

.continuation-header__eyebrow { margin-top: 0; color: var(--ctx-bronze-dark); }

.context-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.12in;
  margin-top: 0.14in;
}

.tool-panel {
  padding: 0.13in;
  border: 1px solid var(--ctx-rule);
  background: #fff;
}

.tool-panel--cool {
  border-top: 4px solid var(--ctx-blue);
  background: var(--ctx-blue-light);
}

.tool-panel--warm {
  border-top: 4px solid var(--ctx-bronze);
  background: var(--ctx-bronze-light);
}

.tool-panel__kicker {
  margin: 0 0 0.1in;
  color: var(--ctx-ink);
  font-family: "Alegreya Sans", sans-serif;
  font-size: 12pt;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.large-number-list,
.guardrail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.large-number-list li {
  display: grid;
  grid-template-columns: 0.28in 1fr;
  gap: 0.08in;
  align-items: start;
  margin-top: 0.07in;
}

.large-number-list li:first-child { margin-top: 0; }

.large-number-list span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.26in;
  height: 0.26in;
  border-radius: 50%;
  background: var(--ctx-blue-dark);
  color: #fff;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 10pt;
  font-weight: 800;
  line-height: 1;
}

.large-number-list p {
  margin: 0;
  color: var(--ctx-muted);
  font-family: "Alegreya", serif;
  font-size: 10pt;
  line-height: 1.25;
}

.guardrail-list li {
  position: relative;
  margin-top: 0.065in;
  padding-left: 0.18in;
  color: var(--ctx-muted);
  font-family: "Alegreya", serif;
  font-size: 10pt;
  line-height: 1.25;
}

.guardrail-list li:first-child { margin-top: 0; }

.guardrail-list li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: -0.01in;
  color: var(--ctx-bronze-dark);
  font-family: "Alegreya Sans", sans-serif;
  font-size: 12pt;
  font-weight: 800;
}

.remember-box {
  display: grid;
  grid-template-columns: 0.98in 1fr;
  margin-top: 0.14in;
  border: 1px solid var(--ctx-green-dark);
  background: var(--ctx-green-light);
}

.remember-box__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.1in;
  background: var(--ctx-green-dark);
  color: #fff;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 11pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.remember-box > div:last-child { padding: 0.11in 0.14in; }

.remember-box__primary,
.remember-box__secondary {
  margin: 0;
  font-family: "Alegreya", serif;
  line-height: 1.25;
}

.remember-box__primary {
  color: var(--ctx-green-dark);
  font-size: 11pt;
  font-weight: 600;
}

.remember-box__secondary {
  margin-top: 0.035in;
  color: var(--ctx-muted);
  font-size: 10pt;
  font-style: italic;
}

.context-tool .field-tool-footer {
  position: absolute;
  right: 0.58in;
  bottom: 0.19in;
  left: 0.72in;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.1in;
  align-items: center;
  padding-top: 0.06in;
  border-top: 1px solid var(--ctx-rule);
  color: var(--ctx-muted);
  font-family: "Alegreya Sans", sans-serif;
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.context-tool .field-tool-footer span:nth-child(2) { text-align: center; }
.context-tool .field-tool-footer span:last-child { text-align: right; }

@media screen {
  body { background: #d9ddda; }
  .book { display: grid; gap: 0.35in; justify-content: center; padding: 0.35in; }
  .context-tool { box-shadow: 0 0.08in 0.25in rgba(0,0,0,0.16); }
}

@media print {
  @page { size: Letter; margin: 0; }
  body, .book { margin: 0; padding: 0; background: #fff; }
  .context-tool { margin: 0; page-break-after: always; break-after: page; }
  .context-tool:last-child { page-break-after: auto; break-after: auto; }
}