/* ============ Reimbursements page (generated) ============
   GENERATED by scripts/build_reimbursements.py. Edit PAGE_CSS there and
   re-run; changes made here are overwritten.

   Its own file rather than an addition to portal.css for the same reason
   taskmaster.css and safety.css are separate: a regeneration must never race
   a hand edit in a shared stylesheet. Nothing here overrides a portal rule,
   it only adds .rm-*, .fld and .rb selectors. */

/* ---- path chooser ---- */
.rm-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.rm-path {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  padding: 28px 30px 30px; background: var(--bg-soft); border: 1px solid var(--line);
  font-family: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.rm-path:hover { border-color: var(--blue); transform: translate3d(0,-2px,0); }
.rm-path-kicker {
  font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--blue); font-weight: var(--fw-semi);
}
.rm-path-title {
  font-family: var(--font-display); font-size: var(--fs-2); font-weight: var(--fw-med);
  color: var(--navy);
}
.rm-path-note { font-size: var(--fs--1); color: var(--muted); line-height: 1.65; }
.rm-switch { margin: 18px 0 0; }
.rm-link {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--blue);
  font-family: inherit; font-size: var(--fs--1);
}
.rm-link:hover { text-decoration: underline; }

/* ---- notice when the endpoint is not deployed ---- */
.rm-notice {
  padding: 16px 20px; margin-bottom: 4px;
  background: rgba(216,150,30,.08); border-left: 3px solid #d8961e;
  font-size: var(--fs--1); color: var(--ink); line-height: 1.7;
}
.rm-notice code { font-size: .92em; }

/* ---- test mode banner ---- */
/* Loud on purpose. The whole point is that you cannot mistake a sandbox
   submission for a real one, or leave test mode on by accident. */
.rm-testbar {
  padding: 12px 20px; margin-bottom: 18px;
  background: #4a2c00; color: #ffd591;
  border-left: 4px solid #ffab2e;
  font-size: var(--fs--1); line-height: 1.6;
}
.rm-testbar strong { color: #fff; }

/* ---- form and rules, side by side ---- */
.rm-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 48px; align-items: start; }
.rm-form { min-width: 0; }

.rm-step {
  display: flex; align-items: center; gap: 12px; margin: 44px 0 18px;
  font-family: var(--font-display); font-size: var(--fs-2); font-weight: var(--fw-med);
  color: var(--navy);
}
.rm-step:first-child { margin-top: 0; }
.rm-step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-body); font-size: var(--fs--2); font-weight: var(--fw-semi);
}
.rm-hint { font-size: var(--fs--1); color: var(--muted); margin: -8px 0 18px; line-height: 1.65; }

.rm-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 24px; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs--1);
       font-weight: var(--fw-med); color: var(--navy); min-width: 0; }
.fld-wide { grid-column: span 2; }
.fld-sm { max-width: 140px; }
.fld .opt { font-weight: var(--fw-book); color: var(--muted); text-transform: none; }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 10px 12px; background: #fff;
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-body); font-size: var(--fs-0); font-weight: var(--fw-book);
  color: var(--ink); transition: border-color .2s var(--ease);
}
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 0; border-color: var(--blue); }
.fld input[readonly] { background: var(--bg-soft); color: var(--muted); }
.fld textarea { resize: vertical; min-height: 62px; line-height: 1.6; }
.fld-note { font-size: var(--fs--2); font-weight: var(--fw-book); color: var(--muted); line-height: 1.55; }
.fld.bad input, .fld.bad select { border-color: #c0392b; }
.fld input[type="file"] { padding: 8px; font-size: var(--fs--1); }

/* the escape-hatch name fields, revealed only by "I am not on this list" */
.fld.rm-other[hidden] { display: none; }

/* ---- receipt rows ---- */
.rm-row {
  position: relative; padding: 22px 22px 20px; margin-bottom: 16px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.rm-row.done { background: rgba(46,125,80,.06); border-color: rgba(46,125,80,.35); }
.rm-row.failed { border-color: #c0392b; }
.rm-row-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.rm-row-n {
  font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--muted); font-weight: var(--fw-semi);
}
.rm-row-state { font-size: var(--fs--2); color: var(--muted); }
.rm-row.done .rm-row-state { color: #2e7d32; }
.rm-row.failed .rm-row-state { color: #c0392b; }
.rm-drop {
  margin-left: auto; background: none; border: 0; cursor: pointer; padding: 2px 6px;
  color: var(--muted); font-size: var(--fs--1); font-family: inherit;
}
.rm-drop:hover { color: #c0392b; }
.rm-alcohol-warn {
  grid-column: span 2; margin: -4px 0 0; padding: 10px 14px;
  background: rgba(192,57,43,.07); border-left: 3px solid #c0392b;
  font-size: var(--fs--2); color: var(--ink); line-height: 1.6;
}

/* a row waiting on the reader */
.rm-row.reading { border-color: var(--blue); }
.rm-row.reading .rm-row-state { color: var(--blue); }
.rm-row.reading .rm-row-state::after {
  content: ""; display: inline-block; margin-left: 7px;
  width: 9px; height: 9px; vertical-align: -1px;
  border: 2px solid var(--blue); border-right-color: transparent; border-radius: 50%;
  animation: rmspin .7s linear infinite;
}
@keyframes rmspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rm-row.reading .rm-row-state::after { animation: none; opacity: .5; }
}

/* A prefilled box is marked, because a number that arrived on its own should
   look different from one you typed. The badge goes the moment you edit. */
.fld { position: relative; }
input.rm-auto, select.rm-auto { background: rgba(127,178,229,.10); border-color: rgba(20,44,79,.28); }
.rm-auto-badge {
  align-self: flex-start; margin-top: -2px;
  font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--blue); font-weight: var(--fw-semi);
}

/* What the reader noticed. "stop" is the alcohol case, which is not advice:
   the receipt is unreimbursable and submitting it wastes three weeks. */
.rm-flags { margin: 14px 0 0; display: grid; gap: 8px; }
.rm-flag { margin: 0; padding: 10px 14px; font-size: var(--fs--2); line-height: 1.6; }
.rm-flag-stop { background: rgba(192,57,43,.09); border-left: 3px solid #c0392b; color: var(--ink); }
.rm-flag-warn { background: rgba(216,150,30,.10); border-left: 3px solid #d8961e; color: var(--ink); }
.rm-flag-note { background: var(--bg-soft-2); border-left: 3px solid var(--line); color: var(--muted); }

/* The running ledger. Not the sheet itself, just what has landed on it, so
   the total is visible without leaving the page. */
.rm-ledger { margin: 30px 0 0; padding: 22px 24px; background: var(--bg-soft-2); border: 1px solid var(--line); }
.rm-ledger[hidden] { display: none; }
.rm-ledger-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin: 0 0 14px;
  font-family: var(--font-display); font-size: var(--fs-1); font-weight: var(--fw-med);
  color: var(--navy);
}
.rm-ledger-link { margin-left: auto; font-family: var(--font-body); font-size: var(--fs--2); }
.rm-ledger-table { width: 100%; border-collapse: collapse; font-size: var(--fs--1); }
.rm-ledger-table th, .rm-ledger-table td {
  text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line);
}
.rm-ledger-table thead th {
  font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--muted); font-weight: var(--fw-semi);
}
.rm-ledger-table td { color: var(--ink); }
.rm-ledger-table .num { text-align: right; padding-right: 0; }
.rm-ledger-table tfoot th {
  border-bottom: 0; padding-top: 12px; color: var(--navy); font-weight: var(--fw-med);
}
.rm-ledger-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }

/* The finish panel: download first, because that is what they came for. */
.rm-done { margin: 18px 0 0; }
.rm-dl {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 20px; background: #fff; border: 1px solid var(--blue);
  text-decoration: none; transition: background .2s var(--ease);
}
.rm-dl:hover { background: rgba(127,178,229,.12); text-decoration: none; }
.rm-dl-name {
  font-size: var(--fs-1); font-weight: var(--fw-med); color: var(--navy);
}
.rm-dl-name::before { content: "\2193  "; color: var(--blue); }
.rm-dl-note { font-size: var(--fs--2); color: var(--muted); }

.rm-filelist { margin: 12px 0 0; }
.rm-filelist summary {
  cursor: pointer; font-size: var(--fs--2); color: var(--muted); padding: 6px 0;
}
.rm-filelist summary:hover { color: var(--navy); }
.rm-filelist ul { list-style: none; padding: 6px 0 0; margin: 0; }
.rm-filelist li { padding: 5px 0; font-size: var(--fs--2); overflow-wrap: anywhere; }
.rm-filelist-note { font-size: var(--fs--2); color: var(--muted); margin: 8px 0 0; }

.rm-laststep { margin: 22px 0 0; font-size: var(--fs--1); color: var(--navy); font-weight: var(--fw-med); }
.rm-donefoot { margin: 16px 0 0; font-size: var(--fs--2); color: var(--muted); }

.rm-rowtools { display: flex; align-items: center; gap: 20px; margin: 4px 0 0; }
.rm-add {
  padding: 10px 18px; cursor: pointer; background: none;
  border: 1px dashed var(--line); color: var(--navy);
  font-family: inherit; font-size: var(--fs--1); font-weight: var(--fw-med);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.rm-add:hover { border-color: var(--blue); color: var(--blue); }
.rm-total { margin-left: auto; font-size: var(--fs--1); color: var(--muted); }
.rm-total strong { font-size: var(--fs-1); color: var(--navy); font-weight: var(--fw-med); }

.rm-folder { font-size: var(--fs--2); color: var(--muted); margin: 16px 0 0; }
.rm-folder code {
  background: var(--bg-soft); padding: 3px 7px; color: var(--navy); font-size: .95em;
}

/* ---- actions and status ---- */
.rm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; }
.rm-submit, .rm-finish {
  padding: 14px 26px; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs--2); font-weight: var(--fw-semi);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.rm-submit { background: var(--blue); color: #fff; }
.rm-submit:hover:not(:disabled) { background: var(--blue-light); color: var(--navy); }
.rm-finish { background: none; border: 1px solid var(--navy); color: var(--navy); }
.rm-finish:hover:not(:disabled) { background: var(--navy); color: #fff; }
.rm-submit:disabled, .rm-finish:disabled { opacity: .45; cursor: not-allowed; }

.rm-status { margin: 20px 0 0; font-size: var(--fs--1); line-height: 1.7; }
.rm-status:empty { margin: 0; }
.rm-status .msg { padding: 14px 18px; background: var(--bg-soft); border-left: 3px solid var(--line); }
.rm-status .msg.work { border-left-color: var(--blue); }
.rm-status .msg.good { border-left-color: #2e7d32; background: rgba(46,125,80,.06); }
.rm-status .msg.bad { border-left-color: #c0392b; background: rgba(192,57,43,.06); }
.rm-status ul { list-style: none; padding: 0; margin: 12px 0 0; }
.rm-status li { padding: 5px 0; }
.rm-status .next {
  display: inline-block; margin-top: 14px; padding: 11px 22px;
  background: var(--navy); color: #fff;
  font-size: var(--fs--2); font-weight: var(--fw-semi);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
}
.rm-status .next:hover { background: var(--blue); text-decoration: none; }

/* ---- rules rail ---- */
.rb { position: sticky; top: 136px; padding: 24px 24px 8px; background: var(--bg-soft); border: 1px solid var(--line); }
.rb-head {
  font-family: var(--font-display); font-size: var(--fs-0); font-weight: var(--fw-med);
  color: var(--navy); margin: 0 0 14px; line-height: 1.4;
}
.rb-item { border-top: 1px solid var(--line); }
.rb-item summary {
  padding: 12px 0; cursor: pointer; list-style: none;
  font-size: var(--fs--1); font-weight: var(--fw-med); color: var(--navy);
}
.rb-item summary::-webkit-details-marker { display: none; }
.rb-item summary::after {
  content: "+"; float: right; color: var(--muted); font-weight: var(--fw-book);
}
.rb-item[open] summary::after { content: "\2013"; }
.rb-item ul { list-style: none; padding: 0; margin: 0 0 14px; }
.rb-item li {
  position: relative; padding: 0 0 10px 14px;
  font-size: var(--fs--2); color: var(--muted); line-height: 1.65;
}
.rb-item li::before { content: ""; position: absolute; left: 0; top: 8px;
  width: 4px; height: 4px; background: var(--blue); }

/* Reference links, directly under the heading. A quiet row rather than a
   card grid: they are signposts, not the point of the page, but they have to
   be seen before the form rather than after it. */
.rm-refs-band { padding-top: var(--band-xs); padding-bottom: 0; }
.rm-refs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 28px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.rm-ref {
  display: flex; flex-direction: column; gap: 3px; padding: 15px 0;
  text-decoration: none; border-left: 0;
}
.rm-ref-name {
  font-size: var(--fs--1); font-weight: var(--fw-med); color: var(--navy);
  transition: color .18s var(--ease);
}
.rm-ref:hover .rm-ref-name { color: var(--blue); }
.rm-ref-name::after { content: " \2197"; color: var(--muted); font-weight: var(--fw-book); }
.rm-ref-note { font-size: var(--fs--2); color: var(--muted); line-height: 1.5; }

@media (max-width: 760px) {
  .rm-refs { gap: 0; }
  .rm-ref { padding: 12px 0; border-top: 1px solid var(--line); }
  .rm-ref:first-child { border-top: 0; }
}

@media (max-width: 1040px) {
  .rm-layout { grid-template-columns: 1fr; gap: 34px; }
  .rb { position: static; }
}
@media (max-width: 760px) {
  .rm-choose { grid-template-columns: 1fr; }
  .rm-grid { grid-template-columns: 1fr; }
  .fld-wide { grid-column: span 1; }
  .rm-alcohol-warn { grid-column: span 1; }
  .rm-rowtools { flex-direction: column; align-items: stretch; gap: 12px; }
  .rm-total { margin-left: 0; }
}