/* ABCHS Roster. Shared styles.
   Mobile first, everything works at 375 pixels wide.
   Fonts are served from this origin. No third party request is ever made. */

@font-face {
  font-family: 'Kulim Park';
  src: url('fonts/kulim-park-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kulim Park';
  src: url('fonts/kulim-park-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kulim Park';
  src: url('fonts/kulim-park-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('fonts/albert-sans-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #43C0AC;
  --green-deep: #187969;
  --green-accent: #1DA891;
  --green-light: #8FDED2;
  --purple: #A519C0;
  --purple-accent: #CC5DE2;
  --cream: #F6F5F0;
  --black: #000000;
  --white: #FFFFFF;

  --ink: #12211E;
  --ink-soft: #4C5C58;
  --line: #DDE4E1;
  --warn-bg: #FDF4E3;
  --warn-ink: #7A5300;
  --danger: #B3261E;
  --danger-bg: #FCEDEC;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(18, 33, 30, 0.08), 0 4px 16px rgba(18, 33, 30, 0.06);
  --head: 'Kulim Park', 'Albert Sans', Arial, sans-serif;
  --body: 'Albert Sans', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

/* A class that sets display would otherwise beat the browser's own rule for
   the hidden attribute, and the element stays on screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  line-height: 1.2;
}
h1 { font-size: 1.55rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

a { color: var(--green-deep); }

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

.topbar {
  background: var(--green-deep);
  color: var(--white);
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.topbar .brand {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-right: auto;
}
.topbar .brand span {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.72rem;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.topbar .who { font-size: 0.82rem; opacity: 0.9; }
.role-chip {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--green);
  color: #05221D;
  margin-left: 0.3rem;
}
/* On a narrow phone the name gives way so the whole bar stays one line. */
@media (max-width: 479px) {
  .topbar .who { display: none; }
  .topbar button { padding: 0.35rem 0.7rem; min-height: 36px; font-size: 0.82rem; }
}

.tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--green-deep);
  padding: 0 0.5rem 0.5rem;
  overflow-x: auto;
}
.tabs a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}
.tabs a[aria-current='page'] {
  background: var(--green);
  color: #05221D;
  font-weight: 600;
}

main {
  padding: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.card-head h2 { margin: 0; margin-right: auto; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.tile .n {
  font-family: var(--head);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1.1;
}
.tile .l { font-size: 0.82rem; color: var(--ink-soft); }
.tile.attention { border-left-color: var(--purple); }
.tile.urgent { border-left-color: var(--danger); background: var(--danger-bg); }
.tile.urgent .n { color: var(--danger); }
.tile.attention .n { color: var(--purple); }

/* ------------------------------------------------------------------ forms */

label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
.hint { font-size: 0.78rem; color: var(--ink-soft); font-weight: 400; margin-top: 0.2rem; }

input, select, textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 16px; /* stops iOS zooming on focus */
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  min-height: 44px;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--green-light);
  outline-offset: 1px;
  border-color: var(--green-accent);
}

.field { margin-bottom: 0.85rem; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 0.85rem; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- buttons */

button, .btn {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  min-height: 44px;
  cursor: pointer;
  background: var(--green-deep);
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
button:hover, .btn:hover { background: var(--green-accent); }
button[disabled] { opacity: 0.55; cursor: not-allowed; }

button.secondary, .btn.secondary {
  background: var(--white);
  color: var(--green-deep);
  border-color: var(--green-deep);
}
button.secondary:hover { background: var(--green-light); }

button.quiet {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
button.quiet:hover { background: var(--cream); color: var(--ink); }

button.danger {
  background: var(--white);
  color: var(--danger);
  border-color: var(--danger);
}
button.danger:hover { background: var(--danger-bg); }

button.small, .btn.small {
  font-size: 0.82rem;
  padding: 0.35rem 0.65rem;
  min-height: 36px;
}

.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --------------------------------------------------------------- messages */

.message {
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
  border: 1px solid;
}
.message[hidden] { display: none; }
.message.error { background: var(--danger-bg); border-color: #F0C4C1; color: var(--danger); }
.message.good { background: #E9F8F4; border-color: var(--green-light); color: var(--green-deep); }
.message.warn { background: var(--warn-bg); border-color: #EBD9AE; color: var(--warn-ink); }

/* ----------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; }
tbody tr:hover { background: #FBFCFB; }
td.right, th.right { text-align: right; white-space: nowrap; }
/* On a phone the record reference gives way, the rest still reads. */
@media (max-width: 479px) {
  .col-record { display: none; }
  th, td { padding: 0.5rem 0.4rem; }
}

.rowlist { list-style: none; margin: 0; padding: 0; }
.rowlist li {
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.rowlist li:last-child { border-bottom: 0; }
.rowlist .main { flex: 1 1 auto; min-width: 0; }
.rowlist .name { font-weight: 600; }
.rowlist .meta { font-size: 0.82rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------- tags */

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.tag.dva { background: #E9F8F4; border-color: var(--green); color: var(--green-deep); }
.tag.sah { background: #F3E9F7; border-color: var(--purple-accent); color: var(--purple); }
.tag.mac { background: #FFF6E8; border-color: #E5C689; color: var(--warn-ink); }
.tag.ndis { background: var(--cream); border-color: var(--line); color: var(--ink-soft); }
.tag.private { background: #EFF3F2; border-color: #B9C7C3; color: var(--ink); }
.tag.role { background: var(--cream); border-color: var(--line); color: var(--ink-soft); }
.tag.archived { background: var(--cream); border-color: var(--line); color: var(--ink-soft); }
.tag.flag { background: var(--danger-bg); border-color: #F0C4C1; color: var(--danger); }

/* ---------------------------------------------------------------- dialogs */

dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  width: min(680px, calc(100vw - 1.5rem));
  box-shadow: 0 12px 40px rgba(18, 33, 30, 0.25);
}
dialog::backdrop { background: rgba(18, 33, 30, 0.45); }
dialog .dialog-body { padding: 1rem; max-height: 75vh; overflow-y: auto; }
dialog .dialog-head {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius) var(--radius) 0 0;
}
dialog .dialog-head h2 { margin: 0; }
dialog .dialog-foot {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  background: var(--white);
}

/* ------------------------------------------------------------------- misc */

.toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.85rem; }
.toolbar input[type='search'] { flex: 1 1 180px; width: auto; }
/* Anywhere, not only in a toolbar. A checkbox and its words belong together
   on one line however the surrounding block is laid out. */
label.inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
  font-size: 0.85rem;
  margin: 0;
  width: auto;
}
label.inline input {
  width: auto;
  min-height: auto;
  flex: 0 0 auto;
}

.empty { color: var(--ink-soft); font-size: 0.9rem; padding: 1rem 0; }
.muted { color: var(--ink-soft); }
.tight { margin-top: 0; }
.full-width { width: 100%; }
.auto-width { width: auto; }
.nowrap { white-space: nowrap; }
.footnote { font-size: 0.78rem; color: var(--ink-soft); margin-top: 1.5rem; text-align: center; }

.credential-line {
  font-family: var(--head);
  font-size: 0.78rem;
  color: var(--green-deep);
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------- roster grid */

.week-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.week-bar .week-label {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 auto 0 0;
}
.week-bar .week-label span {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.tray {
  background: var(--danger-bg);
  border: 1px solid #F0C4C1;
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
}
.tray h2 { font-size: 0.95rem; color: var(--danger); margin-bottom: 0.5rem; }
.tray .chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tray .chip { width: auto; flex: 0 1 auto; min-width: 170px; max-width: 260px; }
.tray .empty-note { font-size: 0.85rem; color: var(--ink-soft); }

.grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.rgrid {
  display: grid;
  grid-template-columns: 140px repeat(7, minmax(132px, 1fr));
  min-width: 100%;
}
.rgrid.day-view { grid-template-columns: 140px minmax(0, 1fr); }

.rgrid .col-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.rgrid .col-head.today { background: var(--green-light); color: #05221D; font-weight: 700; }
.rgrid .col-head .dnum {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
}

.rgrid .row-head {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--white);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 1px 0 0 var(--line);
}
.rgrid .row-head .sub { display: block; font-weight: 400; font-size: 0.75rem; color: var(--ink-soft); }
.rgrid .row-head .sub.over { color: var(--danger); font-weight: 600; }

.rgrid .rcell {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0.3rem;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  cursor: cell;
}
.rgrid .rcell:hover { background: #FAFCFB; }
.rgrid .rcell.today { background: #F2FBF9; }
.rgrid .rcell.drop-target {
  background: var(--green-light);
  outline: 2px dashed var(--green-deep);
  outline-offset: -3px;
}

.chip {
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 6px;
  padding: 0.28rem 0.4rem;
  font-size: 0.76rem;
  line-height: 1.25;
  background: var(--white);
  cursor: grab;
  touch-action: manipulation;
  text-align: left;
  width: 100%;
  min-height: 0;
  display: block;
  font-family: var(--body);
  color: var(--ink);
}
.chip:hover { background: var(--cream); }
.chip .t { font-weight: 700; display: block; }
.chip .n { display: block; }
.chip .m { display: block; color: var(--ink-soft); font-size: 0.7rem; }
.chip.dva { border-color: var(--green); background: #EDFAF7; }
.chip.sah { border-color: var(--purple-accent); background: #FAF0FC; }
.chip.mac { border-color: #E5C689; background: #FFF8EC; }
.chip.ndis { border-color: #B9C7C3; background: #F4F6F5; }
.chip.private { border-color: var(--ink-soft); background: #F4F6F5; }
.chip.unfilled { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.chip.dragging { opacity: 0.4; }

.chip-ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  width: 150px;
  box-shadow: 0 8px 24px rgba(18, 33, 30, 0.3);
  opacity: 0.95;
  transform: translate(-50%, -50%);
}

.day-tabs { display: flex; gap: 0.25rem; overflow-x: auto; margin-bottom: 0.75rem; }
.day-tabs button {
  background: var(--white);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 0.4rem 0.6rem;
  min-height: 40px;
  font-size: 0.8rem;
  white-space: nowrap;
}
.day-tabs button[aria-pressed='true'] {
  background: var(--green);
  border-color: var(--green);
  color: #05221D;
}
.day-tabs button.has-unfilled { border-color: var(--danger); color: var(--danger); }

.legend { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.6rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid; display: inline-block; }
.legend i.dva { border-color: var(--green); background: #EDFAF7; }
.legend i.sah { border-color: var(--purple-accent); background: #FAF0FC; }
.legend i.mac { border-color: #E5C689; background: #FFF8EC; }
.legend i.ndis { border-color: #B9C7C3; background: #F4F6F5; }
.legend i.private { border-color: var(--ink-soft); background: #F4F6F5; }
.legend i.unfilled { border-color: var(--danger); background: var(--danger-bg); }

.conflict-list { margin: 0 0 0.5rem; padding-left: 1.1rem; font-size: 0.88rem; }
.conflict-list li { margin-bottom: 0.25rem; }

/* Staff shift cards */
.shift-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.6rem;
  background: var(--white);
}
.shift-card.today { border-left-color: var(--purple); background: #FEFAFF; }
.shift-card .when { font-family: var(--head); font-weight: 700; font-size: 0.95rem; }
.shift-card .who { font-size: 1rem; font-weight: 600; margin-top: 0.1rem; }
.shift-card .line { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.15rem; }
.shift-card .alerts {
  margin-top: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  background: var(--warn-bg);
  border: 1px solid #EBD9AE;
  color: var(--warn-ink);
  font-size: 0.85rem;
}
.shift-card .access {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink);
}
.shift-card .card-actions { margin-top: 0.6rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.day-heading {
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 1rem 0 0.5rem;
  color: var(--green-deep);
}

/* ------------------------------------------------------- availability */

.day-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.day-row:last-child { border-bottom: 0; }
@media (min-width: 640px) {
  .day-row { grid-template-columns: 110px 1fr auto; align-items: center; }
}
.day-label { font-weight: 600; font-size: 0.9rem; }
.day-windows { display: flex; flex-direction: column; gap: 0.4rem; }
.day-windows .not-available { color: var(--ink-soft); font-size: 0.85rem; }
.window-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.window-row select { width: auto; flex: 0 1 110px; }
.window-row .to { color: var(--ink-soft); font-size: 0.85rem; }

/* Team heat grid */
.heat-grid {
  display: grid;
  grid-template-columns: 150px repeat(7, minmax(104px, 1fr));
  min-width: 100%;
}
.heat-grid.day-view { grid-template-columns: 150px minmax(0, 1fr); }

/* The heat grid reuses the roster grid's sticky heads. */
.heat-grid .col-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.heat-grid .col-head.today { background: var(--green-light); color: #05221D; font-weight: 700; }
.heat-grid .col-head .dnum {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
}
.heat-grid .row-head {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--white);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 1px 0 0 var(--line);
}
.heat-grid .row-head .sub {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.legend i.heat-swatch { border-color: var(--line); }
.heat-grid .row-head .row-enter { margin-top: 0.35rem; width: 100%; }
#behalf-dialog h3 { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
#behalf-dialog h3:first-of-type { margin-top: 0.5rem; border-top: 0; padding-top: 0; }
.heat-cell {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0.4rem;
  min-height: 62px;
  font-size: 0.76rem;
  line-height: 1.3;
}
.heat-cell .hours { font-weight: 700; display: block; }
.heat-cell .win { display: block; color: var(--ink-soft); }
.heat-none { background: #F4F6F5; color: var(--ink-soft); }
.heat-low { background: #E9F8F4; }
.heat-mid { background: #C8EFE6; }
.heat-high { background: #8FDED2; }
.heat-leave { background: var(--warn-bg); color: var(--warn-ink); }
.heat-cannot { background: var(--danger-bg); color: var(--danger); }
.heat-over { outline: 2px solid var(--danger); outline-offset: -2px; }
.heat-cell .flag-word { font-weight: 700; display: block; }

.alert-card {
  border: 1px solid #F0C4C1;
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-bg);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.6rem;
}
.alert-card .headline { font-weight: 600; color: var(--danger); }
.alert-card .detail { font-size: 0.85rem; color: var(--ink); margin-top: 0.25rem; }
.alert-card .when { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.25rem; }
.alert-card .actions { margin-top: 0.5rem; }
.alert-card.done { border-color: var(--line); border-left-color: var(--green); background: var(--white); }
.alert-card.done .headline { color: var(--ink); }

/* ------------------------------------------------------------ shift notes */

.note-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow);
}
.note-card.escalated { border-left-color: var(--danger); background: #FFFBFB; }
.note-when { font-family: var(--head); font-weight: 700; font-size: 0.95rem; }
.note-who { font-size: 1rem; font-weight: 600; margin-top: 0.1rem; }
.note-meta { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.15rem; }
.note-body { margin-top: 0.6rem; font-size: 0.9rem; }
.note-body p { margin: 0 0 0.4rem; }
.note-signed { color: var(--ink-soft); font-size: 0.82rem; }
.note-actioned {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  background: #E9F8F4;
  border: 1px solid var(--green-light);
  font-size: 0.86rem;
}
.note-amendments { margin-top: 0.6rem; }
.amendment {
  border-left: 3px solid var(--purple-accent);
  padding: 0.4rem 0 0.4rem 0.7rem;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
}
.amendment-head { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }
.consumable-row input[type=\"number\"] { width: 90px; flex: 0 0 auto; }
.consumable-row select { flex: 1 1 200px; }

/* Sign in page */
.signin-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.signin {
  width: min(420px, 100%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.signin .head {
  background: var(--green-deep);
  color: var(--white);
  padding: 1.25rem 1.25rem 1.1rem;
}
.signin .head h1 { color: var(--white); margin-bottom: 0.15rem; }
.signin .head p { margin: 0; font-size: 0.85rem; opacity: 0.9; }
.signin .body { padding: 1.1rem 1.25rem 1.25rem; }
.switcher { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.switcher button {
  flex: 1;
  background: var(--cream);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.switcher button[aria-pressed='true'] {
  background: var(--green);
  border-color: var(--green);
  color: #05221D;
}
.pin-input { letter-spacing: 0.5em; font-size: 1.2rem; text-align: center; }