/* Veranta Health — Claims & EDI provider portal.
   Loaded only by /claims/. site.css carries the tokens, the header, the
   footer, .wrap, .btn and .eyebrow, and this file never restates them.

   A third stylesheet rather than an append to site.css or to ops.css, for the
   reason pages.css and ops.css already exist: site.css is edge-cached for
   seven days on the live domain (PLAT-06/PLAT-11) and a new filename sidesteps
   that entirely, and a page family's rules stay legible as a group. /ops/ and
   /claims/ are two different back-office products that happen to share a
   brand, so they do not share a stylesheet either.

   Same geometry rule as everywhere else on this site and it is not negotiable
   because a page is internal: radius 0, no shadows, no gradients, one blue,
   1px Mist borders. Figures are tabular-nums, which is legibility rather than
   style.

   Desktop-first by decision (PLAT, and the Veranta README): these are screens
   somebody drives on a laptop or a shared display. The breakpoints at the foot
   exist so a narrow window is not broken, not because the portal is meant to
   be used at 640px. */

/* ---------- header additions ---------- */

.vc-nav { display: flex; gap: 0; align-items: stretch; height: 100%; margin-left: 24px; }
.vc-nav a {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--v-steel);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.vc-nav a:hover { color: var(--v-primary); text-decoration: none; background: var(--v-cloud); }
.vc-nav a[aria-current="page"] {
  color: var(--v-ink);
  font-weight: 600;
  border-bottom-color: var(--v-primary);
}

/* Who is signed in. Pushed right, and it never shrinks: the whole point of it
   is that a person glancing at the screen can tell a human submission from a
   service-account one without opening anything. */
.vc-who {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.3;
  flex-shrink: 0;
}
.vc-who-name { font-size: 13px; font-weight: 600; color: var(--v-ink); }
.vc-who-org  { font-size: 11.5px; color: var(--v-steel); }
.vc-signout  { font-size: 11.5px; color: var(--v-primary); }

/* ---------- page furniture ---------- */

.vc-wrap { max-width: var(--v-max); margin: 0 auto; }
.vc-band { padding: 40px var(--v-gutter); }
.vc-band + .vc-band { border-top: 1px solid var(--v-mist); }
.vc-cloud { background: var(--v-cloud); }
.vc-band h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.015em; }
.vc-band h2 { font-size: 21px; margin: 34px 0 6px; }
.vc-band h2:first-of-type { margin-top: 0; }
.vc-lede { font-size: 14px; color: var(--v-steel); margin: 0 0 24px; max-width: 84ch; line-height: 1.55; }
.vc-note { font-size: 13px; color: var(--v-steel); line-height: 1.6; max-width: 88ch; margin: 16px 0 0; }
.vc-dim { color: var(--v-steel); }
.vc-mono, .vc-table .n { font-variant-numeric: tabular-nums; }
.vc-nowrap { white-space: nowrap; }
.vc-actions { display: flex; gap: 12px; align-items: center; margin: 28px 0 0; flex-wrap: wrap; }

.vc-plainlist { margin: 0; padding-left: 20px; max-width: 88ch; }
.vc-plainlist li { font-size: 13.5px; color: var(--v-steel); line-height: 1.6; margin: 0 0 10px; }
.vc-plainlist strong { color: var(--v-ink); }

.vc-quote {
  border-left: 3px solid var(--v-mist);
  padding: 4px 0 4px 16px;
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 84ch;
}

/* `.vc-notice` was the reset confirmation and is gone as of 2026-08-06
   (`PLAT-95`). It is a `.demo-toast` now, in the shared css/toast.css.
   requests.php was its only caller. */

.vc-empty {
  padding: 26px;
  text-align: center;
  font-size: 13.5px;
  color: var(--v-steel);
  background: var(--v-cloud);
  border: 1px solid var(--v-mist);
}

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

.vc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--v-mist); border: 1px solid var(--v-mist); }
.vc-tile { background: var(--v-white); padding: 22px 24px; min-height: 132px; display: flex; flex-direction: column; color: inherit; }
a.vc-tile:hover { background: var(--v-cloud); text-decoration: none; color: inherit; }
.vc-tile .eyebrow { margin: 0 0 10px; }
.vc-tile-value { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; color: var(--v-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.vc-tile-note { font-size: 12.5px; color: var(--v-steel); margin: 8px 0 0; line-height: 1.45; }
.vc-tile.is-off { background: var(--v-cloud); }
.vc-tile.is-off .vc-tile-value { font-size: 15px; font-weight: 500; color: var(--v-steel); letter-spacing: 0; }

/* ---------- the sign-in page ---------- */

.vc-login { padding: 48px var(--v-gutter) 64px; }
.vc-login-intro { margin: 0 0 32px; }
.vc-login-intro h1 { font-size: 34px; margin: 4px 0 8px; letter-spacing: -0.02em; }
.vc-login-sub { font-size: 14.5px; color: var(--v-steel); max-width: 62ch; margin: 0; line-height: 1.55; }

.vc-login-grid { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; }
/* The sign-in form with no demo-account column beside it, which is what an
   ordinary visitor gets (PLAT-88). justify-content rather than a wider track:
   the column is a fixed 380px and cannot stretch, so without placing it the
   leftover space falls to the start and the form sits pinned against 1000px of
   nothing. That exact mistake was made on the portal's equivalent rule the day
   before and caught in review. */
.vc-login-grid.is-solo { grid-template-columns: minmax(280px, 420px); justify-content: center; }

.vc-panel { border: 1px solid var(--v-mist); background: var(--v-white); padding: 26px 28px; }
.vc-panel h2 { font-size: 18px; margin: 0 0 18px; }

.vc-login-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--v-steel); margin: 0 0 6px; }
.vc-login-form input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--v-mist);
  border-radius: 0;
  background: var(--v-white);
  color: var(--v-ink);
  margin: 0 0 18px;
}
.vc-login-form input:focus { outline: 2px solid var(--v-primary); outline-offset: -1px; border-color: var(--v-primary); }
.vc-login-form button { width: 100%; }
.vc-login-note { font-size: 12px; color: var(--v-steel); line-height: 1.5; margin: 18px 0 0; }

.vc-form-error {
  border: 1px solid var(--v-error);
  border-left: 3px solid var(--v-error);
  color: var(--v-error);
  background: var(--v-white);
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 20px;
  max-width: 84ch;
}

.vc-login-accounts h2 { font-size: 18px; margin: 0 0 6px; }
.vc-login-accounts-sub { font-size: 13px; color: var(--v-steel); margin: 0 0 16px; }
.vc-login-accounts-foot { font-size: 12.5px; color: var(--v-steel); line-height: 1.55; margin: 16px 0 0; max-width: 72ch; }

.vc-account-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--v-mist); border: 1px solid var(--v-mist); }

/* The card is a button so it is reachable and pressable from the keyboard.
   Two clicks: the first fills the form, the second signs in. Copied from the
   Winterfield portal on purpose (Dave's ask, 2026-08-02.6) rather than
   reinvented, because picking an account and then crossing the page to press
   Sign in is two gestures for one intention. */
.vc-account-card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--v-white);
  border: 0;
  border-left: 3px solid transparent;
  padding: 14px 18px;
  cursor: pointer;
  position: relative;
}
.vc-account-card:hover { background: var(--v-cloud); }
.vc-account-card:focus-visible { outline: 2px solid var(--v-primary); outline-offset: -2px; }
.vc-account-card.just-filled { border-left-color: var(--v-primary); background: var(--v-cloud); }
.vc-account-card.is-robot .vc-account-name::after {
  content: "service account";
  display: inline-block;
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v-white);
  background: var(--v-steel);
  padding: 2px 7px;
  vertical-align: 2px;
}

.vc-account-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.vc-account-name { font-size: 14.5px; font-weight: 600; color: var(--v-ink); }
.vc-account-tag { font-size: 11px; color: var(--v-steel); white-space: nowrap; }
.vc-account-sub { display: block; font-size: 12.5px; color: var(--v-steel); margin: 3px 0 0; }

/* The credential tooltip. Shown on hover and on keyboard focus, never on
   click, so that a click is unambiguously "fill" or "sign in".

   Below the card and pinned to its own width, which is the Winterfield
   portal's geometry rather than a floating panel beside the card. Measured
   2026-08-04: a 300px panel at left:100% is off the right edge of the window
   at every width this portal is used at, because the accounts column already
   ends at the right edge of the 1120px wrap. Dropping it downward always
   fits and needs no breakpoint. */
.vc-account-hint {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: var(--v-ink);
  color: var(--v-white);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
}
.vc-account-card:hover .vc-account-hint,
.vc-account-card:focus-visible .vc-account-hint { display: block; }
.vc-hint-creds { display: flex; gap: 10px; margin: 0 0 8px; flex-wrap: wrap; }
.vc-hint-creds code {
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 6px;
  font-size: 11.5px;
  word-break: break-all;
}
.vc-hint-showcase { display: block; color: #C6D3E0; margin: 0 0 8px; }
.vc-hint-fill, .vc-hint-signin { display: block; font-weight: 600; }
.vc-hint-signin { display: none; }
.vc-account-card.just-filled .vc-hint-fill { display: none; }
.vc-account-card.just-filled .vc-hint-signin { display: block; }

/* ---------- the request form ---------- */

.vc-form { max-width: 1020px; }
.vc-form fieldset { border: 1px solid var(--v-mist); padding: 20px 24px 24px; margin: 0 0 20px; background: var(--v-white); }
.vc-form legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--v-steel); font-weight: 600; padding: 0 8px; }
.vc-fieldset-note { font-size: 12.5px; color: var(--v-steel); margin: 0 0 16px; max-width: 80ch; }

.vc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 20px; }
.vc-row + .vc-row { margin-top: 18px; }
.vc-field { min-width: 0; display: flex; flex-direction: column; }
.vc-field-wide { max-width: 80ch; }
.vc-field label { font-size: 12.5px; font-weight: 600; color: var(--v-ink); margin: 0 0 6px; }
.vc-optional { font-weight: 400; color: var(--v-steel); font-size: 11.5px; }

.vc-field input[type="text"],
.vc-field input[type="date"],
.vc-field select,
.vc-field textarea {
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--v-mist);
  border-radius: 0;
  background: var(--v-white);
  color: var(--v-ink);
  width: 100%;
}
.vc-field textarea { resize: vertical; line-height: 1.5; }
.vc-field input:focus, .vc-field select:focus, .vc-field textarea:focus {
  outline: 2px solid var(--v-primary);
  outline-offset: -1px;
  border-color: var(--v-primary);
}
.vc-hint { font-size: 11.5px; color: var(--v-steel); line-height: 1.45; margin: 6px 0 0; }

/* ---------- the determination ---------- */

.vc-verdict { border: 1px solid var(--v-mist); border-left: 3px solid var(--v-steel); background: var(--v-white); padding: 22px 26px; margin: 0 0 32px; max-width: 96ch; }
.vc-verdict h2 { font-size: 20px; margin: 0 0 8px; }
.vc-verdict p { font-size: 13.5px; color: var(--v-steel); line-height: 1.6; margin: 0; max-width: 88ch; }
.vc-verdict-chip { margin: 0 0 12px !important; }
.vc-verdict-foot { margin-top: 16px !important; font-size: 12.5px !important; }
.vc-ok-box   { border-left-color: #2F7A4F; }
.vc-pend-box { border-left-color: #B0791F; }
.vc-none-box { border-left-color: var(--v-steel); }
.vc-rej-box  { border-left-color: var(--v-error); }

.vc-authbox {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--v-cloud);
  border: 1px solid var(--v-mist);
  font-size: 13.5px;
}
.vc-authbox dt { color: var(--v-steel); }
.vc-authbox dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.vc-authbox dd strong { font-size: 17px; letter-spacing: 0.01em; }

.vc-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border: 1px solid; white-space: nowrap; }
.vc-ok   { color: #2F7A4F;         border-color: #2F7A4F;        background: var(--v-white); }
.vc-pend { color: #8A5E14;         border-color: #B0791F;        background: var(--v-white); }
.vc-none { color: var(--v-steel);  border-color: var(--v-mist);  background: var(--v-cloud); }
.vc-rej  { color: var(--v-error);  border-color: var(--v-error); background: var(--v-white); }

.vc-kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; border: 1px solid var(--v-mist); padding: 20px 22px; background: var(--v-white); margin: 0 0 8px; }
.vc-kv div { min-width: 0; }
.vc-kv .eyebrow { margin: 0 0 5px; }
.vc-kv .val { font-size: 14px; font-weight: 500; word-break: break-word; }

/* ---------- the request list ---------- */

.vc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 18px; }
.vc-filter { display: flex; align-items: center; gap: 10px; margin: 0; }
.vc-filter label { font-size: 12.5px; font-weight: 600; color: var(--v-steel); }
.vc-filter select { font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--v-mist); border-radius: 0; background: var(--v-white); color: var(--v-ink); }
/* The demo reset, at the foot of the page since 2026-08-06 (`PLAT-95`) rather
   than in the toolbar. Quiet, and set off by a rule, so it reads as the end of
   the page rather than as another control on it. The note beside it carries
   the scope, which is the one thing worth knowing before pressing it. */
.vc-reset {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--v-mist);
}
.vc-reset .vc-dim { flex: 1 1 320px; font-size: 12.5px; line-height: 1.5; }

.vc-table-wrap { overflow-x: auto; border: 1px solid var(--v-mist); background: var(--v-white); }
.vc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vc-table th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v-steel);
  font-weight: 600;
  padding: 11px 13px;
  border-bottom: 1px solid var(--v-mist);
  white-space: nowrap;
}
.vc-table td { padding: 10px 13px; border-bottom: 1px solid var(--v-mist); vertical-align: top; }
.vc-table tr:last-child td { border-bottom: 0; }
.vc-table tbody tr:hover { background: var(--v-cloud); }

/* ---------- the policy page ---------- */

.vc-rules { margin: 0; padding-left: 22px; max-width: 92ch; }
.vc-rules > li { margin: 0 0 22px; }
.vc-rules h3 { font-size: 15px; margin: 0 0 6px; }
.vc-rules p { font-size: 13.5px; color: var(--v-steel); line-height: 1.6; margin: 0 0 8px; }
.vc-rules strong { color: var(--v-ink); }

/* ---------- appeals, VER-16 / IDEA-004 ---------- */

/* The appeal form reuses .vc-form, .vc-field and the chips wholesale, so what
   is left here is the receipt: a letter, an exhibit list and a fact table. */

.vc-chip-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 0; }
.vc-chip-line .vc-note { margin: 0; }

.vc-facts { margin: 14px 0 24px; }
.vc-facts dt {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v-steel);
  font-weight: 600;
  margin-top: 14px;
}
.vc-facts dd { margin: 4px 0 0; font-size: 14px; }

/* The filed letter, monospaced and scrollable. Wrapping rather than
   overflowing horizontally: it is prose somebody has to read in a room, and a
   letter that scrolls sideways is a letter nobody reads. */
.vc-letter {
  margin: 10px 0 24px;
  padding: 16px 18px;
  background: var(--v-cloud);
  border: 1px solid var(--v-mist);
  font: 400 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 520px;
  overflow: auto;
}

.vc-exhibits { margin: 10px 0 24px; padding-left: 22px; font-size: 13.5px; }
.vc-exhibits li { padding: 3px 0; }

/* The reset band. At the foot, quiet, never in a toolbar: PLAT-95. */
.vc-reset-band { display: flex; }
.vc-reset-band form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vc-reset-band .vc-dim { font-size: 12.5px; max-width: 70ch; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .vc-login-grid { grid-template-columns: 1fr; gap: 32px; }
  .vc-tiles { grid-template-columns: repeat(2, 1fr); }
  .vc-kv { grid-template-columns: repeat(2, 1fr); }
  .vc-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .vc-nav { margin-left: 0; }
  .vc-nav a { padding: 0 10px; font-size: 12.5px; }
  .vc-who { display: none; }
}
@media (max-width: 680px) {
  .vc-tiles, .vc-kv, .vc-row { grid-template-columns: 1fr; }
  .vc-band, .vc-login { padding: 32px 24px; }
}

/* ------------------------------------------- the legacy correction screen
   `IDEA-PR7`, `VER-19`. Dave's ask, 2026-08-21: industry-specific ugly, go to
   town.

   **This is the only place on the estate that deliberately looks bad**, and it
   is making an argument rather than being lazy. A payer's claim correction
   transaction is a web skin over a mainframe screen: fixed width, a monospace
   label column, uppercase everything, function key hints along the bottom. It
   is why RPA exists in this industry, and the estate could not show that
   before because every screen on it is clean and modern.

   Scoped under `.vc-legacy` so not one rule here can reach the rest of the
   portal. Nothing below uses a `--vc-` variable on purpose: this screen is
   supposed to look like it predates the brand. */

.vc-legacy-wrap { max-width: 900px; margin: 0 auto; padding: 30px 20px 60px; }

.vc-legacy {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #1a1a1a;
  background: #d4d0c8;               /* the grey every one of these was */
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;   /* the bevel, unironically */
  padding: 0 0 10px;
}

.vc-legacy-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 4px 8px;
  background: #000080; color: #fff;         /* the blue */
  font-weight: 700; letter-spacing: .04em;
}
.vc-legacy-txn { font-weight: 700; }
.vc-legacy-title { flex: 1; text-align: center; }
.vc-legacy-env { font-size: 11px; }

.vc-legacy-sub {
  display: flex; gap: 24px; padding: 4px 10px;
  border-bottom: 1px solid #808080; font-size: 12px; color: #333;
}

.vc-legacy-msg,
.vc-legacy-error { margin: 8px 10px; font-size: 12px; letter-spacing: .02em; }
.vc-legacy-msg { color: #333; }
/* Red on grey, which is what the terminal did. It is an error line and not a
   styled component, so it does not get a box. */
.vc-legacy-error { color: #a00000; font-weight: 700; }

.vc-legacy-form { padding: 6px 10px; }
.vc-legacy-grid {
  display: grid;
  grid-template-columns: 15ch minmax(0, 46ch);
  gap: 5px 12px;
  align-items: start;
}
.vc-legacy-grid label {
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding-top: 3px; color: #1a1a1a;
}
.vc-legacy-grid input,
.vc-legacy-grid select,
.vc-legacy-grid textarea {
  font-family: inherit; font-size: 13px;
  padding: 2px 4px;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;   /* the inset bevel */
  border-radius: 0;
  text-transform: uppercase;                  /* as the terminal did */
  width: 100%;
}
.vc-legacy-grid textarea { text-transform: none; resize: vertical; }
.vc-legacy-grid input:focus,
.vc-legacy-grid select:focus,
.vc-legacy-grid textarea:focus {
  outline: 2px solid #000080; outline-offset: 0;
}

.vc-legacy-actions { display: flex; gap: 10px; margin: 14px 0 6px; }
.vc-legacy-btn {
  font-family: inherit; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 18px; cursor: pointer; text-decoration: none;
  color: #1a1a1a; background: #d4d0c8;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
.vc-legacy-btn:active { border-color: #808080 #fff #fff #808080; }
.vc-legacy-btn-quiet { color: #333; }

/* The function key row. Purely a period detail: none of them is wired, and a
   screen of this vintage would have had every one of them. */
.vc-legacy-keys {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 10px 10px 0; padding-top: 6px;
  border-top: 1px solid #808080;
  font-size: 11px; color: #333;
}

/* Said in the site's own voice, outside the frame, because the joke needs a
   straight line under it. */
.vc-legacy-aside {
  margin: 18px 2px 0; max-width: 70ch;
  font: 400 13px/1.7 var(--vc-sans, system-ui, sans-serif);
  color: var(--vc-muted, #5a5a5a);
}

@media (max-width: 620px) {
  .vc-legacy-grid { grid-template-columns: 1fr; }
  .vc-legacy-title { display: none; }
}