/* ==========================================================================
   KaamKhata - one stylesheet, no framework.

   Built for a phone held by someone who is 70: nothing under 18px, nothing
   tappable under 48px, strong contrast for reading outdoors.

   No emoji anywhere. Icons are SVG symbols defined once per page, because
   emoji render differently on every Android, iPhone and Windows version and
   cannot be relied on to look like anything in particular.
   ========================================================================== */

:root {
  --primary:      #1F3D7A;
  --primary-dk:   #162E5C;
  --primary-lt:   #3E63B0;
  --primary-tint: #E8EDF8;

  --ink:          #141B2D;
  --ink-2:        #3D465C;
  --muted:        #6B7590;
  --faint:        #9AA3B8;

  --paper:        #EEF1F7;
  --surface:      #FFFFFF;
  --line:         #D5DCE8;
  --line-soft:    #E6EBF3;

  --credit:       #14663F;
  --credit-bg:    #E2F1E9;
  --debit:        #9E3122;
  --debit-bg:     #FAE7E3;
  --warn:         #855312;
  --warn-bg:      #FBF0DB;

  --shadow-sm: 0 1px 2px rgba(20, 27, 45, .06), 0 1px 3px rgba(20, 27, 45, .04);
  --shadow-md: 0 2px 4px rgba(20, 27, 45, .06), 0 4px 12px rgba(20, 27, 45, .07);

  --r-sm: 8px;
  --r-md: 12px;

  /* The app is used in daylight and must not be auto-inverted by the phone. */
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---------- app bar ---------- */

.topbar {
  background: linear-gradient(180deg, var(--primary-lt) 0%, var(--primary) 60%);
  color: #fff;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 10px rgba(20, 27, 45, .18);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
}
.topbar .who {
  margin-left: auto;
  font-size: 14px;
  text-align: right;
  line-height: 1.3;
  color: rgba(255, 255, 255, .82);
  max-width: 55%;
}
.topbar .who b {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the KK mark, used in the bar and large on the login page */
.mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: 14px;
  font-weight: 700;
  flex: none;
}
.mark-lg {
  width: 64px;
  height: 64px;
  border-radius: 17px;
  background: var(--primary);
  border: 0;
  color: #fff;
  font-size: 25px;
  box-shadow: var(--shadow-md);
}

.content { max-width: 720px; margin: 0 auto; padding: 20px 16px 56px; }

h1 { font-size: 27px; margin: 0 0 6px; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: 21px; margin: 30px 0 12px; line-height: 1.25; }
p  { margin: 0 0 16px; }
.muted { color: var(--muted); font-size: 16px; }
.center { text-align: center; }

/* ---------- card ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 22px 20px;
  margin: 0 0 16px;
  box-shadow: var(--shadow-sm);
}
.card h1 { margin-bottom: 18px; }

/* the card that removes something, marked so it is never pressed by accident */
.card.danger { border: 2px solid var(--debit); }
.card.danger h2 { color: var(--debit); }

/* ---------- form ---------- */

.field { margin: 0 0 18px; }
.field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 7px;
}
.field input[type=text],
.field input[type=password],
.field input[type=number],
.field input[type=date],
.field input[type=tel],
.field select,
.field textarea {
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  font-size: 19px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-size: 17px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.check input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--primary); flex: none; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 22px;
  font-size: 18px;
  font-family: inherit;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:hover  { border-color: var(--primary-lt); }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-dk); border-color: var(--primary-dk); }
.btn-danger { color: var(--debit); border-color: var(--debit); }
.btn-danger:hover { background: var(--debit-bg); border-color: var(--debit); }
.btn-block { display: flex; width: 100%; }
.btn .ico { width: 20px; height: 20px; flex: none; }
.btn-link {
  background: none; border: 0; color: var(--primary);
  font-size: 17px; font-weight: 600; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; min-height: 48px; padding: 0 8px;
}

/* ---------- alerts ---------- */

.alert {
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 17px;
  border-left: 5px solid;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.alert .ico { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.alert-error { background: var(--debit-bg);  border-color: var(--debit);  color: var(--debit); }
.alert-warn  { background: var(--warn-bg);   border-color: var(--warn);   color: var(--warn); }
.alert-ok    { background: var(--credit-bg); border-color: var(--credit); color: var(--credit); }

/* ---------- home tiles ---------- */

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 134px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .14s ease, border-color .14s ease, transform .1s ease;
}
.tile:hover  { box-shadow: var(--shadow-md); border-color: var(--line); }
.tile:active { transform: translateY(1px); }

.tile .badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--primary-tint);
  color: var(--primary);
  margin: 0 0 12px;
}
.tile .badge .ico { width: 25px; height: 25px; }
.tile .name { font-size: 18px; font-weight: 600; line-height: 1.25; }
.tile .sub  { font-size: 14px; color: var(--muted); line-height: 1.3; }

.tile.soon { box-shadow: none; background: #FAFBFD; cursor: default; }
.tile.soon .badge { background: #EFF1F6; color: var(--faint); }
.tile.soon .name  { color: var(--muted); }
.tile.soon .sub   { color: var(--faint); }

/* ---------- summary strip ---------- */

.summary { display: flex; gap: 12px; margin: 0 0 18px; }
.summary .box {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 13px 15px;
}
.summary .box .n { font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.summary .box .l { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- PIN pad ---------- */

.pin-dots { display: flex; justify-content: center; gap: 18px; margin: 10px 0 26px; }
.pin-dots span {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: #fff;
  transition: background .1s ease, transform .1s ease;
}
.pin-dots span.on { background: var(--primary); transform: scale(1.12); }

.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pin-key {
  display: grid;
  place-items: center;
  min-height: 70px;
  font-size: 27px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease;
}
.pin-key:active { background: var(--primary-tint); border-color: var(--primary); }
.pin-key .ico { width: 27px; height: 27px; }
.pin-key.blank { visibility: hidden; }

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

.stack { display: flex; flex-direction: column; gap: 12px; }
.hr { height: 1px; background: var(--line-soft); border: 0; margin: 26px 0; }
.footnote { font-size: 15px; color: var(--muted); text-align: center; margin-top: 22px; }

.ico {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 560px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Lists, worker rows, and the daily attendance screen
   ========================================================================== */

/* back link above a page title */
.back {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); text-decoration: none;
  font-size: 16px; font-weight: 600; min-height: 44px;
}
.back .ico { width: 18px; height: 18px; }
.back:hover { color: var(--primary); }

.pagehead { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.pagehead h1 { flex: 1; }
.pagehead .act { flex: none; }

/* tabs: Active / Inactive */
.tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.tabs a {
  flex: 1; text-align: center; text-decoration: none;
  padding: 12px 10px; min-height: 50px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 600;
  color: var(--muted); background: #fff;
  border: 2px solid var(--line); border-radius: var(--r-sm);
}
.tabs a.on { color: #fff; background: var(--primary); border-color: var(--primary); }

/* a list of people or entries */
.list { display: flex; flex-direction: column; gap: 10px; }

.row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 13px 15px;
  text-decoration: none; color: var(--ink);
}
.row:hover { border-color: var(--line); box-shadow: var(--shadow-md); }
.row .who { flex: 1; min-width: 0; }
.row .nm { font-size: 18px; font-weight: 600; line-height: 1.25; }
.row .meta { font-size: 14px; color: var(--muted); }
.row .amt {
  flex: none; text-align: right;
  font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.row .amt small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.row.off { background: #FAFBFD; }
.row.off .nm { color: var(--muted); }

.empty {
  text-align: center; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--r-md); padding: 30px 20px;
}

/* ---------- attendance: the P / H / A row ---------- */

.att { display: flex; flex-direction: column; gap: 10px; }

.att-row {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}
.att-row.set-P { border-left-color: var(--credit); }
.att-row.set-H { border-left-color: #B8860B; }
.att-row.set-A { border-left-color: var(--debit); }
.att-row.set-L { border-left-color: var(--primary-lt); }

.att-row .top { display: flex; align-items: center; gap: 11px; margin: 0 0 11px; }
.att-row .top .nm { line-height: 1.2; }
.att-row .nm { font-size: 18px; font-weight: 600; flex: 1; min-width: 0; }
.att-row .rate { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

.pha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pha button {
  min-height: 52px;
  font-size: 17px; font-weight: 700; font-family: inherit;
  color: var(--ink-2); background: #fff;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.pha button small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.pha button.on { color: #fff; }
.pha button.on[data-s="1"] { background: var(--credit);     border-color: var(--credit); }
.pha button.on[data-s="2"] { background: #B8860B;           border-color: #B8860B; }
.pha button.on[data-s="3"] { background: var(--debit);      border-color: var(--debit); }
.pha button.on[data-s="4"] { background: var(--primary-lt); border-color: var(--primary-lt); }

/* sticky save bar at the bottom of the attendance screen */
.savebar {
  position: sticky; bottom: 0;
  background: rgba(238, 241, 247, .96);
  border-top: 1px solid var(--line);
  margin: 18px -16px 0; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
.savebar .count { flex: none; font-size: 15px; color: var(--muted); font-weight: 600; }
.savebar .btn { flex: 1; }

.toolbar { display: flex; gap: 10px; margin: 0 0 16px; }
.toolbar .btn { flex: 1; min-height: 50px; font-size: 16px; }

/* ==========================================================================
   Worker photographs

   The whole point is telling two men with the same name apart, so the picture
   has to be big enough to recognise a face at arm's length on a phone.
   ========================================================================== */

.avatar {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;                 /* fill the circle, never squash the face */
  background: var(--primary-tint);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.avatar-sm { width: 44px; height: 44px; }
.avatar-lg { width: 108px; height: 108px; border-radius: 16px; }

/* shown when a worker has no photo yet: their initials */
.avatar-none {
  display: grid; place-items: center;
  font-size: 19px; font-weight: 700;
  color: var(--primary);
  background: var(--primary-tint);
  letter-spacing: .01em;
}
.avatar-none.avatar-sm { font-size: 16px; }
.avatar-none.avatar-lg { font-size: 38px; }

/* the picker on the worker form */
.photo-pick { display: flex; align-items: center; gap: 16px; }
.photo-pick .shot { flex: none; }
.photo-pick .side { flex: 1; min-width: 0; }
.photo-pick .side .muted { font-size: 15px; }

/* the real file input is hidden; the label is what gets tapped, which is what
   makes the phone offer Camera or Gallery */
.photo-pick input[type=file] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.photo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 10px 18px;
  font-size: 17px; font-weight: 600;
  color: var(--primary); background: #fff;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.photo-btn:hover { border-color: var(--primary-lt); }
.photo-btn .ico { width: 20px; height: 20px; }

/* ==========================================================================
   Balances and the ledger

   A balance is read at a glance and acted on, so it is coloured and labelled
   rather than shown as a bare signed number. "-300" is easy to misread at
   arm's length; green "300 to pay" against red "300 he owes" is not.
   ========================================================================== */

.bal-due  { color: var(--credit); }   /* we owe him       */
.bal-over { color: var(--debit); }    /* he has over-drawn */
.bal-nil  { color: var(--muted); }

.bal-big {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--paper);
  text-align: center;
}
.bal-big .n { display: block; font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bal-big .l { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }
.bal-big.bal-due  { background: var(--credit-bg); }
.bal-big.bal-over { background: var(--debit-bg); }

/* ---------- the statement ---------- */

.ledger { display: flex; flex-direction: column; gap: 8px; }

.led {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}
.led .d {
  flex: none; width: 78px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  line-height: 1.3; padding-top: 2px;
}
.led .k { flex: 1; min-width: 0; }
.led .k .kind { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.led .k .det  { display: block; font-size: 14px; color: var(--muted); line-height: 1.3; }
.led .v { flex: none; text-align: right; }
.led .v span { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.led .v span.cr { color: var(--credit); }
.led .v span.dr { color: var(--debit); }
.led .v small { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* recorded but not charged: visible, and visibly not counted */
.led.free { background: #FBFCFE; border-style: dashed; }
.led.free .v span { color: var(--faint); text-decoration: line-through; }
.led .k .tag {
  display: inline-block; margin-top: 3px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: var(--warn); background: var(--warn-bg);
  border-radius: 4px; padding: 2px 7px;
}

/* Correcting a line. It takes the full width UNDER the three columns rather
   than a fourth column of its own: the date, the reason and the figure are
   what the ledger is for, and none of them can afford to give up room on a
   phone for a button that is used twice a month. */
.led .fix { flex: 0 0 100%; text-align: right; border-top: 1px dashed var(--line-soft); }
.led .fix a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-size: 15px; font-weight: 600; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px;
}
.led .fix .muted { display: inline-block; padding-top: 7px; font-size: 14px; }

/* ---------- how far back the ledger goes ---------- */

.period { display: flex; gap: 8px; margin: 0 0 16px; }
.period select {
  flex: 1; min-width: 0; min-height: 50px;
  padding: 12px 14px;
  font-family: inherit; font-size: 17px; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: var(--r-sm);
}
.period .btn { flex: none; min-height: 50px; }

/* What he was owed before the first line on the screen. */
.brought {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 10px; padding: 11px 14px;
  background: var(--paper); border-radius: var(--r-sm);
}
.brought .l { flex: 1; font-size: 16px; font-weight: 600; color: var(--muted); }
.brought .v { flex: none; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.brought .v.cr { color: var(--credit); }
.brought .v.dr { color: var(--debit); }

/* ---------- the statement, gathered into months ---------- */

.mon {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* The whole header is the tap target, so it is a real button - 60px tall,
   full width, and reachable by keyboard without any script. */
.mon-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 12px 15px;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  font-family: inherit; text-align: left; cursor: pointer;
}
.mon-head .t { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.mon-head .v {
  flex: none; text-align: right;
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mon-head .v.cr { color: var(--credit); }
.mon-head .v.dr { color: var(--debit); }
.mon-head .v small {
  display: block; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}

/* A chevron drawn in CSS rather than another icon: it has to turn, and a
   rotating <use> is more trouble than two borders. */
.mon-head .caret {
  flex: none; width: 10px; height: 10px; margin-left: 2px;
  border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .15s ease;
}
.mon.open .mon-head .caret { transform: rotate(225deg) translate(-2px, -2px); }

.mon-sum { padding: 4px 15px 12px; }

.bit { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; }
.bit .l { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.bit .l small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.bit .v {
  flex: none; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bit .v.cr { color: var(--credit); }
.bit .v.dr { color: var(--debit); }

.mon-mark {
  margin-top: 8px; padding: 8px 11px;
  background: var(--primary-tint); border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; color: var(--primary);
}

.mon-more {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--line-soft);
  font-size: 15px; color: var(--muted);
}
.mon.open .mon-more { display: none; }

/* Rendered with the page and hidden, so opening a month is instant and costs
   no round trip. The whole account had to be read to draw the summary anyway. */
.mon-lines { display: none; padding: 0 13px 13px; }
.mon.open .mon-lines { display: flex; }

/* the picker rows carry a balance on the right */
.row .amt.bal-due  { color: var(--credit); }
.row .amt.bal-over { color: var(--debit); }
.row .amt.bal-nil  { color: var(--muted); }

/* ==========================================================================
   Dev screens: the handover card and the "working inside a customer" banner
   ========================================================================== */

.bal-warn { color: var(--warn); }

/* The card that is printed and given to a new customer. */
.handover { border: 2px solid var(--line); }
.hand-row { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; }
.hand-row .l {
  flex: none; width: 116px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.hand-row .v { flex: 1; min-width: 0; font-size: 18px; word-break: break-all; }

/* A password is copied by eye, so it gets a monospace face where every
   character is unmistakable. */
.hand-row .v.pw {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 23px; font-weight: 700; letter-spacing: .06em;
  background: var(--primary-tint); color: var(--primary);
  padding: 6px 12px; border-radius: var(--r-sm); display: inline-block;
}

/* Dev is working inside a customer's data - impossible to forget, by design. */
.impersonating {
  background: var(--warn-bg);
  border-bottom: 2px solid var(--warn);
  color: var(--warn);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600;
}
.impersonating .ico { width: 20px; height: 20px; flex: none; }
.impersonating a { margin-left: auto; color: var(--warn); font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   The settlement reckoning

   Laid out like the paper page it replaces: what he had, what he earned, what
   he took, what is left. He reads this over your shoulder while you count.
   ========================================================================== */

.reckon { display: flex; flex-direction: column; }

.reckon .line {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.reckon .line:last-child { border-bottom: 0; }
.reckon .line .l { flex: 1; min-width: 0; font-size: 17px; }
.reckon .line .l small { display: block; font-size: 14px; color: var(--muted); font-weight: 400; }
.reckon .line .v {
  flex: none; font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.reckon .line .v.cr { color: var(--credit); }
.reckon .line .v.dr { color: var(--debit); }

/* the figure everything else adds up to */
.reckon .line.total {
  margin-top: 6px; padding-top: 15px;
  border-top: 2px solid var(--ink); border-bottom: 0;
}
.reckon .line.total .l { font-size: 19px; font-weight: 700; }
.reckon .line.total .v { font-size: 27px; font-weight: 700; }

/* month summary: the second line of figures under a worker */
.monthbits {
  flex: 0 0 100%;
  display: flex; gap: 18px;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px; color: var(--muted);
}
.monthbits b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- attendance register ---------- */
/* A grid is the one place this app goes wide. The name column is pinned so a
   thumb can push the days past it and still know whose row it is reading. */
.reg-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.reg { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }

.reg th, .reg td { border-bottom: 1px solid var(--line-soft); white-space: nowrap; }

.reg thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--primary-tint);
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  padding: 6px 0 5px; text-align: center; min-width: 32px;
}
.reg thead th b     { display: block; font-size: 14px; }
.reg thead th small { display: block; font-size: 10px; color: var(--muted); font-weight: 600; }

/* The pinned name column. z-index above the day cells, below the header. */
.reg .nm {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface);
  text-align: left; padding: 8px 12px 8px 14px;
  min-width: 132px; max-width: 132px;
  border-right: 1px solid var(--line);
}
.reg thead .nm { z-index: 4; background: var(--primary-tint); }
.reg .nm a     { text-decoration: none; color: inherit; display: block; }
.reg .nm b     { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.reg .nm small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

.reg td.m {
  width: 32px; text-align: center; padding: 8px 0;
  font-size: 14px; font-weight: 700; color: var(--muted);
}
.reg td.p { color: var(--credit); background: var(--credit-bg); }
.reg td.h { color: #7A5A0B;       background: #FBF3DE; }
.reg td.a { color: var(--debit);  background: var(--debit-bg); }
.reg td.l { color: var(--primary); background: var(--primary-tint); }
.reg td.x { background: repeating-linear-gradient(45deg, #FFF, #FFF 4px, #F4F6FA 4px, #F4F6FA 8px); }

.reg .sun { box-shadow: inset 0 0 0 99px rgba(158, 49, 34, .04); }

.reg .tot {
  position: sticky; right: 0; z-index: 3;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 8px 12px; text-align: right; font-weight: 700; font-size: 15px; min-width: 54px;
}
.reg thead .tot { z-index: 4; background: var(--primary-tint); }

.reg tfoot th, .reg tfoot td {
  background: #F7F9FC; font-size: 13px; font-weight: 700;
  color: var(--ink-2); border-bottom: 0;
}
.reg tfoot .nm b { font-size: 13px; }

.reg-key { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 2px 0; font-size: 14px; color: var(--muted); }
.reg-key b {
  display: inline-block; width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 6px; margin-right: 5px; font-size: 13px;
}
.reg-key b.p { color: var(--credit);  background: var(--credit-bg); }
.reg-key b.h { color: #7A5A0B;        background: #FBF3DE; }
.reg-key b.a { color: var(--debit);   background: var(--debit-bg); }
.reg-key b.l { color: var(--primary); background: var(--primary-tint); }
.reg-key b.x { background: repeating-linear-gradient(45deg, #FFF, #FFF 4px, #F4F6FA 4px, #F4F6FA 8px); border: 1px solid var(--line-soft); }

/* ---------- several days at once ---------- */
/* An unsaved change is worth showing plainly: this screen can alter a fortnight
   in one press, and he should be able to see exactly what he is about to. */
.att-row.changed { box-shadow: var(--shadow-md); border-color: var(--primary-lt); }
.att-row.changed .top .nm:after {
  content: "changed"; margin-left: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--primary-lt);
}
.att-row.locked { background: #FAFBFD; }
.att-row.locked .pha button { opacity: .45; }

/* ---------- settlement history ---------- */
.settle-card { padding: 15px 16px; }
.settle-card.released { background: #FAFBFD; border-style: dashed; }
.settle-head { display: flex; align-items: flex-start; gap: 12px; }
.settle-head .per { flex: 1; min-width: 0; }
.settle-head .per b     { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.settle-head .per small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.settle-head .paid {
  flex: none; text-align: right; font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--credit);
}
.settle-head .paid small {
  display: block; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.settle-card.released .settle-head .paid { color: var(--muted); }

/* ---------- what was changed ---------- */
.fix-card { padding: 15px 16px; }
.fix-card.gone { border-left: 5px solid var(--debit); }
.fix-head { display: flex; align-items: flex-start; gap: 12px; }
.fix-head .who { flex: 1; min-width: 0; }
.fix-head .who b     { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.fix-head .who small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.fix-head .when {
  flex: none; font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 2px;
}
.fix-was { display: flex; gap: 10px; margin-top: 8px; font-size: 15px; }
.fix-was .l {
  flex: none; width: 40px; color: var(--muted);
  font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .04em;
  padding-top: 3px;
}
.fix-was .v { flex: 1; min-width: 0; word-break: break-word; }
.fix-why {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--line-soft);
  font-size: 15px; color: var(--ink-2);
}