/*
 * KrishiAI — the official's console.
 *
 * Light, neutral and dense: the reading a bank's own software gives.
 *
 * This replaced a dark forest-green ground. The green was distinctive and it
 * read as a demonstration -- a product bought by a compliance function sits
 * next to core banking, and those are light, quiet and unbranded. The density
 * stays, because the person using this does it all day and needs many things
 * visible at once.
 *
 * Colour carries meaning here and nothing else. The accent is a single steel
 * navy used for actions; the four status colours are the provenance vocabulary
 * and are the only other hues on the page. Anything decorative is a hairline.
 *
 * Video keeps a dark well behind it, deliberately: a bright frame around a
 * video call flares on a face lit from one side.
 *
 * No web font is fetched. The CSP is default-src 'self' and this build makes no
 * outbound call, so the stack has to be fonts that already exist on the machine.
 */

:root {
  --ground:   #F5F7F8;
  --panel:    #FFFFFF;
  --panel-2:  #EEF1F4;
  --rule:     #DFE4E9;
  --rule-lit: #C2CAD2;

  --ink:      #16202A;
  --dim:      #5C6B77;

  --brand:    #17518A;
  --brand-dim:#0F3A66;
  --teal:     #1F6E7D;

  --good:     #17703F;
  --bad:      #A8431C;
  --absent:   #4E45A0;
  --amber:    #8A5A12;

  /* Text on a brand-filled control, and the four status tints. Tokenised
     because the previous palette hard-coded them at the point of use, which is
     why changing the ground meant hunting a dozen literals. */
  --on-brand: #FFFFFF;
  --tint-good:#E8F3EC;
  --tint-bad: #FBEDE6;
  --tint-abs: #EDECF8;
  --tint-lim: #FAF2E2;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans:  ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  /* A single wash from the top-left, so the page has a light source rather
     than being an evenly lit slab. */
  background-image:
    radial-gradient(90% 55% at 12% -8%, rgba(23,81,138,.055), transparent 62%);
  background-repeat: no-repeat;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 24px 22px 80px; }

a { color: var(--brand); }

/* ------------------------------------------------------------- masthead */

.brandbar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.brandbar img { width: 26px; height: 27px; display: block; }
.brandbar .name {
  font-family: var(--serif); font-size: 17px; letter-spacing: -.01em;
  color: var(--ink);
}
.brandbar .name b { color: var(--brand); font-weight: 400; }
.brandbar .role {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}

/* ----------------------------------------------------------------- type */

h1 {
  font-size: 30px; font-weight: 400; margin: 0 0 8px;
  letter-spacing: -.015em; color: var(--ink);
}
h2 {
  font-size: 14px; font-weight: 400; letter-spacing: .02em;
  margin: 32px 0 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
}
h2 span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand); margin-right: 10px;
}
.eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 12px;
}
/* An identifier, shown as it actually is.
   The session id is case-sensitive and /join/<id> is the customer's whole
   credential, so a style that folds its case turns a displayed id into one that
   cannot be read back. Any element carrying an identifier wears this, and it
   overrides whatever the surrounding block does to its text. */
.idtext {
  text-transform: none; letter-spacing: .04em;
  font-family: var(--mono); user-select: all;
}

p.lead { color: var(--dim); max-width: 64ch; }
.mono { font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* ---------------------------------------------------------------- panel */

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 12px 0;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 16px; }
th {
  text-align: left; font-weight: 400; font-family: var(--mono);
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim); padding: 6px 8px; border-bottom: 1px solid var(--rule);
}
td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }

/* ---------------------------------------------------------------- pills */

.pill {
  display: inline-block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px; border: 1px solid;
  white-space: nowrap;
}
.p-ok  { color: var(--good);   border-color: #A8CDB6; background: var(--tint-good); }
.p-bad { color: var(--bad);    border-color: #E0B49F; background: var(--tint-bad); }
.p-abs { color: var(--absent); border-color: #B4AEE0; background: var(--tint-abs); }
.p-na  { color: var(--dim);    border-color: var(--rule); background: transparent; }
/* A flow that runs but carries a stated limit. Deliberately NOT `.p-bad`: a
   declared limit is not a failure, and colouring it like one would push a
   reader towards the two-state reading the flows table exists to avoid. */
.p-lim { color: var(--amber); border-color: #DCC08A; background: var(--tint-lim); }

/* --------------------------------------------------------------- inputs */

input, select, textarea {
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--rule-lit); border-radius: 3px;
  padding: 8px 10px; font-family: var(--mono); font-size: 12px; width: 100%;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* A tick box is a control, not a field. The rule above is right for text entry
   and wrong for these: a checkbox stretched to the full cell width and pushed
   its own label onto the following line, which made the role picker read as a
   column of unlabelled boxes. */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; margin: 0 7px 0 0; vertical-align: middle;
}
label.inline {
  display: inline-flex; align-items: center; margin: 0 16px 7px 0;
  font-size: 11px; letter-spacing: .04em; text-transform: none;
  color: var(--ink); cursor: pointer;
}
.rolelist { display: flex; flex-wrap: wrap; margin-bottom: 4px; }
.rolelist.stack { flex-direction: column; }
.rownote {
  display: block; font-family: var(--mono); font-size: 10px;
  color: var(--dim); margin-top: 7px;
}
.inlineform { display: inline-block; margin: 0 7px 7px 0; vertical-align: top; }
.inlineform input { width: 148px; display: inline-block; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(23,81,138,.14);
}
textarea { min-height: 70px; resize: vertical; }
label {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  margin: 10px 0 4px;
}

button {
  background: var(--brand); color: var(--on-brand); border: 0; border-radius: 3px;
  padding: 9px 17px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}
button:hover { background: var(--brand-dim); }
button:active { transform: translateY(1px); }
button:disabled { background: #DCE1E6; color: #97A2AB; cursor: default; }
button.ghost {
  background: transparent; color: var(--brand);
  border: 1px solid var(--rule-lit);
}
button.ghost:hover { background: rgba(23,81,138,.06); }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 220px; }

/* --------------------------------------------------------------- blocks */

.warn { border-left: 3px solid var(--bad);    background: var(--tint-bad);  padding: 12px 15px; margin: 14px 0; }
.note { border-left: 3px solid var(--absent); background: var(--tint-abs);  padding: 12px 15px; margin: 14px 0; }
.good { border-left: 3px solid var(--good);   background: var(--tint-good); padding: 12px 15px; margin: 14px 0; }

footer {
  margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--rule);
  color: var(--dim); font-size: 12.5px;
}
.scroll { overflow-x: auto; }

video { background: #0C1319; }   /* stays dark; see the header */

/* Who is signed in. Sits at the right of the brand bar, quiet until needed. */
.brandbar .who {
  display: flex; align-items: baseline; gap: 9px;
  margin-left: 14px; padding-left: 14px;
  border-left: 1px solid var(--rule);
  font-size: 12.5px; color: var(--dim);
}
.brandbar .who b { color: var(--ink); font-weight: 400; }
.brandbar .who .mono { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
.brandbar .who a { font-size: 11px; }

/* ------------------------------------------------------------- handheld */
/*
 * The officer's console was built for a desk and had no media query at all.
 * It needs one because two-leg recording means the OFFICIAL now has to be on a
 * camera too, and in a two-phone test that camera is a phone.
 *
 * The `.row` flex already wraps at min-width 220px, so the video pair stacks on
 * its own. What follows is everything that does not fix itself.
 */
@media (max-width: 640px) {

  /* THE important one.
   *
   * iOS Safari zooms the whole page when a focused input has a font-size below
   * 16px, and does not zoom back out afterwards. At 12px every tap on the OTP
   * field or the share code would jerk the layout sideways mid-session, and an
   * official fighting the viewport in front of a customer is the worst possible
   * moment to discover it. 16px is the threshold, not a preference. */
  input, select, textarea { font-size: 16px; padding: 11px 12px; }

  /* Tap targets. 32px high buttons sitting side by side -- accept/reject the
   * answer, start/stop/verify the recording -- are a mis-tap waiting to happen,
   * and "answer not accepted" is not a click to make by accident. */
  button {
    min-height: 44px; font-size: 12px; padding: 12px 18px;
    width: 100%; margin: 0 0 8px;
  }
  /* Except where two buttons genuinely belong on one line. */
  .row button { width: auto; flex: 1; }

  /* The masthead carries a mark, a name, a role, three nav links, a display
   * name, a role list and a sign-out. On a phone that overflows sideways. */
  .brandbar { flex-wrap: wrap; gap: 8px; }
  .brandbar .role { margin-left: 0; width: 100%; order: 3; }
  .brandbar .who { width: 100%; order: 4; display: flex; flex-wrap: wrap; gap: 10px; }

  /* 44px of the viewport spent on gutters is a lot when there are only 375. */
  .wrap { padding: 16px 13px 64px; }

  /* Hash chains and case tables are wider than a phone. Let them scroll
   * inside their own box rather than widening the page and putting every
   * control off-screen to the right. */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .mono { word-break: break-word; }

  /* A 180px video is too small to judge a face on. */
  video { min-height: 240px !important; }

  h1 { font-size: 24px; }
}