/* ==========================================================================
   SPRINKLERDUDE UI KIT — STEP 8: JOURNAL, TECH CARD, REPORTS, MAP
   Paste after the step 7 block and the Master Shovel block. It reuses
   .sd-note, .sd-msg, .sd-specs (step 5), .sd-subhead, .sd-checklist,
   .sd-list (step 6), .sd-stack, .sd-badge, .sd-zone-cards (step 7) and
   .sd-shovel (Master Shovel).
   ========================================================================== */

/* 11.0 Tokens -------------------------------------------------------------- */
:root {
  --sd-prose-max: 68ch;
  --sd-techcard-portrait: 72px;
  --sd-badge-size-xs: 64px;           /* badges in a row on the tech card */
  --sd-map-min: 230px;
  --sd-report-logo-h: 40px;
}

/* 11.1 Shared pieces --------------------------------------------------------- */
/* Tabs that wrap onto two rows on a phone, so all seven journal tabs show.
   Add to a kit .sd-tabs. On desktop it is the ordinary tab bar again, set a
   little tighter so seven tabs fit an 880px panel without scrolling. */
.sd-tabs--wrap {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  overflow: visible;
  padding: 0 0 var(--sd-sp-2);
}
.sd-tabs--wrap .sd-tab {
  flex: 1 1 auto;
  min-height: var(--sd-tap);
  margin-top: 0;
  padding: 0 var(--sd-sp-2);
  border-bottom: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  font-size: var(--sd-fs-sm);
  letter-spacing: 0;
}
.sd-tabs--wrap .sd-tab[aria-selected="true"] {
  min-height: var(--sd-tap);
  box-shadow: var(--sd-shadow-btn-sm);
}
@container sd-viewport (min-width: 900px) and (min-height: 521px) {
  .sd-tabs--wrap {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--sd-sp-1);
    padding: 0 var(--sd-sp-1);
  }
  .sd-tabs--wrap .sd-tab {
    flex: 0 1 auto;                   /* a long name wraps to two lines before the bar overflows */
    min-width: min-content;
    margin-top: 6px;
    padding: var(--sd-sp-1) var(--sd-sp-2);
    line-height: var(--sd-lh-tight);
    white-space: normal;
    border-bottom: 0;
    border-radius: var(--sd-r-md) var(--sd-r-md) 0 0;
  }
  .sd-tabs--wrap .sd-tab[aria-selected="true"] {
    min-height: calc(var(--sd-tap) + 6px);
    margin-top: 0;
    box-shadow: none;
  }
}

/* Nothing here yet */
.sd-empty {
  margin: 0;
  padding: var(--sd-sp-4);
  border: var(--sd-bw) dashed var(--sd-ink-soft);
  border-radius: var(--sd-r-md);
  background: var(--sd-paper-2);
  color: var(--sd-ink-soft);
  line-height: 1.4;
  text-align: center;
}
.sd-empty strong { display: block; color: var(--sd-ink); }

/* Long reading text (Guide, "What irrigation techs do") */
.sd-prose { max-width: var(--sd-prose-max); line-height: var(--sd-lh); }
.sd-prose > :first-child { margin-top: 0; }
.sd-prose > :last-child { margin-bottom: 0; }
.sd-glossary { margin: 0; }
.sd-glossary dt { margin-top: var(--sd-sp-3); font-weight: 800; }
.sd-glossary dt:first-child { margin-top: 0; }
.sd-glossary dd { margin: 2px 0 0; line-height: 1.4; }

/* A pass / fail word in a pill, readable on ink and on paper */
.sd-status {
  display: inline-block;
  padding: 2px var(--sd-sp-2);
  border-radius: var(--sd-r-pill);
  font-size: var(--sd-fs-sm);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.sd-status--pass { background: var(--sd-lime); color: var(--sd-ink); }
.sd-status--fail { background: var(--sd-paper); color: var(--sd-red-text); box-shadow: inset 0 0 0 var(--sd-bw) var(--sd-red-text); }
.sd-table caption .sd-status { float: right; margin-left: var(--sd-sp-2); }

/* A not-done-yet mark, to sit beside the kit's pass and fail marks */
.sd-mark--todo { color: var(--sd-ink-soft); }

/* 11.2 Journal: tests and notes ---------------------------------------------- */
.sd-records {
  display: grid;
  gap: var(--sd-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sd-sp-1) var(--sd-sp-3);
  align-items: center;
  padding: var(--sd-sp-2) var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-line);
  border-radius: var(--sd-r-md);
}
.sd-record__title { font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.sd-record__sum { display: block; font-size: var(--sd-fs-sm); line-height: 1.35; }
.sd-record__action { padding-bottom: 3px; }
.sd-notes {
  display: grid;
  gap: var(--sd-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-notes li {
  padding: var(--sd-sp-2) var(--sd-sp-3) var(--sd-sp-2) calc(var(--sd-sp-3) + 5px);
  border-radius: var(--sd-r-md);
  background: var(--sd-amber-tint);
  box-shadow: inset 5px 0 0 var(--sd-amber);
  line-height: 1.4;
}

/* 11.3 Tech card -------------------------------------------------------------- */
.sd-techcard {
  display: grid;
  gap: var(--sd-sp-4);
  min-width: 0;
}
.sd-techcard__head {
  display: flex;
  align-items: center;
  gap: var(--sd-sp-3);
}
.sd-techcard__portrait {
  flex: none;
  width: var(--sd-techcard-portrait);
  height: var(--sd-techcard-portrait);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-paper-2);
}
.sd-techcard__id { flex: 1; min-width: 0; display: grid; gap: var(--sd-sp-1); }
.sd-techcard__name {
  font-family: var(--sd-font-display);
  font-stretch: condensed;
  font-size: var(--sd-fs-xl);
  font-style: italic;
  font-weight: 800;
  line-height: var(--sd-lh-tight);
  overflow-wrap: anywhere;
}
.sd-techcard__section { display: grid; gap: var(--sd-sp-2); min-width: 0; }
/* The Master Shovel progress card: the quest, on an ink plate */
.sd-shovel-card {
  --sd-edge: var(--sd-black);
  display: flex;
  align-items: center;
  gap: var(--sd-sp-3);
  padding: var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-ink);
  color: var(--sd-paper);
  box-shadow: inset 0 -4px 0 var(--sd-blue), inset 0 -8px 0 var(--sd-lime);
  padding-bottom: calc(var(--sd-sp-3) + 8px);
}
.sd-shovel-card .sd-shovel { --sd-shovel-size: 56px; }
.sd-shovel-card .sd-meter { flex: 1; min-width: 0; }
.sd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-sp-3);
  align-items: flex-start;
}
.sd-badge--sm {
  width: var(--sd-badge-size-xs);
  height: var(--sd-badge-size-xs);
  border-width: 4px;
}
.sd-badge--sm .sd-badge__title,
.sd-badge--sm .sd-badge__sub { display: none; }       /* the name goes in the caption below */
/* <figure class="sd-badge-fig"><div class="sd-badge sd-badge--sm">…</div><figcaption>First Appointment</figcaption></figure> */
.sd-badge-fig {
  display: grid;
  justify-items: center;
  gap: var(--sd-sp-2);
  width: 92px;
  margin: 0;
}
.sd-badge-fig figcaption {
  font-size: var(--sd-fs-xs);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.sd-badge.is-locked {                 /* not earned yet */
  border-style: dashed;
  border-color: var(--sd-ink-soft);
  outline-color: var(--sd-ink-soft);
  background: var(--sd-paper-2);
  color: var(--sd-ink-soft);
}
/* Money in and out: the sign is in the text, color backs it up */
.sd-amount--in  { color: var(--sd-green-text); font-weight: 800; }
.sd-amount--out { color: var(--sd-red-text); font-weight: 800; }

/* 11.4 Service and install reports -------------------------------------------- */
.sd-report {
  display: grid;
  gap: var(--sd-sp-3);
  min-width: 0;
}
.sd-report__head {
  display: grid;
  gap: var(--sd-sp-1);
  padding: var(--sd-sp-3) var(--sd-sp-4) calc(var(--sd-sp-3) + 8px);
  border-radius: var(--sd-r-md);
  background: var(--sd-ink);
  color: var(--sd-paper);
  box-shadow: inset 0 -4px 0 var(--sd-blue), inset 0 -8px 0 var(--sd-lime);
  line-height: 1.4;
}
.sd-report__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--sd-report-logo-h);
  margin-bottom: var(--sd-sp-1);
  object-fit: contain;
  object-position: left;
}
.sd-report__head p { margin: 0; }
.sd-report__meta { color: var(--sd-hud-soft); font-size: var(--sd-fs-sm); }

/* 11.5 Map --------------------------------------------------------------------- */
.sd-maps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sd-map-min)), 1fr));
  gap: var(--sd-sp-3);
  align-items: start;
}
.sd-map {
  display: grid;
  gap: var(--sd-sp-2);
  margin: 0;
  padding: var(--sd-sp-2);
  border: var(--sd-bw) solid var(--sd-line);
  border-radius: var(--sd-r-md);
  background: var(--sd-paper);
}
.sd-map__canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sd-r-sm);
  background: var(--sd-paper-2);
}
.sd-map figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-sp-1) var(--sd-sp-2);
  font-size: var(--sd-fs-sm);
  font-weight: 800;
  line-height: 1.3;
}
/* Where you are: ink outline, lifted, and a "You are here" pill */
.sd-map.is-here {
  border-color: var(--sd-ink);
  box-shadow: var(--sd-shadow-card);
  margin: 0 4px 4px 0;
}
.sd-map__here {
  padding: 2px var(--sd-sp-2);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-pill);
  background: var(--sd-lime);
  font-size: var(--sd-fs-xs);
  white-space: nowrap;
}