/* The "how to read this" card: a sheet over the run, not a modal wall -- it is
   narrow enough and far enough right to leave the rows it explains on screen. */

.guide {
  position: fixed; top: 40px; right: 10px; z-index: 35;
  width: min(560px, calc(100vw - 20px)); max-height: calc(100vh - 52px); overflow: auto;
  padding: 10px 16px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.guide-head { display: flex; align-items: center; gap: 8px; position: sticky; top: -10px; margin: -10px -16px 0; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.guide-head .strong { font-size: 14px; flex: 1; }
.guide-close { padding: 0 7px; line-height: 18px; }
.guide-sec { margin: 14px 0 0; }
.guide-sec h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--fg-strong); text-transform: uppercase; letter-spacing: .05em; }
.guide-sec p { margin: 6px 0 0; }
.guide-sub { margin-top: 10px !important; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
/* The pictures are drawn at a fixed width; a narrow window scales them down rather
   than scrolling the card sideways. */
.guide-fig { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }

.guide-units { display: grid; grid-template-columns: max-content max-content 1fr; gap: 2px 8px; align-items: baseline; margin: 8px 0 0; font-size: 11px; }
.guide-units .swatch { width: 9px; height: 9px; border-radius: 2px; margin: 0; align-self: center; }
.guide-units b { color: var(--fg-strong); font-weight: 600; }

.guide-keys { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; align-items: baseline; font-size: 12px; }
.guide-keys kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--fg-strong); white-space: nowrap; }
.guide-foot { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 11px; }

/* The slice map's unit key: one line, the rest behind a click when it does not fit. */
.sm-units { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.sm-units .u { display: inline-flex; align-items: center; }
.sm-units.clipped .more ~ .u { display: none; }
.sm-units .more { padding: 0 4px; font-size: 10px; line-height: 14px; border-radius: 3px; }