/* SchoolDay v267.12 -- messages and tasks.

   ONE STYLESHEET FOR BOTH PAGES. The admin page and the parents page mount the
   same messaging module, so they load the same rules; the parents page carries
   its own colours and this file takes them from custom properties with plain
   fallbacks rather than naming either page's palette.

   Loaded after styles.css and BEFORE admin-function-shell-v2365.css, which has
   to stay the last stylesheet on the admin page. */

:root {
  /* v268.2: FAINT GREY, as Sean asked. It was a blue-grey borrowed from the
     admin palette, which read as a box drawn round the messages rather than as
     the edge of them. Everything that draws a line in this file goes through
     this one property, so the whole surface changes together. */
  --msg-line-v26712: #e2e5e9;
  --msg-ink-v26712: #123b5d;
  --msg-quiet-v26712: #5b7089;
  --msg-mine-v26712: #e3f0fb;
  --msg-theirs-v26712: #f4f6f8;
  --msg-alert-v26712: #c0392b;
}

/* ------------------------------------------------------------- the shell -- */

.msg-shell-v26712 {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  min-height: 28rem;
}

@media (max-width: 860px) {
  /* One column on a phone: the list above, the conversation below. A parent
     reading on a phone wants the thread, and scrolling past a list of nine
     class chats to reach it is not a design, it is a tax. */
  .msg-shell-v26712 { grid-template-columns: minmax(0, 1fr); }
  .msg-list-v26712 { max-height: 16rem; }
}

.msg-error-v26712 {
  grid-column: 1 / -1;
  margin: 0;
  padding: .55rem .7rem;
  border: 1px solid #e0b96a;
  border-left: 4px solid #d89b1f;
  border-radius: .4rem;
  background: #fdf6e6;
  color: #5c4310;
}

/* -------------------------------------------------------- the list, left -- */

.msg-list-v26712 {
  border: 1px solid var(--msg-line-v26712);
  border-radius: .6rem;
  background: #fff;
  overflow: auto;
  max-height: 34rem;
}

.msg-list-head-v26712 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--msg-line-v26712);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.msg-list-head-v26712 h2 { margin: 0; font-size: 1.05rem; }

.msg-group-v26712 h3 {
  margin: 0;
  padding: .5rem .7rem .3rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--msg-quiet-v26712);
}

/* v267.13: SQUARE. styles.css gives every <button> a 0.65rem radius and the
   parents page draws a border on top of that, so a list of chat names came out
   as a stack of lozenges with red outlines. A row in a list is not a button to
   look at -- it is a line to read -- so the rounding and the border are taken
   off here rather than fought with elsewhere. */
.msg-row-v26712 {
  display: grid;
  width: 100%;
  gap: .12rem;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #eef2f6;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.msg-list-v26712 .msg-row-v26712,
.msg-list-v26712 .msg-directory-list-v26712 button {
  border-radius: 0;
}
.msg-row-v26712:hover { background: #f6fafe; }
.msg-row-v26712.is-active { background: #eaf3fb; }
.msg-row-v26712.has-unread .msg-row-title-v26712 { font-weight: 800; }

.msg-row-top-v26712 { display: flex; align-items: center; gap: .4rem; }
.msg-row-title-v26712 {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  color: var(--msg-ink-v26712);
  overflow-wrap: anywhere;
}
.msg-row-sub-v26712,
.msg-row-preview-v26712,
.msg-row-when-v26712 {
  font-size: .82rem;
  color: var(--msg-quiet-v26712);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The red bubble Sean asked for, in all three places it appears. */
.msg-badge-v26712 {
  flex: 0 0 auto;
  min-width: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--msg-alert-v26712);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.35rem;
  text-align: center;
}

.msg-empty-v26712 { padding: 1rem .7rem; margin: 0; }

.msg-directory-v26712 {
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--msg-line-v26712);
  background: #f9fcff;
  display: grid;
  gap: .4rem;
}
.msg-search-v26712 { display: grid; gap: .2rem; }
.msg-directory-list-v26712 { display: grid; gap: .2rem; max-height: 12rem; overflow: auto; }
.msg-directory-list-v26712 button {
  text-align: left;
  border: 1px solid var(--msg-line-v26712);
  border-radius: .4rem;
  background: #fff;
  padding: .4rem .5rem;
  cursor: pointer;
}
.msg-directory-list-v26712 button:hover { border-color: #1765a8; background: #eaf3fb; }

/* ------------------------------------------------------ the thread, right -- */

.msg-thread-v26712 {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--msg-line-v26712);
  border-radius: .6rem;
  background: #fff;
  min-height: 28rem;
  max-height: 34rem;
}
.msg-thread-v26712.is-empty { align-items: center; justify-content: center; }

.msg-thread-head-v26712 {
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--msg-line-v26712);
}
.msg-thread-head-v26712 h2 { margin: 0; font-size: 1.05rem; }
.msg-thread-head-v26712 p { margin: .15rem 0 0; font-size: .85rem; }

/* The feed is the part that scrolls, so the composer never leaves the screen
   while someone is writing. */
.msg-feed-v26712 {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.msg-bubble-v26712 {
  align-self: flex-start;
  max-width: min(38rem, 82%);
  display: grid;
  gap: .15rem;
  padding: .45rem .6rem;
  border-radius: .7rem;
  background: var(--msg-theirs-v26712);
  border: 1px solid var(--msg-line-v26712);
}
.msg-bubble-v26712.is-mine {
  align-self: flex-end;
  background: var(--msg-mine-v26712);
  border-color: #9ec0dd;
}
.msg-bubble-v26712.is-removed { opacity: .7; }

.msg-who-v26712 { font-size: .75rem; font-weight: 800; color: var(--msg-quiet-v26712); }
.msg-body-v26712 { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-when-v26712 { font-size: .72rem; color: var(--msg-quiet-v26712); }

.msg-photo-v26712 {
  max-width: 100%;
  max-height: 16rem;
  border-radius: .4rem;
  object-fit: contain;
  background: #eef2f6;
}

.msg-remove-v26712 {
  justify-self: end;
  border: 0;
  background: transparent;
  color: var(--msg-quiet-v26712);
  font-size: .72rem;
  cursor: pointer;
  padding: 0;
}
.msg-remove-v26712:hover { color: var(--msg-alert-v26712); text-decoration: underline; }

.msg-composer-v26712 {
  border-top: 1px solid var(--msg-line-v26712);
  padding: .6rem .8rem;
  display: grid;
  gap: .4rem;
}
.msg-composer-v26712 textarea { width: 100%; resize: vertical; }
.msg-composer-actions-v26712 {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.msg-attach-v26712 { font-size: .85rem; display: inline-flex; gap: .3rem; align-items: center; }
.msg-pending-v26712 { flex: 1 1 auto; font-size: .82rem; color: var(--msg-quiet-v26712); }
.msg-readonly-v26712 {
  margin: 0;
  padding: .6rem .8rem;
  border-top: 1px solid var(--msg-line-v26712);
}

/* ---------------------------------------------------- settings, oversight -- */

.msg-settings-v26712 { margin: .5rem 0 1rem; }
.msg-settings-body-v26712 { display: grid; gap: .5rem; padding: .6rem 0; }
.msg-oversight-table-v26712 { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.msg-oversight-table-v26712 th,
.msg-oversight-table-v26712 td {
  border-bottom: 1px solid var(--msg-line-v26712);
  padding: .35rem .45rem;
  text-align: left;
  font-size: .85rem;
  vertical-align: top;
}

.msg-tab-count-v26712 { color: var(--msg-alert-v26712); font-weight: 800; }

/* ==========================================================================
   Tasks
   ========================================================================== */

.task-head-v26712 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}
.task-scope-v26712 { display: flex; gap: .3rem; }
.task-scope-v26712 .is-on { font-weight: 800; }
.task-head-actions-v26712 { display: flex; gap: .3rem; }

/* THE STATUSES ACROSS THE TOP, tasks underneath. The columns come from the
   school's own statuses, so this cannot assume three of them. */
.task-columns-v26712 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  align-items: start;
}
@media (max-width: 760px) {
  .task-columns-v26712 { grid-auto-flow: row; grid-auto-columns: auto; }
}

.task-column-v26712 {
  border: 1px solid var(--msg-line-v26712);
  border-radius: .6rem;
  background: #f9fbfd;
  padding: .5rem;
  display: grid;
  gap: .4rem;
  align-content: start;
}
.task-column-v26712.is-closed { background: #f4f8f4; }
.task-column-v26712 header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}
.task-column-v26712 h4 { margin: 0; font-size: .95rem; }
.task-count-v26712 {
  min-width: 1.5rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: #dbe7f2;
  color: var(--msg-ink-v26712);
  font-weight: 800;
  font-size: .8rem;
  text-align: center;
}
.task-empty-v26712 { margin: 0; font-size: .82rem; }

.task-tile-v26712 {
  display: grid;
  gap: .2rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--msg-line-v26712);
  border-radius: .5rem;
  background: #fff;
  padding: .5rem .55rem;
  cursor: pointer;
  color: inherit;
}
.task-tile-v26712:hover { border-color: #1765a8; }
/* The one thing on this board worth finding at a glance. */
.task-tile-v26712.is-overdue { border-left: 4px solid var(--msg-alert-v26712); }
.task-tile-title-v26712 { font-weight: 700; color: var(--msg-ink-v26712); overflow-wrap: anywhere; }
.task-tile-pupil-v26712 { font-size: .82rem; color: #1765a8; }
.task-tile-meta-v26712 { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.task-chip-v26712 {
  border: 1px solid #c3d7e9;
  border-radius: 999px;
  padding: 0 .4rem;
  font-size: .72rem;
  background: #eef5fb;
  color: var(--msg-ink-v26712);
}
.task-due-v26712 { font-size: .72rem; color: var(--msg-quiet-v26712); }
.task-tile-who-v26712 { font-size: .75rem; color: var(--msg-quiet-v26712); }

.task-dialog-v26712 {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(8, 25, 43, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.task-dialog-panel-v26712 {
  width: min(40rem, 100%);
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: .7rem;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 18px 44px rgba(8, 25, 43, .3);
  display: grid;
  gap: .5rem;
}
.task-dialog-panel-v26712 h3 { margin: 0; }
.task-dialog-panel-v26712 label { display: grid; gap: .2rem; }
.task-dialog-grid-v26712 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .5rem;
}
.task-detail-body-v26712 { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

.task-events-v26712 { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.task-events-v26712 li {
  border-left: 3px solid var(--msg-line-v26712);
  padding: .1rem .5rem;
  display: grid;
  gap: .1rem;
}
.task-event-who-v26712 { font-weight: 700; color: var(--msg-ink-v26712); }
.task-event-body-v26712 { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-event-when-v26712 { font-size: .72rem; }

.task-manage-list-v26712 { display: grid; gap: .3rem; }
.task-manage-list-v26712 h4 { margin: .4rem 0 0; }
.task-manage-row-v26712 {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-wrap: wrap;
}
.task-manage-row-v26712 input[type="text"],
.task-manage-row-v26712 input:not([type]) { flex: 1 1 10rem; }

/* ==========================================================================
   The parents page
   ========================================================================== */

/* The top-level Messages tile on the dashboard. A whole card rather than a
   line in one, because Sean asked for it above everything else and a parent
   with an unread message should not have to look for it. */
.parents-messages-card-v26712 { padding: 0; }
.parents-messages-open-v26712 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.parents-messages-title-v26712 { font-size: 1.15rem; font-weight: 800; }
.parents-messages-count-v26712 {
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--msg-alert-v26712);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
}
.parents-messages-count-v26712.is-quiet {
  background: transparent;
  color: var(--msg-quiet-v26712);
  font-weight: 600;
}

/* Settings folds away now. The summary carries the heading, so the heading
   must not also add the browser's own disclosure spacing twice. */
.parents-settings-fold-v26712 > summary { cursor: pointer; list-style: revert; }
.parents-settings-fold-v26712 > summary h2 { display: inline; margin: 0; }

/* ==========================================================================
   v267.13 -- a child's teachers, their record, and absence
   ========================================================================== */

/* The teachers under a child's heading. Named whether or not they accept
   messages, because a parent should know who teaches their child; only the
   ones who do accept are buttons. */
.msg-teachers-v26713 {
  display: grid;
  gap: 1px;
  padding: 0 0 .4rem;
  background: #eef2f6;
}
.msg-teacher-v26713 {
  display: block;
  width: 100%;
  text-align: left;
  padding: .4rem .7rem .4rem 1.2rem;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--msg-ink-v26712);
  font: inherit;
  cursor: pointer;
}
.msg-teacher-v26713:hover { background: #f6fafe; }
.msg-teacher-v26713.is-quiet { color: var(--msg-quiet-v26712); cursor: default; }
.msg-teacher-v26713.is-quiet::after { content: " \2014 not accepting messages"; font-size: .78rem; }

/* THE SCHOOL SPEAKING, not a person. Centred and banded rather than a bubble on
   one side, because it is addressed to everybody in the conversation. */
.msg-notice-v26713 {
  align-self: stretch;
  display: grid;
  gap: .1rem;
  padding: .45rem .7rem;
  border-left: 4px solid #1765a8;
  background: #eef5fb;
  color: var(--msg-ink-v26712);
}
.msg-notice-v26713.is-bump_note,
.msg-notice-v26713.is-incident { border-left-color: var(--msg-alert-v26712); background: #fdf1f0; }
.msg-notice-v26713.is-assessment { border-left-color: #2e7d5b; background: #eef8f2; }
.msg-notice-v26713.is-absence { border-left-color: #d89b1f; background: #fdf6e6; }

.msg-record-actions-v26713 { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }

.msg-record-v26713 {
  border-bottom: 1px solid var(--msg-line-v26712);
  padding: .6rem .8rem;
  max-height: 16rem;
  overflow: auto;
}
.msg-record-v26713 h3 { margin: .4rem 0 .2rem; font-size: .92rem; }
.msg-record-figure-v26713 { margin: 0; font-weight: 800; color: var(--msg-ink-v26712); }
.msg-record-list-v26713 { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .2rem; }
.msg-record-list-v26713 li {
  display: flex;
  gap: .4rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: .85rem;
  border-bottom: 1px solid #f2f5f8;
  padding-bottom: .2rem;
}
.msg-record-mark-v26713 { font-weight: 800; }
.msg-record-mark-v26713.is-present { color: #2e7d5b; }
.msg-record-mark-v26713.is-absent { color: var(--msg-alert-v26712); }
.msg-record-kind-v26713 {
  border: 1px solid #c3d7e9;
  border-radius: 999px;
  padding: 0 .4rem;
  font-size: .72rem;
  background: #eef5fb;
}

.msg-absence-v26713 {
  border-bottom: 1px solid var(--msg-line-v26712);
  padding: .6rem .8rem;
  display: grid;
  gap: .4rem;
}
.msg-absence-v26713 h3 { margin: 0; font-size: .95rem; }
.msg-absence-v26713 label { display: grid; gap: .2rem; }
.msg-absence-dates-v26713 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: .5rem;
}

/* The staff banner. Pending first, because that is the list with work in it. */
.absence-banner-v26713 { margin-top: 1rem; }
.absence-list-v26713 { display: grid; gap: .5rem; margin-top: .5rem; }
.absence-card-v26713 {
  border: 1px solid var(--msg-line-v26712);
  border-left: 4px solid #d89b1f;
  border-radius: .5rem;
  background: #fff;
  padding: .6rem .7rem;
  display: grid;
  gap: .25rem;
}
.absence-card-v26713.is-approved { border-left-color: #2e7d5b; }
.absence-card-v26713.is-declined { border-left-color: var(--msg-alert-v26712); }
.absence-card-v26713 h4 { margin: 0; }
.absence-when-v26713 { font-weight: 700; color: var(--msg-ink-v26712); }
.absence-evidence-v26713 { display: flex; gap: .4rem; flex-wrap: wrap; }
.absence-evidence-v26713 button {
  border: 1px solid #c3d7e9;
  background: #eef5fb;
  color: var(--msg-ink-v26712);
  border-radius: .35rem;
  padding: .15rem .45rem;
  font-size: .8rem;
  cursor: pointer;
}

/* ==========================================================================
   v267.14 -- the parents front door, and two message fixes
   ========================================================================== */

/* THE MENU. Four things a parent comes here to do. On a phone they stack and
   centre; on a wide screen they sit two by two. Same four buttons, same Back,
   so there is one behaviour to learn rather than two. */
.parents-menu-v26714 { padding: 1rem; }
.parents-menu-grid-v26714 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .7rem;
}
.parents-menu-button-v26714 {
  display: grid;
  gap: .2rem;
  padding: 1.1rem 1rem;
  border: 2px solid var(--public-secondary-button-border, #b8d4ef);
  border-radius: .6rem;
  background: var(--public-secondary-button-bg, #eef6ff);
  color: var(--public-secondary-button-text, #123b5d);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.parents-menu-button-v26714:hover,
.parents-menu-button-v26714:focus-visible {
  border-color: var(--public-button-border, #0c3f78);
}
.parents-menu-label-v26714 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.2rem;
  font-weight: 800;
}
.parents-menu-hint-v26714 { font-size: .9rem; opacity: .8; }
.parents-menu-badge-v26714 {
  min-width: 1.5rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--msg-alert-v26712, #c0392b);
  color: #fff;
  font-size: .8rem;
  line-height: 1.5rem;
  text-align: center;
}

@media (max-width: 640px) {
  /* Centred on a phone, as asked -- a thumb reaches the middle of the screen
     more easily than either edge. */
  .parents-menu-grid-v26714 { grid-template-columns: minmax(0, 1fr); }
  .parents-menu-button-v26714 { justify-items: center; text-align: center; }
  .parents-menu-label-v26714 { justify-content: center; }
}

/* THE BACK BUTTON, top left of every section and drawn by the section shell so
   no screen has to remember one of its own. */
.parents-section-bar-v26714 {
  display: flex;
  justify-content: flex-start;
  padding: 0 0 .8rem;
}

/* Sean: the Back button and the messages needed room around them. */
.parents-messages-section-v26714 { padding: .9rem; }
.parents-messages-section-v26714 .msg-shell-v26712 { gap: 1rem; }

/* ATTENDANCE. Three figures per child, big enough to read at a glance, with
   the colour saying what the number means without anybody having to know the
   thresholds. */
.parents-figures-v26714 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: .7rem;
  margin: .6rem 0 .8rem;
}
.parents-figure-v26714 {
  display: grid;
  gap: .1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--msg-line-v26712, #cddced);
  border-radius: .5rem;
  background: #fff;
}
.parents-figure-v26714 > span:first-child {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .75;
}
.parents-figure-v26714 strong { font-size: 1.9rem; line-height: 1.1; }
.parents-figure-v26714 strong.is-good { color: #2e7d5b; }
.parents-figure-v26714 strong.is-fair { color: #b8860b; }
.parents-figure-v26714 strong.is-low { color: var(--msg-alert-v26712, #c0392b); }
.parents-figure-v26714 strong.is-none { color: var(--msg-quiet-v26712, #5b7089); }

.parents-absence-v26714 { display: grid; gap: .5rem; margin-top: .8rem; }
.parents-absence-v26714 h3 { margin: 0; font-size: 1rem; }
.parents-absence-v26714 label { display: grid; gap: .2rem; }
.parents-absence-dates-v26714 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: .5rem;
}

/* A photograph can come down; the words cannot. The control sits on the
   picture rather than under the message, which is what it is about. */
.msg-photo-wrap-v26714 { position: relative; display: inline-block; max-width: 100%; }
.msg-photo-drop-v26714 {
  position: absolute;
  top: .25rem;
  right: .25rem;
  border: 0;
  border-radius: 999px;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1;
  background: rgba(8, 25, 43, .68);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
}
.msg-photo-drop-v26714:hover { background: var(--msg-alert-v26712, #c0392b); }

/* ==========================================================================
   v267.14 -- Manage Users
   ========================================================================== */

/* THE SELECTED USER OVERFLOWED ITS COLUMN and took the archive buttons off the
   right-hand edge with it. The grid was fixed-width columns inside a card that
   is narrower than they are; minmax(0, ...) lets them shrink, which is what
   stops a long email pushing the row wider than the page. */
.user-profile-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  min-width: 0;
}
.user-profile-grid > label,
.user-profile-grid > p { min-width: 0; }
.user-profile-grid input,
.user-profile-grid select { max-width: 100%; min-width: 0; }

/* Direct Messaging gets a heading of its own, like Staff Role, rather than
   sitting in the middle of the name fields looking like an afterthought. */
.user-messaging-fieldset-v26714 { margin-top: .6rem; }
.user-messaging-fieldset-v26714 .check-card { max-width: 100%; }
.user-messaging-fieldset-v26714 .small-help { margin: .3rem 0 0; }

/* ==========================================================================
   v267.14 -- Manage Attendance

   The same rows as the Scheduled Absence Requests banner on Messages, read for
   a different reason: there, what needs answering today; here, everything, with
   the history of who moved it and when. Coloured down the left edge by status so
   an unanswered request does not look like a settled one.
   ========================================================================== */

.attendance-filter-v26714 {
  display: flex;
  align-items: end;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .8rem;
  border: 1px solid #d5e1eb;
  border-radius: .8rem;
  background: #f8fbfd;
}
.attendance-filter-v26714 label { display: grid; gap: .25rem; min-width: 12rem; }

.attendance-requests-v26714 { display: grid; gap: .8rem; }

.attendance-request-v26714 {
  display: grid;
  gap: .4rem;
  padding: .9rem 1rem;
  border: 1px solid #d5e1eb;
  border-left: .35rem solid #b8860b;
  border-radius: .8rem;
  background: #fff;
}
.attendance-request-v26714.is-approved { border-left-color: #2e7d5b; }
.attendance-request-v26714.is-declined { border-left-color: #b3261e; }
.attendance-request-v26714.is-withdrawn { border-left-color: #8595a5; }

.attendance-request-head-v26714 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.attendance-request-head-v26714 h3 { margin: 0; font-size: 1.05rem; }
.attendance-status-v26714 {
  padding: .1rem .55rem;
  border-radius: 999px;
  background: #eef6ff;
  border: 1px solid #b8d4ef;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.attendance-when-v26714 { margin: 0; font-size: .85rem; color: #435a6f; }

.attendance-evidence-v26714 { display: flex; gap: .4rem; flex-wrap: wrap; }

.attendance-history-v26714 {
  margin: .2rem 0 0;
  padding-left: 1.1rem;
  font-size: .82rem;
  color: #435a6f;
}
.attendance-history-empty-v26714 { margin: 0; font-size: .82rem; }

.attendance-decide-v26714 {
  display: flex;
  align-items: end;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .3rem;
  padding-top: .6rem;
  border-top: 1px solid #e3ecf3;
}
.attendance-decide-v26714 label { display: grid; gap: .25rem; flex: 1 1 18rem; min-width: 0; }
.attendance-decide-v26714 input { width: 100%; }
.attendance-decide-buttons-v26714 { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ==========================================================================
   v267.15 -- the teacher's Messages, and being told one arrived
   ========================================================================== */

/* THE CONVERSATIONS COME FIRST on the admin panel now, with the settings under
   them. This gives the list room inside the admin card: the shell is a two-pane
   layout and an admin card is narrower than the parents page, so without a floor
   on the height it collapsed to the height of whichever pane was emptier. */
.admin-body .msg-admin-mount-v26715 { min-width: 0; }
.admin-body .msg-admin-mount-v26715 .msg-shell-v26712 { min-height: 26rem; }

/* The things a school sets once, under the messages rather than in front of
   them, and set apart so they do not read as part of the list. */
.admin-body .msg-admin-tools-v26715 {
  margin-top: 1.2rem;
  padding-top: .9rem;
  border-top: 1px solid #d5e1eb;
}

/* THE POP-UP. Bottom right, above everything, and it says HOW MANY and never
   what -- a notification gets read over somebody's shoulder in a corridor, so it
   follows the same rule as the digest email. */
.msg-toast-v26715 {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: min(92vw, 26rem);
  padding: .7rem .8rem;
  border: 1px solid #0c3f78;
  border-radius: .6rem;
  background: #123b5d;
  color: #fff;
  box-shadow: 0 10px 28px rgba(8, 25, 43, .3);
  font-size: .92rem;
}
.msg-toast-text-v26715 { flex: 1 1 auto; font-weight: 600; }
.msg-toast-open-v26715,
.msg-toast-close-v26715 {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: .4rem;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  font: inherit;
  padding: .25rem .6rem;
  min-height: 0;
}
.msg-toast-close-v26715 { padding: .25rem .5rem; line-height: 1; }
.msg-toast-open-v26715:hover,
.msg-toast-close-v26715:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 640px) {
  /* Across the bottom on a phone, where a 26rem box beside the edge is most of
     the screen anyway. */
  .msg-toast-v26715 { left: 1rem; right: 1rem; max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .msg-toast-v26715 { animation: msg-toast-in-v26715 .18s ease-out; }
  @keyframes msg-toast-in-v26715 {
    from { opacity: 0; transform: translateY(.5rem); }
    to { opacity: 1; transform: none; }
  }
}

/* The term a figure covers, under the figure it belongs to. */
.parents-figure-when-v26715 {
  font-size: .78rem;
  opacity: .8;
}

/* ==========================================================================
   v268.0 -- the chat list, the Settings button on a chat, and the settings tab
   ========================================================================== */

/* WHITE BEHIND, BLUE IN FRONT, wherever a chat list is drawn.

   Sean sent a picture of the staff list with dark red rows and darker red text
   in it -- unreadable, and nothing like the parents' page. The row rule already
   said `background: transparent`, so SOMETHING with more specificity was
   painting them and I could not reproduce it from the source alone. This
   asserts the outcome rather than removing a cause: the colours are stated at a
   specificity nothing in this product beats, so the list is white with blue
   text however the rest of the cascade lands. If a red row ever comes back,
   take the computed style off the live page before touching this. */
.msg-list-v26712 .msg-row-v26712,
.msg-list-v26712 .msg-directory-list-v26712 button,
.msg-list-v26712 .msg-teacher-v26713 {
  background: #fff !important;
  color: var(--msg-ink-v26712, #123b5d) !important;
  border-color: #eef2f6;
}
.msg-list-v26712 .msg-row-v26712:hover,
.msg-list-v26712 .msg-directory-list-v26712 button:hover {
  background: #f6fafe !important;
}
.msg-list-v26712 .msg-row-v26712.is-active { background: #eaf3fb !important; }
.msg-list-v26712 .msg-row-title-v26712 { color: var(--msg-ink-v26712, #123b5d) !important; }
.msg-list-v26712 .msg-row-sub-v26712,
.msg-list-v26712 .msg-row-preview-v26712,
.msg-list-v26712 .msg-row-when-v26712 {
  color: var(--msg-quiet-v26712, #5b7089) !important;
}
.msg-list-v26712 { background: #fff !important; }

/* THE COUNT IS IN THE TITLE NOW, so the title carries the weight. Bold means
   "there is something here", which is the whole of what the bubble said. */
.msg-row-v26712.has-unread .msg-row-title-v26712 { font-weight: 900; }

/* The chat's own Settings button, on the right of its name. */
.msg-thread-head-v26712 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
}
.msg-thread-head-text-v2680 { min-width: 0; }
.msg-chat-settings-button-v2680 {
  flex: 0 0 auto;
  padding: .3rem .7rem;
  font-size: .85rem;
  min-height: 0;
}
.msg-chat-settings-v2680 {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--msg-line-v26712, #cddced);
  background: #f6fafe;
}
.msg-chat-settings-v2680 .check-card { display: flex; align-items: center; gap: .5rem; }
.msg-chat-settings-v2680 p { margin: .35rem 0 .5rem; }

/* The settings tab. Nothing clever: a form, in the width the other admin forms
   use, with the hour beside the tick box it belongs to. */
.msg-settings-form-v2680 h3 { margin: 0 0 .4rem; font-size: 1rem; }
.msg-settings-form-v2680 .check-card { display: flex; align-items: center; gap: .5rem; }
.msg-settings-form-v2680 [data-msg-digest-hour-v2680] { width: 6rem; }

/* ==========================================================================
   v268.1 -- a phone gets one screen at a time, plus the tick and the dot
   ========================================================================== */

/* THE DELIVERED TICK. One tick, beside the time, on messages this person sent.
   It means the server has it and everyone in the conversation can read it --
   not that anybody has. */
.msg-tick-v2681 {
  margin-left: .3rem;
  font-weight: 700;
  color: #2f7d4f;
}

/* THE UNREAD DOT, before the name. Colour is NOT the only difference: the same
   row is also bold and carries "(3)" after the title, so a reader who cannot
   separate this red from the grey behind it loses nothing. */
.msg-dot-v2681 {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--msg-alert-v26712, #c0392b);
}

/* --------------------------------------------------------- one pane ------ */

/* Sean: "the page is a full list of the messages (no in-screen scrolling) and
   when they click into it then that chat takes up the whole window".

   So on a phone the two panes are two SCREENS. The list is the page and scrolls
   with it; the chat is exactly the rest of the viewport and scrolls inside
   itself. The script decides which one exists -- these rules only give each the
   shape it needs. */
@media (max-width: 860px) {
  /* The list stops being a box with its own scrollbar and becomes the page. */
  .msg-shell-v26712.is-one-pane-v2681 .msg-list-v26712 {
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  /* The chat's height is set inline by fitThreadToScreenV2681, because "under
     the existing banners" is a different number on every page and only the
     element itself knows where it starts. min-height must not fight it. */
  .msg-shell-v26712.is-one-pane-v2681 .msg-thread-v26712 {
    min-height: 0;
    max-height: none;
    border-radius: 0;
  }

  /* The head and the composer hold their size; the feed takes what is left and
     is the only thing that scrolls. Which is already how the thread is built --
     this states it so a future change to the flex cannot quietly break it. */
  .msg-shell-v26712.is-one-pane-v2681 .msg-thread-head-v26712,
  .msg-shell-v26712.is-one-pane-v2681 .msg-composer-v26712,
  .msg-shell-v26712.is-one-pane-v2681 .msg-readonly-v26712 { flex: 0 0 auto; }
  .msg-shell-v26712.is-one-pane-v2681 .msg-feed-v26712 { flex: 1 1 auto; min-height: 0; }

  /* A thumb reaches these, and the composer never leaves the screen. */
  .msg-shell-v26712.is-one-pane-v2681 .msg-composer-v26712 textarea {
    font-size: 1rem;
    min-height: 2.6rem;
    resize: none;
  }
  .msg-shell-v26712.is-one-pane-v2681 .msg-composer-actions-v26712 button[type="submit"] {
    min-height: 2.6rem;
    padding-inline: 1.1rem;
  }
}

/* The Back button, top left of the chat's own header. Not inside a media query:
   the script only draws it when there is no list beside it to go back to, so a
   rule that hid it by width could only ever disagree with the script. */
.msg-back-v2681 {
  flex: 0 0 auto;
  align-self: flex-start;
  border: 1px solid var(--msg-line-v26712, #cddced);
  border-radius: .4rem;
  background: #fff;
  color: var(--msg-ink-v26712, #123b5d);
  font: inherit;
  font-weight: 700;
  padding: .3rem .7rem;
  min-height: 0;
  cursor: pointer;
}
.msg-back-v2681:hover { background: #eef5fb; }

/* With a Back button in it the header is three things across, so the name gets
   the middle and the two controls keep their size. */
.msg-thread-head-v26712 { gap: .5rem; }
.msg-thread-head-text-v2680 { flex: 1 1 auto; }


/* ==========================================================================
   v268.2 -- one Teachers heading, with the child named inside it
   ========================================================================== */

/* The child's name is a caption on their block now, not a heading of its own.
   Smaller and quieter than the group heading above it, so the eye reads
   "Teachers" first and then whose. */
.msg-child-block-v2682 + .msg-child-block-v2682 {
  border-top: 1px solid var(--msg-line-v26712, #e2e5e9);
  margin-top: .35rem;
  padding-top: .35rem;
}
.msg-child-name-v2682 {
  margin: 0;
  padding: .25rem .7rem 0;
  font-size: .85rem;
  font-weight: 800;
  color: var(--msg-ink-v26712, #123b5d);
}