Library /observation-symbols-expanded.css
/* =========================================================
   D.I.G.G.E.R. FIELD JOURNAL
   Field Tool 85 — Observation Symbols
   Print-first, three-page layout; no visible text below 10pt
   ========================================================= */

.observation-symbols {
  --tool-olive: #405e4d;
  --tool-olive-dark: #2f473a;
  --tool-olive-light: #edf2ee;
  --tool-bronze: #8b6944;
  --tool-bronze-dark: #6f5134;
  --tool-bronze-light: #f4efe7;
  --tool-ink: #292d2a;
  --tool-muted: #5f665f;
  --tool-rule: #bcc3bd;
  --tool-rule-light: #d9ddd9;
}

.observation-symbols .field-tool-page__inner {
  position: relative;
  min-height: 100%;
  padding-bottom: 0.72in;
  box-sizing: border-box;
}

.observation-symbols .field-tool-header {
  margin-bottom: 0.12in;
}

.observation-symbols__hero {
  margin-top: 0;
}

.observation-symbols .workflow-identity {
  display: flex;
  align-items: center;
  gap: 0.12in;
  margin-bottom: 0.13in;
}

.observation-symbols .workflow-identity__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 0.54in;
  height: 0.54in;
  border-radius: 0.08in;
  color: #fff;
  background: var(--tool-olive-dark);
  font-family: var(--font-sans);
  font-size: 24pt;
  font-weight: 800;
  line-height: 1;
}

.observation-symbols .workflow-identity__phase,
.observation-symbols .workflow-identity__step {
  margin: 0;
}

.observation-symbols .workflow-identity__phase {
  color: var(--tool-bronze-dark);
  font-family: var(--font-sans);
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.observation-symbols .workflow-identity__step {
  margin-top: 0.04in;
  color: var(--tool-ink);
  font-family: var(--font-serif);
  font-size: 13pt;
  font-weight: 600;
  line-height: 1.05;
}

.observation-symbols .field-tool-title {
  margin: 0;
  font-size: 29pt;
  line-height: 0.98;
}

.observation-symbols .field-tool-subtitle {
  margin-top: 0.08in;
  font-size: 12pt;
  line-height: 1.2;
}

.observation-symbols .ornament-rule {
  margin-top: 0.11in;
  margin-bottom: 0.11in;
}

.observation-symbols .field-tool-intro {
  max-width: 6.7in;
  font-size: 10.5pt;
  line-height: 1.38;
}

.observation-symbols .field-tool-intro p {
  margin: 0;
}

.continued-label {
  margin: 0 0 0.07in;
  color: var(--tool-bronze-dark);
  font-family: var(--font-sans);
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- Symbol reference grid ---------- */

.symbol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.14in;
  margin-top: 0.18in;
}

.symbol-grid--continued {
  margin-top: 0.15in;
}

.symbol-card {
  display: grid;
  grid-template-columns: 0.56in minmax(0, 1fr);
  gap: 0.12in;
  align-items: start;
  min-width: 0;
  padding: 0.14in;
  border: 1px solid var(--tool-rule-light);
  border-top: 3px solid var(--tool-olive);
  background: rgba(237, 242, 238, 0.58);
  break-inside: avoid;
}

.symbol-card:nth-child(even) {
  border-top-color: var(--tool-bronze);
  background: rgba(244, 239, 231, 0.62);
}

.symbol-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.5in;
  height: 0.5in;
  border: 2px solid var(--tool-olive-dark);
  border-radius: 50%;
  color: var(--tool-olive-dark);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 17pt;
  font-weight: 800;
  line-height: 1;
}

.symbol-card:nth-child(even) .symbol-card__mark {
  border-color: var(--tool-bronze-dark);
  color: var(--tool-bronze-dark);
}

.symbol-card__mark--square {
  border-radius: 0.06in;
}

.symbol-card__body h2 {
  margin: 0;
  color: var(--tool-ink);
  font-size: 13pt;
  line-height: 1.05;
}

.symbol-card__body p {
  margin: 0.06in 0 0;
  color: var(--tool-muted);
  font-size: 10pt;
  line-height: 1.28;
}

.symbol-card__examples {
  font-family: var(--font-sans);
  font-size: 10pt !important;
  font-style: italic;
}

/* ---------- Page note ---------- */

.page-note {
  display: grid;
  grid-template-columns: 1.12in 1fr;
  margin-top: 0.18in;
  border: 1px solid var(--tool-olive-dark);
  background: var(--tool-olive-light);
  break-inside: avoid;
}

.page-note__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.12in;
  color: #fff;
  background: var(--tool-olive-dark);
  font-family: var(--font-sans);
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.page-note p {
  margin: 0;
  padding: 0.14in 0.16in;
  color: var(--tool-muted);
  font-size: 10pt;
  line-height: 1.35;
}

/* ---------- Marking principles ---------- */

.marking-principles {
  margin-top: 0.16in;
  padding: 0.16in;
  border: 1px solid var(--tool-bronze);
  background: var(--tool-bronze-light);
  break-inside: avoid;
}

.marking-principles__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 0.2in;
  margin-bottom: 0.14in;
  padding-bottom: 0.1in;
  border-bottom: 1px solid rgba(111, 81, 52, 0.25);
}

.marking-principles__header p,
.marking-principles__header h2 {
  margin: 0;
}

.marking-principles__header h2 {
  margin-top: 0.04in;
  font-size: 15pt;
  line-height: 1.08;
}

.marking-principles__header>p {
  max-width: 2in;
  color: var(--tool-muted);
  font-size: 10pt;
  font-style: italic;
  line-height: 1.25;
  text-align: right;
}

.marking-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.14in;
}

.marking-principle {
  display: grid;
  grid-template-columns: 0.38in minmax(0, 1fr);
  gap: 0.1in;
  align-items: start;
}

.marking-principle__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.34in;
  height: 0.34in;
  border-radius: 50%;
  color: #fff;
  background: var(--tool-olive-dark);
  font-family: var(--font-sans);
  font-size: 11pt;
  font-weight: 800;
  line-height: 1;
}

.marking-principle h3 {
  margin: 0;
  font-size: 11.5pt;
  line-height: 1.1;
}

.marking-principle p {
  margin: 0.05in 0 0;
  color: var(--tool-muted);
  font-size: 10pt;
  line-height: 1.28;
}

/* ---------- Sample passage ---------- */

.sample-passage {
  margin-top: 0.16in;
  padding: 0.16in;
  border: 1px solid var(--tool-rule-light);
  background: rgba(255, 255, 255, 0.38);
  break-inside: avoid;
}

.sample-passage__header {
  display: flex;
  justify-content: space-between;
  gap: 0.2in;
  align-items: end;
  margin-bottom: 0.12in;
}

.sample-passage__header p,
.sample-passage__header h2 {
  margin: 0;
}

.sample-passage__header h2 {
  margin-top: 0.04in;
  font-size: 15pt;
  line-height: 1.08;
}

.sample-passage__legend {
  max-width: 2.1in;
  color: var(--tool-muted);
  font-family: var(--font-sans);
  font-size: 10pt;
  font-style: italic;
  line-height: 1.2;
  text-align: right;
}

.sample-passage__text {
  padding: 0.15in 0.17in;
  border-left: 4px solid var(--tool-olive);
  background: #fff;
}

.sample-passage__text p {
  margin: 0;
  color: var(--tool-ink);
  font-size: 11pt;
  line-height: 1.48;
}

.sample-passage__text p+p {
  margin-top: 0.10in;
}

.sample-passage__text .sample-passage__reference {
  margin: 0 0 0.10in;
  padding-bottom: 0.06in;
  border-bottom: 1px solid var(--tool-rule-light);
  color: var(--tool-bronze-dark);
  font-family: var(--font-sans);
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.sample-passage__reference span {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.sample-passage__text sup {
  position: relative;
  top: -0.08em;
  margin-right: 0.025in;
  color: var(--tool-bronze-dark);
  font-family: var(--font-sans);
  font-size: 10pt;
  font-weight: 700;
  line-height: 1;
}

.mark-person {
  border: 1.5px solid var(--tool-olive-dark);
  border-radius: 50%;
  padding: 0 0.03in;
}

.mark-place {
  border: 1.5px solid var(--tool-bronze);
  padding: 0 0.03in;
}

.mark-divine {
  text-decoration: underline double;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.mark-time {
  border-bottom: 1.5px dotted var(--tool-ink);
}

.mark-command {
  font-weight: 700;
  border-bottom: 2px solid var(--tool-bronze);
}

.mark-repeat {
  background: linear-gradient(transparent 64%, rgba(139, 105, 68, 0.25) 64%);
}

.mark-promise {
  padding: 0 0.025in;
  border: 1.5px solid var(--tool-olive-dark);
  border-radius: 0.06in;
  font-weight: 600;
}

.mark-reason {
  padding: 0 0.02in;
  border-bottom: 2px solid var(--tool-olive-dark);
  font-family: var(--font-sans);
  font-weight: 700;
}

.mark-contrast {
  padding: 0 0.025in;
  border-top: 1.5px solid var(--tool-bronze);
  border-bottom: 1.5px solid var(--tool-bronze);
}

.sample-passage__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.08in 0.16in;
  margin-top: 0.11in;
  color: var(--tool-muted);
  font-family: var(--font-sans);
  font-size: 10pt;
  line-height: 1.2;
}

.sample-passage__key span {
  display: inline-flex;
  align-items: center;
  gap: 0.04in;
}

.sample-passage__key b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.22in;
  height: 0.22in;
  color: var(--tool-ink);
  font-size: 10pt;
}

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

.observation-symbols__bottom {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0.16in;
  align-items: stretch;
  margin-top: 0.16in;
}

.observation-symbols__bottom .panel {
  padding: 0.16in;
}

.observation-symbols__use .kicker,
.observation-symbols__remember .kicker {
  font-size: 10pt;
}

.observation-symbols__use .numbered-tool-list li {
  padding: 0.035in 0;
  font-size: 10pt;
  line-height: 1.22;
}

.observation-symbols__use .numbered-tool-list li::before {
  width: 0.25in;
  height: 0.25in;
  font-size: 10pt;
}

.observation-symbols__remember {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.observation-symbols__remember .remember-panel__head {
  margin-bottom: 0.08in;
}

.observation-symbols__remember .remember-panel__icon {
  font-size: 10pt;
}

.observation-symbols__remember p {
  margin: 0;
  font-size: 10pt;
  line-height: 1.35;
}

/* ---------- Footer ---------- */

.observation-symbols .field-tool-footer {
  position: absolute;
  right: 0;
  bottom: 0.04in;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.12in;
  align-items: center;
  padding-top: 0.09in;
  border-top: 1px solid var(--tool-rule);
  font-size: 10pt;
  line-height: 1;
}

.observation-symbols .field-tool-footer span:nth-child(2) {
  text-align: center;
}

.observation-symbols .field-tool-footer span:last-child {
  text-align: right;
}

/* ---------- Print ---------- */

@page {
  size: 8.5in 11in;
  margin: 0;
}

@media print {

  html,
  body {
    margin: 0;
    padding: 0;
  }

  .observation-symbols {
    break-after: page;
    page-break-after: always;
  }

  .observation-symbols:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .symbol-card,
  .page-note,
  .marking-principles,
  .sample-passage,
  .observation-symbols__bottom .panel {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- Three-page overflow correction ---------- */

.page-note--bronze {
  border-color: var(--tool-bronze-dark);
  background: var(--tool-bronze-light);
}

.page-note--bronze .page-note__label {
  background: var(--tool-bronze-dark);
}

.observation-symbols--page-two .marking-principles {
  margin-bottom: 0;
}

.observation-symbols__hero--compact .workflow-identity {
  margin-bottom: 0.10in;
}

.observation-symbols__hero--compact .field-tool-title {
  font-size: 27pt;
}

.observation-symbols--page-three .sample-passage {
  margin-top: 0.15in;
}

.observation-symbols--page-three .observation-symbols__bottom {
  margin-top: 0.18in;
}

/* =========================================================
   FINAL PRINT GEOMETRY REFACTOR
   Fixed trim size, mirrored binding margins, and a protected
   footer zone. These rules intentionally override shared page
   geometry so this tool prints predictably from a browser/PDF.
   ========================================================= */

.observation-symbols {
  position: relative;
  width: 8.5in;
  height: 11in;
  min-height: 11in;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--paper, #f8f5ee);
}

/* Mirror the binding allowance while retaining a generous outer edge. */
.observation-symbols.page--left .field-tool-page__inner {
  position: absolute;
  top: 0.44in;
  right: 0.60in;
  bottom: 0.34in;
  left: 0.76in;
}

.observation-symbols.page--right .field-tool-page__inner {
  position: absolute;
  top: 0.44in;
  right: 0.76in;
  bottom: 0.34in;
  left: 0.60in;
}

.observation-symbols .field-tool-page__inner {
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 0 0.88in;
  box-sizing: border-box;
}

/* Guarantee the 10pt floor even when shared utility styles are smaller. */
.observation-symbols .tool-ribbon,
.observation-symbols .tool-ribbon span,
.observation-symbols .tool-ribbon__medallion,
.observation-symbols .kicker,
.observation-symbols .continued-label,
.observation-symbols .field-tool-footer,
.observation-symbols .field-tool-footer span {
  font-size: 10pt;
}

.observation-symbols .tool-ribbon__medallion {
  line-height: 1;
}

/* Slightly calmer top rhythm improves consistency across the spread. */
.observation-symbols .field-tool-header {
  margin: 0 0 0.10in;
}

.observation-symbols .workflow-identity {
  margin-bottom: 0.11in;
}

.observation-symbols .ornament-rule {
  margin-top: 0.09in;
  margin-bottom: 0.09in;
}

/* Keep each page composition comfortably above the footer reserve. */
.observation-symbols--page-one .symbol-grid {
  gap: 0.12in 0.14in;
  margin-top: 0.15in;
}

.observation-symbols--page-one .symbol-card {
  padding-top: 0.12in;
  padding-bottom: 0.12in;
}

.observation-symbols--page-one .page-note {
  margin-top: 0.15in;
}

.observation-symbols--page-two .symbol-grid {
  margin-top: 0.13in;
}

.observation-symbols--page-two .marking-principles {
  margin-top: 0.14in;
  padding: 0.15in;
}

.observation-symbols--page-two .page-note {
  margin-top: 0.14in;
}

.observation-symbols--page-three .sample-passage {
  margin-top: 0.13in;
}

.observation-symbols--page-three .observation-symbols__bottom {
  margin-top: 0.15in;
}

/* Footer sits well inside the trim and has visible breathing room above it. */
.observation-symbols .field-tool-footer {
  position: absolute;
  right: 0;
  bottom: 0.08in;
  left: 0;
  min-height: 0.27in;
  padding: 0.10in 0 0;
  border-top: 1px solid var(--tool-rule);
  box-sizing: border-box;
  font-size: 10pt;
  line-height: 1.15;
}

@media screen {
  body {
    margin: 0;
    padding: 0.35in 0;
    background: #d8d8d8;
  }

  .observation-symbols {
    margin-bottom: 0.28in;
    box-shadow: 0 0.04in 0.18in rgba(0, 0, 0, 0.16);
  }
}

@media print {

  html,
  body,
  .book {
    width: 8.5in;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .observation-symbols {
    width: 8.5in !important;
    height: 11in !important;
    min-height: 11in !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    break-after: page;
    page-break-after: always;
  }

  .observation-symbols:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .observation-symbols *,
  .observation-symbols *::before,
  .observation-symbols *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Expanded worked passage: preserve footer clearance without reducing type. */
.observation-symbols--page-three .sample-passage {
  padding: 0.14in;
}

.observation-symbols--page-three .sample-passage__text {
  padding: 0.13in 0.15in;
}

.observation-symbols--page-three .sample-passage__key {
  gap: 0.06in 0.13in;
  margin-top: 0.10in;
}

.observation-symbols--page-three .observation-symbols__bottom {
  margin-top: 0.13in;
}


/* =========================================================
   EXPANDED WORKED EXAMPLE
   Demonstrates all twelve observation-symbol categories.
   ========================================================= */

.mark-question {
  padding: 0 0.025in;
  text-decoration: underline wavy var(--tool-bronze-dark);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.mark-warning {
  padding: 0 0.025in;
  border-left: 3px solid var(--tool-bronze-dark);
  background: rgba(139, 105, 68, 0.12);
}

.mark-comparison {
  padding: 0 0.025in;
  border-top: 1.5px dashed var(--tool-olive-dark);
  border-bottom: 1.5px dashed var(--tool-olive-dark);
}

.sample-passage__text--extended p {
  margin-bottom: 0.09in;
}

.sample-passage__text--extended p:last-child {
  margin-bottom: 0;
}

.observation-summary {
  margin-top: 0.14in;
  padding: 0.13in 0.15in;
  border-left: 3px solid var(--tool-olive-dark);
  background: var(--tool-olive-light);
}

.observation-summary h3 {
  margin: 0 0 0.05in;
  color: var(--tool-olive-dark);
  font-family: var(--font-sans);
  font-size: 11pt;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-transform: uppercase;
}

.observation-summary p {
  margin: 0;
  font-size: 10pt;
  line-height: 1.28;
}

/* Page 85C is devoted to the full worked passage. */
.observation-symbols--page-three .sample-passage {
  margin-top: 0.10in;
  padding: 0.12in;
}

.observation-symbols--page-three .sample-passage__text {
  padding: 0.11in 0.13in;
}

.observation-symbols--page-three .sample-passage__text p {
  font-size: 10pt;
  line-height: 1.24;
}

.observation-symbols--page-three .sample-passage__key {
  gap: 0.055in 0.12in;
  margin-top: 0.09in;
  font-size: 10pt;
}

/* Page 85D gives the instructional material its own footer-safe page. */
.observation-symbols__bottom--stacked {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.18in;
  margin-top: 0.18in;
}

.observation-symbols__bottom--stacked .panel {
  padding: 0.18in 0.20in;
}

.observation-reflection ul {
  margin: 0.10in 0 0;
  padding-left: 0.23in;
}

.observation-reflection li {
  margin: 0 0 0.08in;
  font-size: 10pt;
  line-height: 1.3;
}

.observation-reflection li:last-child {
  margin-bottom: 0;
}

.observation-symbols--page-four .numbered-tool-list li,
.observation-symbols--page-four .observation-symbols__remember p {
  font-size: 10pt;
  line-height: 1.28;
}