:root {
  color-scheme: light dark;
  --bg: #fff;
  --fg: #242424;
  --muted: #616161;
  --line: #e0e0e0;
  --brand: #5b5fc7;
  --ok: #0f7b33;
  --warn: #9a6700;
  --bad: #b3261e;
}

body[data-theme='dark'],
body[data-theme='contrast'] {
  --bg: #1f1f1f;
  --fg: #f5f5f5;
  --muted: #adadad;
  --line: #3d3d3d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1rem;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 -apple-system, 'Segoe UI', system-ui, sans-serif;
}

h1 { font-size: 1.25rem; margin: 0 0 .25rem; }
h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
/* Replaces the inline `style="margin:0"` attributes the markup used to carry, which is what
   lets the tab's Content-Security-Policy drop 'unsafe-inline' from style-src entirely. */
h2.flush { margin: 0; }

/* Available to a screen reader, invisible on screen. Table captions and the actions column
   heading use it: a column of buttons with no header is a column a screen reader announces as
   nothing at all. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* A focus ring that is actually visible, in both themes and in high contrast. The browser
   default disappears against the brand fill on a button, and "keyboard focus is not visible" is
   a Teams store accessibility rejection, not a nicety. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: .25rem;
}
body[data-theme='dark'] :focus-visible,
body[data-theme='contrast'] :focus-visible { outline-color: #fff; }
.sub { color: var(--muted); margin: 0 0 1rem; }
.note { color: var(--muted); font-size: .8125rem; }
.err { color: var(--bad); }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem; }
.card {
  display: flex; flex-direction: column; gap: .125rem;
  border: 1px solid var(--line); border-radius: .5rem; padding: .75rem;
}
.card .n { font-size: 1.5rem; font-weight: 700; }
.card span:last-child { color: var(--muted); font-size: .8125rem; }

.panel {
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: .5rem; padding: .75rem 1rem; margin: 1rem 0;
}

table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
th, td { text-align: left; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); font-size: .8125rem; }

.badge { font-size: .75rem; font-weight: 600; padding: .125rem .5rem; border-radius: 1rem; }
.badge.valid, .badge.no-expiry { color: var(--ok); }
.badge.expiring { color: var(--warn); }
.badge.expired { color: var(--bad); }

button {
  font: inherit; padding: .4rem .9rem; border-radius: .4rem; border: 1px solid var(--line);
  background: var(--brand); color: #fff; cursor: pointer;
}
button[value='cancel'] { background: transparent; color: var(--fg); }

label { display: block; margin: .75rem 0; }
label input, label select {
  display: block; width: 100%; font: inherit; margin-top: .25rem;
  padding: .4rem .5rem; border: 1px solid var(--line); border-radius: .3rem;
  background: var(--bg); color: var(--fg);
}

dialog { border: 1px solid var(--line); border-radius: .5rem; background: var(--bg); color: var(--fg); max-width: 26rem; width: 100%; }
dialog menu { display: flex; gap: .5rem; justify-content: flex-end; padding: 0; margin: 1rem 0 0; }

.config { max-width: 30rem; }

/* Store validation tests mobile explicitly, and a horizontally-scrolling table is a
   frequent "suboptimal mobile experience" rejection. */
@media (max-width: 30rem) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--line); padding: .5rem 0; }
  td { border: 0; padding: .125rem 0; }
  td::before { content: attr(data-label); color: var(--muted); margin-right: .5rem; }
}

/* --- handover-specific ------------------------------------------------- */

.badge.urgent { color: var(--bad); }
.badge.watch { color: var(--warn); }
.badge.info { color: var(--muted); }
.badge.stale { color: var(--bad); border: 1px solid currentColor; }
.badge.submitted, .badge.acknowledged { color: var(--ok); }
.badge.draft { color: var(--warn); }

.item {
  border: 1px solid var(--line); border-radius: .5rem;
  padding: .625rem .75rem; margin: .5rem 0;
}
.item.urgent { border-left: 3px solid var(--bad); }
.item.watch { border-left: 3px solid var(--warn); }
.item .title { font-weight: 600; }
.item .meta { color: var(--muted); font-size: .8125rem; }
.item textarea, .composer textarea {
  display: block; width: 100%; font: inherit; margin-top: .375rem; min-height: 3rem;
  padding: .4rem .5rem; border: 1px solid var(--line); border-radius: .3rem;
  background: var(--bg); color: var(--fg); resize: vertical;
}
.item-actions { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.item-actions button { padding: .25rem .625rem; font-size: .8125rem; }
button.secondary { background: transparent; color: var(--fg); }

.composer { border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; margin-top: .5rem; }
.composer .row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.composer .row label { flex: 1 1 10rem; margin: .5rem 0; }

#people-table td .item-actions { margin-top: 0; }
#people-table .who { font-weight: 600; }
#people-table .oid { color: var(--muted); font-size: .75rem; display: block; word-break: break-all; }

/* A screen whose data failed to refresh must not look like a screen that is current. */
#app[data-stale='true'] #items,
#app[data-stale='true'] #history-body { opacity: 0.55; }