/* Student inbox (app/ielts/inbox.js). Follows the app shell's slate palette. */

.ibx-root { max-width: 720px; }

.ibx-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ibx-head h2 { margin: 0; }

.ibx-allread {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  border-radius: 8px;
  padding: 7px 13px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.ibx-allread:hover { border-color: #94a3b8; }

.ibx-lead {
  margin: 6px 0 18px;
  color: #64748b;
  font-size: 0.9rem;
}

.ibx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.ibx-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.ibx-item:last-child { border-bottom: none; }
.ibx-item--go { cursor: pointer; }
.ibx-item--go:hover { background: #f8fafc; }
.ibx-item:focus-visible { outline: 2px solid #0f172a; outline-offset: -2px; }

/* Unread is carried by weight and a marker, not colour alone. */
.ibx-item.is-unread { background: #f8fbff; }
.ibx-item.is-unread .ibx-title { font-weight: 600; }
.ibx-item.is-unread .ibx-ico::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  margin: 3px auto 0;
}

.ibx-ico { font-size: 1.05rem; line-height: 1.4; text-align: center; }

.ibx-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ibx-title { color: #0f172a; font-size: 0.95rem; line-height: 1.4; }
.ibx-body {
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ibx-meta { color: #94a3b8; font-size: 0.76rem; }

.ibx-when {
  color: #94a3b8;
  font-size: 0.76rem;
  white-space: nowrap;
  padding-top: 2px;
}

.ibx-empty {
  padding: 26px 18px;
  color: #64748b;
  font-size: 0.9rem;
  text-align: center;
}

.ibx-more {
  display: block;
  margin: 14px auto 0;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  border-radius: 8px;
  padding: 9px 18px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.ibx-more:hover { border-color: #94a3b8; }

/* Unread count on the nav button. Sits with .sn-count so the section-nav mirror
   copies it into the top bar unchanged. */
.sn-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}
.sn-badge.hidden { display: none; }

@media (max-width: 520px) {
  .ibx-item { grid-template-columns: 24px 1fr; }
  .ibx-when { grid-column: 2; padding-top: 0; }
}

/* The one nav item that keeps its icon.

   section-nav.css hides .sn-ico on every item on purpose: icons are the widest
   part of a horizontal bar that already had five items falling off the right
   edge, and nobody navigates by them. The inbox is the exception worth making —
   it is the item people glance for rather than read, the envelope is the reason
   the badge beside it makes sense, and it sits first so the width it costs is
   taken from the scroll tail rather than from an item someone was using.

   section-nav.js copies the sidebar button's innerHTML into the bar but NOT its
   data-sidebar-screen attribute — the mirrored item is keyed by data-secnav-idx
   instead. So the item is identified here by the thing it actually contains,
   the unread badge, which survives every rebuild of the bar.

   Higher specificity than ".secnav-item .sn-ico", so it wins wherever this file
   loads in the cascade. */
.secnav-item:has([data-inbox-badge]) .sn-ico,
.sidebar-nav button[data-sidebar-screen="inbox"] .sn-ico {
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
  line-height: 1;
  /* An emoji envelope was pale grey and vanished against the active item's
     light blue pill — a colour emoji is painted by the system font and CSS
     colour cannot reach it. The SVG below paints with currentColor, so the
     shade lives here.

     Deep blue rather than the brighter #2563eb of the unread dot: the active
     item's pill is blue-300, and measured against it the brighter blue is only
     2.87:1 — the same washed-out failure as the emoji. This is 5.7:1 on the
     pill and 10.4:1 on the white bar, so it holds in both states while staying
     visibly a colour rather than the label's near-black. */
  color: #1e3a8a;
}

.secnav-item:has([data-inbox-badge]) .sn-ico svg,
.sidebar-nav button[data-sidebar-screen="inbox"] .sn-ico svg {
  display: block;
}