/* IMG_8446 diary geometry. See docs/CORE_PAPER_FORM_REFERENCE.md.
   The flat Thursday print panel supplies proportions, not camera distortion. */
.dpb-paper-form {
  --paper-blue: #009dca;
  --paper-green: #075c38;
  --paper-orange: #a6530a;
  --paper-axis: 61.5%;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  color: var(--paper-green);
  background: #fff;
  font-family: Arial, "Liberation Sans", sans-serif;
}

.dpb-paper-header { display: block; margin: 0; padding: 0; border: 0; }
.dpb-paper-header img { display: block; width: 100%; height: auto; border-radius: 8px; }
.dpb-paper-body { position: relative; isolation: isolate; }
.dpb-paper-spine {
  position: absolute;
  z-index: -1;
  top: 98px;
  bottom: 0;
  left: var(--paper-axis);
  width: 5.5%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #fbc690a6, #74d4eee0 48%, #fbc690a6);
  pointer-events: none;
}
.dpb-food-section,
.dpb-activity-group { border: 1.5px solid var(--paper-blue); border-radius: 24px; }
.dpb-paper-principle,
.dpb-activity-group .dpb-paper-principle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 .3em;
  min-height: 30px;
  padding: 4px 9px;
  border-bottom: 1px solid var(--paper-blue);
  border-radius: 22px 22px 0 0;
  background: linear-gradient(#fcd8a8a6, #fff0);
  line-height: 1.2;
}
.dpb-paper-principle > div { display: contents; }
.dpb-paper-principle h2 { color: var(--paper-green); font-size: 15px; line-height: 1.2; }
.dpb-paper-principle p { width: auto; color: var(--paper-green); font-size: 13px; line-height: 1.3; }
.dpb-food-desktop { display: block; }
.dpb-food-column-headings { display: grid; grid-template-columns: 38% 62%; padding: 4px 12px 0; font-size: 14px; font-weight: 700; }
.dpb-food-ladder { padding: 0 10px 10px 0; }
.dpb-paper-stairs { position: absolute; top: 0; left: 0; width: 38%; height: calc(100% - 10px); overflow: visible; }
.dpb-paper-stairs path { fill: none; stroke: #efa153; stroke-width: 6; }
.dpb-paper-stairs path + path { stroke: var(--paper-blue); stroke-width: 2; }
.dpb-food-step {
  --stair-inset: calc(5% + var(--stair-level) * 6%);
  display: grid;
  grid-template-columns: 38% 62%;
  width: 100%;
  min-height: 48px;
  margin: 0;
  border: 0;
}
.dpb-step-person { position: absolute; left: calc(var(--stair-inset) - 20px); top: 7px; }
.dpb-step-person img { width: 16px; height: 28px; opacity: 1; }
.is-protein-cross .dpb-step-person { visibility: hidden; }
.dpb-food-label { display: block; padding: 3px 5px 3px calc(var(--stair-inset) * 2.63); }
.dpb-food-value { position: absolute; top: 26px; left: max(24px, calc(var(--stair-inset) - 20px)); transform: translateX(-100%); color: var(--paper-green); font-size: 20px; line-height: 1.1; }
.dpb-paper-cross-caption { position: absolute; top: 112px; left: 1%; width: 8.5%; margin: 0; color: var(--paper-green); font-size: 12px; line-height: 1.2; text-align: center; }
.dpb-food-label span { display: block; color: var(--paper-orange); font-size: 20px; line-height: 1.12; font-weight: 700; }
.dpb-food-label small { display: block; color: var(--paper-green); font-size: 14px; line-height: 1.2; }
.dpb-food-icons { grid-column: 2; }
.dpb-food-desktop .dpb-food-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0; }
.dpb-food-step.is-protein-cross::before {
  top: 3px;
  bottom: 3px;
  left: 19%;
  right: 0;
  border-radius: 0;
  background: linear-gradient(0deg, #fbc690aa, #71cbe9c9 52%, #fbc690aa);
  clip-path: polygon(0 34%, 47% 20%, 47% 0, 56% 50%, 65% 0, 65% 20%, 100% 34%, 100% 66%, 65% 80%, 65% 100%, 56% 50%, 47% 100%, 47% 80%, 0 66%);
}
.dpb-food-desktop .dpb-portion { width: 100%; min-width: 0; height: 44px; padding: 4px; border-radius: 3px; }
.dpb-portion-base { filter: brightness(.8) saturate(1.1); opacity: 1; }
.dpb-portion-fill { filter: brightness(.55) saturate(1.2); }
.dpb-portion.is-full { background: #ffe7c3a6; }
.dpb-portion.is-half { background: linear-gradient(90deg, #ffe7c3 50%, transparent 50%); }
.dpb-food-desktop .dpb-portion img { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.dpb-portion:focus-visible { outline: 2px solid #075c38; outline-offset: -2px; transform: none; }

.dpb-activity-section { display: block; margin: 0; padding: 0; border: 0; }
.dpb-activity-group { position: relative; padding: 0; }
.dpb-activity-group:first-child { border-left: 1.5px solid var(--paper-blue); }
.dpb-activity-grid { gap: 0 14px; padding: 0 12px 4px; }
.dpb-activity-grid form { border-bottom: 1px solid #f2bb79; }
.dpb-activity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 3px 8px 3px 0;
  border-radius: 2px;
  color: var(--paper-orange);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  text-align: left;
}
.dpb-activity-icon { display: none; }
.dpb-activity-mark { display: grid; place-items: center; width: 30px; height: 22px; border: 1.5px solid #1683a1; color: transparent; background: #ffffff80; line-height: 1; }
.dpb-activity.is-active { color: var(--paper-green); }
.dpb-activity.is-active .dpb-activity-mark { border-color: var(--paper-green); color: #fff; background: var(--paper-green); }
.dpb-activity.is-bouncing .dpb-activity-mark { animation: dpb-bounce .46s ease; }
.dpb-activity:focus-visible { outline: 2px solid var(--paper-green); outline-offset: -2px; }
.dpb-paper-day-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 52px; padding: 7px 14px; border: 1.5px solid var(--paper-blue); border-radius: 24px 24px 0 0; background: linear-gradient(#ffe1b9, #fff); }
.dpb-paper-day-band > div { display: flex; flex-direction: column; }
.dpb-paper-day-band span { font-size: 12px; }
.dpb-paper-day-band output { color: var(--paper-orange); font-size: 20px; font-weight: 700; }
.dpb-paper-day-band time { font-size: 16px; font-weight: 700; }
.dpb-paper-notes { border: 1.5px solid var(--paper-blue); border-top: 0; border-radius: 0 0 24px 24px; }
.dpb-paper-notes h2 { margin: 0; padding: 6px 12px; border-bottom: 1px solid var(--paper-blue); color: var(--paper-orange); font-size: 16px; }
.dpb-ruled-note { position: relative; }
.dpb-note-times { position: absolute; top: 0; left: 0; width: 40px; pointer-events: none; }
.dpb-note-times span { display: block; height: 36px; padding-left: 12px; color: #333; font-size: 16px; line-height: 36px; }
.dpb-paper-notes textarea { display: block; min-height: 216px; margin: 0; padding: 0 12px 0 45px; border: 0; border-radius: 0; color: #293e36; background: repeating-linear-gradient(to bottom, transparent 0 35px, #009dca 35px 36px); font-size: 16px; line-height: 36px; }
.dpb-paper-notes textarea:focus { outline: 2px solid var(--paper-green); outline-offset: -2px; }
.dpb-note-guide { margin: 8px 12px 0; color: #52665c; font-size: 12px; line-height: 1.4; }
.dpb-paper-notes .dpb-save-status { margin: 4px 12px 8px; }
.dpb-reflection-grid { grid-template-columns: 1fr; }

@media (max-width: 760px) {
  .dpb-paper-form { padding: 0; }
  .dpb-paper-header { margin: 0; }
  .dpb-paper-principle,
  .dpb-activity-group .dpb-paper-principle { justify-content: flex-start; padding: 8px 10px; }
  .dpb-paper-principle h2 { white-space: normal; }
  .dpb-paper-principle p { font-size: 12px; }
  .dpb-food-desktop { display: none; }
  .dpb-food-mobile { border: 0; border-radius: 0 0 23px 23px; }
  .dpb-mobile-category { padding-left: 6px; padding-right: 6px; }
  .dpb-mobile-category small { font-size: 10px; }
  .dpb-mobile-category b { color: #60380c; background: #fcd08e; }
  .dpb-mobile-category:focus-visible { outline: 2px solid #075c38; outline-offset: -2px; }
  .dpb-paper-spine { top: 90px; }
  .dpb-activity-group { border-top: 1.5px solid var(--paper-blue); }
  .dpb-activity-group:first-child { border-top: 1.5px solid var(--paper-blue); }
  .dpb-activity-grid { gap: 0 6px; padding: 0 7px 5px; }
  .dpb-activity { grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: center; gap: 4px; min-height: 70px; padding: 5px 2px; font-size: 13px; hyphens: auto; overflow-wrap: anywhere; }
  .dpb-activity-mark { width: 28px; height: 20px; }
  .dpb-paper-day-band time { font-size: 14px; }
  .dpb-note-guide { font-size: 11px; }
}

@media (max-width: 360px) {
  .dpb-activity { font-size: 12px; }
}