/* Estimation pictures use the shared schematic tokens in both themes. */
.m4-equation { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.m4-equation__box { flex:1 1 130px; min-width:0; padding:var(--s3); border:1px solid var(--line); background:var(--surface); display:grid; gap:var(--s2); }
.m4-equation__box strong { font-size:var(--fs-lg); overflow-wrap:anywhere; }
.m4-equation__label { font-size:var(--fs-micro); color:var(--ink-2); }
.m4-equation__arrow { color:var(--accent); font-size:var(--fs-lg); }
.m4-readouts { display:grid; grid-template-columns:1fr 1.5fr 1fr; border:1px solid var(--line-strong); gap:1px; background:var(--line); }
.m4-readout { display:grid; gap:var(--s2); padding:var(--s3); min-width:0; background:var(--surface); }
.m4-readout__value { font-size:var(--fs-lg); overflow-wrap:anywhere; }
.m4-equivalent { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:var(--s5); border:1px solid var(--line); background:var(--surface); padding:var(--s4); }
.m4-large-block { min-height:150px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--s2); border:2px solid var(--accent); background:var(--accent-soft); }
.m4-large-number { font-size:var(--fs-xl); }
.m4-quantities { display:flex; flex-wrap:wrap; gap:var(--s2); }
.m4-quantity { padding:var(--s2); border:1px solid var(--accent); background:var(--accent-soft); font-size:var(--fs-sm); }
.m4-block-detail { display:grid; gap:var(--s3); min-width:0; }
.m4-thousand { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:3px; width:100%; }
.m4-block-group { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; padding:2px; border:1px solid var(--line-strong); aspect-ratio:2/1; }
.m4-dot { background:var(--accent); min-height:2px; }
.m4-field { display:grid; gap:var(--s2); font-size:var(--fs-sm); font-weight:600; }
.m4-number { font-family:var(--font-mono); font-size:var(--fs-md); min-height:44px; max-width:100%; width:100%; border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--ink); background:var(--surface); padding:var(--s2) var(--s3); }
.m4-number:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.m4-day { position:relative; display:flex; gap:3px; height:180px; padding:var(--s6) var(--s3) var(--s6); border:1px solid var(--line); background:var(--surface); }
.m4-day__scale { position:absolute; top:var(--s2); left:var(--s3); color:var(--ink-2); font-size:var(--fs-micro); }
.m4-hour { display:block; position:relative; flex:1; min-width:0; height:100%; background:var(--surface-2); }
.m4-hour__fill { display:block; position:absolute; bottom:0; left:0; right:0; background:var(--accent); min-height:1px; }
.m4-hour__fill[data-peak="true"] { background:var(--ink); }
.m4-hour__label { position:absolute; bottom:calc(-1 * var(--s5)); left:0; font-size:var(--fs-micro); color:var(--ink-2); }
.m4-disks { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s2); }
.m4-disk { position:relative; min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2); border:1px solid var(--line-strong); overflow:hidden; background:var(--surface); }
.m4-disk > svg,.m4-disk__label { position:relative; z-index:1; }
.m4-disk__fill { position:absolute; bottom:0; left:0; right:0; background:var(--accent-soft); border-top:1px solid var(--accent); }
.m4-disk__label { font-size:var(--fs-micro); }
.m4-disk-extra { grid-column:1/-1; font-size:var(--fs-sm); color:var(--ink-2); padding:var(--s2); }
@media(max-width:600px) {
  .m4-readouts { grid-template-columns:1fr; }
  .m4-equivalent { grid-template-columns:1fr; gap:var(--s3); padding:var(--s3); }
  .m4-large-block { min-height:72px; }
  .m4-block-group { padding:1px; }
  .m4-equation__box { flex-basis:100%; }
  .m4-equation__arrow { display:none; }
  .m4-day { gap:2px; height:150px; padding-inline:var(--s2); }
  .m4-disks { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
