/* SchoolDay v228. */

/* --- The body map, split into four drawings -----------------------------

   WIDE: the same arrangement the single picture had -- front and back side by
   side on the left, face above hands on the right -- built as a grid so each
   drawing is now its own SVG without the layout changing.

   NARROW: one drawing at a time, chosen with the buttons above it. The other
   three are hidden, not removed, so turning a tablet sideways cannot lose a
   half-finished mark and a mark made on Front is still there when the user
   comes back to it from Hands. */
.body-map-editor-v228 { display: block; margin-bottom: 1rem; }
.body-map-controls-v228 { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.body-map-controls-v228 > p { flex: 1 1 16rem; margin: 0; }

.body-views-v228 {
  display: grid;
  grid-template-columns: 347fr 333fr 400fr;
  grid-template-rows: 363fr 299fr;
  grid-template-areas: "front back face" "front back hands";
  gap: .5rem;
  align-items: stretch;
  max-width: 860px;
  margin: 0;
}
.body-view-v228 {
  border: 1px solid #cbd9e5;
  border-radius: .75rem;
  background: #fff;
  padding: .3rem;
  touch-action: none;
  min-width: 0;
}
.body-view-v228 svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;   /* the v227 rule caps the single wide picture */
  touch-action: none;
  background: transparent;
}
.body-view-v228[data-body-view-v228="front"] { grid-area: front; }
.body-view-v228[data-body-view-v228="back"]  { grid-area: back; }
.body-view-v228[data-body-view-v228="face"]  { grid-area: face; }
.body-view-v228[data-body-view-v228="hands"] { grid-area: hands; }

/* The tab buttons are only the way in on a narrow screen; on a wide one every
   drawing is already on show, so offering a choice between them would be a
   control that does nothing. */
.body-view-tabs-v228 { display: none; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem; }
.body-view-tab-v228 {
  flex: 1 1 auto;
  padding: .45rem .7rem;
  border: 1px solid #cbd9e5;
  border-radius: .6rem;
  background: #f6f9fb;
  color: #1b2836;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.body-view-tab-v228.active { background: #1b2836; border-color: #1b2836; color: #fff; }
.body-view-marked-v228 { color: #d72828; font-size: .8em; }
.body-view-tab-v228.active .body-view-marked-v228 { color: #ff8b8b; }

/* A saved note shows only the drawings that were marked, so it lays them out
   in a row of whatever it has rather than in the fixed four-square grid. */
.body-views-record-v228 {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: 42rem;
  margin: .75rem 0;
}
.body-views-record-v228 .body-view-v228 { flex: 0 1 auto; max-width: 13rem; }
.body-views-record-v228 .body-view-v228 svg { max-height: 20rem; }
.body-views-record-v228 .body-fill-v227 { fill: #fff; }
.body-views-record-v228 .body-outline-v227 { fill: #1b2836; fill-rule: evenodd; }
.body-views-record-v228 .body-mark-v227 {
  fill: none; stroke: #d72828; stroke-width: 14;
  stroke-linecap: round; stroke-linejoin: round; opacity: .78;
}
.body-views-record-v228 .body-label-v227 { font-family: inherit; font-size: 26px; font-weight: 600; fill: #1b2836; }

@media (max-width: 820px) {
  .body-views-v228 {
    display: block;
    max-width: 26rem;
  }
  .body-view-tabs-v228 { display: flex; }
  /* One at a time. The record preview keeps showing every marked drawing --
     it is a finished note being read, not a form being filled in. */
  .body-views-v228:not(.body-views-record-v228) > .body-view-v228 { display: none; }
  .body-views-v228:not(.body-views-record-v228) > .body-view-v228.is-active-v228 { display: block; }
  .body-view-v228 svg { max-height: 58vh; }
  /* Let the chips flow. Forcing one per row turned 22 options into a wall the
     user had to scroll past before reaching the drawing. */
  .bump-cause-option-v228 { flex: 0 1 auto; }
  .body-views-record-v228 { display: flex; }
  .body-views-record-v228 .body-view-v228 { max-width: 10rem; }
}

/* --- Bump note: cause first, then where was affected -------------------- */
.bump-step-v228 { margin: 0 0 .35rem; }
.bump-step-v228 > h4 {
  margin: 1rem 0 .5rem;
  font-size: .95rem;
  color: #1b2836;
}
.bump-cause-picker-v228 { margin-bottom: .75rem; }
.bump-cause-group-v228 { margin-bottom: .65rem; }
.bump-cause-group-v228 > h5 {
  margin: 0 0 .3rem;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: .18rem;
}
.bump-cause-options-v228 { display: flex; flex-wrap: wrap; gap: .3rem; }
.bump-cause-option-v228 {
  padding: .34rem .6rem;
  border: 1px solid #cbd9e5;
  border-radius: 1rem;
  background: #f6f9fb;
  color: #1b2836;
  font: inherit;
  font-size: .8rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.bump-cause-option-v228:hover { border-color: #94a9bd; }
.bump-cause-option-v228.active { background: #1b2836; border-color: #1b2836; color: #fff; }
.bump-cause-other-v228 { margin-top: .5rem; }
.bump-cause-other-v228 textarea { width: 100%; }
.bump-cause-status-v228 { margin: .45rem 0 0; }
.bump-cause-line-v228 { margin: .2rem 0 .4rem; }


/* --- Pupil tags and safeguarding events ---------------------------------

   The @ menu is positioned against the field rather than the page so it stays
   with the box when the panel scrolls, including inside the register's
   sub-window, where the panel is somewhere else entirely. */
.mention-field-v228 { position: relative; }
.mention-menu-v228 {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .4rem;
  border: 1px solid #cbd9e5;
  border-radius: .6rem;
  background: #fff;
  box-shadow: 0 .5rem 1.2rem rgba(27, 40, 54, .18);
}
.mention-menu-v228 p { margin: .2rem .3rem; }
.pupil-mention-option-v228 {
  text-align: left;
  padding: .4rem .55rem !important;
  font-size: .84rem !important;
  min-height: 0 !important;
}
.pupil-mention-option-v228[disabled] { opacity: .55; cursor: default; }
.mention-preview-v228 { margin: .35rem 0 0; font-style: italic; }

/* A tagged name in a saved record. The anonymous one is marked so it is
   obviously a withheld name rather than a pupil called "Another Student", and
   is focusable so the explanation is reachable without a mouse. */
.pupil-mention-v228 { font-weight: 600; color: #1b4a7a; white-space: nowrap; }
.pupil-mention-hidden-v228 {
  color: #64748b;
  border-bottom: 1px dotted #94a9bd;
  cursor: help;
}
.pupil-mention-hidden-v228:focus { outline: 2px solid #1b4a7a; outline-offset: 2px; }

.safeguarding-flag-v228 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .45rem;
  margin-top: .6rem;
  font-weight: 600;
}
.safeguarding-flag-v228 input { width: auto; margin: 0; }
.safeguarding-flag-note-v228 { margin: .2rem 0 .6rem; }

/* The stub in the general timeline. Deliberately plain: it is a signpost, and
   anything more would start putting back what the flag took away. */
.safeguarding-stub-v228 { border-left: 4px solid #b45309; background: #fffaf2; }
.safeguarding-stub-v228 h4 { margin: 0 0 .2rem; }