/* web/job-info.css - E-53f, the Job info block and the place picker.
   Every colour, size and gap is a web/tokens.css token (DEVICES-sunlight-
   contrast.md R3/R5/R6): text on the black ground with a silver outline, no
   blue-filled button, nothing under --fs-min, every target at least --tap
   high with --tap-gap between. This file declares no colour value of its
   own. */

.ji-host { margin: var(--sp-3) 0; }
.ji-host[hidden] { display: none !important; }

.ji-static, .ji-layer {
  border-top: var(--bw-rule) solid var(--c-rule);
  padding-top: var(--sp-2);
  margin-top: var(--sp-3);
}

.ji-head {
  font-family: var(--font-ui);
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  color: var(--c-text);
  margin: 0 0 var(--sp-2);
}

.ji-dl { margin: 0; }
.ji-dl dt {
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text-2);
  margin-top: var(--sp-1);
}
.ji-dl dd {
  font-size: var(--fs-body);
  color: var(--c-text);
  margin: 0 0 var(--sp-1);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

.ji-attrib {
  font-size: var(--fs-min);
  color: var(--c-text-2);
  line-height: var(--lh-tight);
  margin-top: var(--sp-3);
  overflow-wrap: anywhere;
}

.ji-muted, .ji-origin, .ji-consent, .ji-said {
  font-size: var(--fs-min);
  color: var(--c-text-2);
  line-height: var(--lh-body);
}

/* An office pick the phone's list does not have: the inverse alert block. */
.ji-warn {
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  font-size: var(--fs-body);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
}

.ji-card {
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-2);
  margin: var(--sp-2) 0;
}
.ji-tag {
  font-size: var(--fs-min);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--sp-1);
}
.ji-name {
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  color: var(--c-text);
  margin: 0 0 var(--sp-1);
}
.ji-line, .ji-mi {
  font-size: var(--fs-body);
  color: var(--c-text);
  margin: 0 0 var(--sp-1);
  line-height: var(--lh-body);
}
.ji-mi { font-weight: var(--fw-label); }

.ji-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tap-gap);
  margin-top: var(--sp-2);
}

/* Gloves: every link and button is a real target, not a word. */
.ji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text);
  background: var(--c-bg);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  text-decoration: none;
  box-sizing: border-box;
}
.ji-btn:focus-visible {
  outline: var(--bw-focus) solid var(--c-accent);
  outline-offset: 2px;
}

/* The one big tap on each list. */
.ji-find {
  width: 100%;
  min-height: var(--tap-primary);
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  margin: var(--sp-1) 0;
}

.ji-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text);
  margin-top: var(--sp-3);
}
.ji-select {
  width: 100%;
  min-height: var(--tap);
  font-size: var(--fs-body);
  color: var(--c-text);
  background: var(--c-bg);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  margin-top: var(--sp-1);
}

/* E-81 weather at the job (web/weather.js fills .ji-weather). Tokens only.
   The flag lines are information (ADR 0009 W8): drawn in the alert band so
   they are read in glare, never styled as a stop or a pass. */
.ji-weather:empty, .ji-bridges:empty { display: none; }
.ji-weather-box {
  border-top: var(--bw-rule) solid var(--c-rule);
  padding-top: var(--sp-2);
  margin-top: var(--sp-3);
}
.ji-weather-flags { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.ji-weather-flag {
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-label);
  line-height: var(--lh-body);
  padding: var(--sp-1) var(--sp-2);
  margin: 0 0 var(--sp-1);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.ji-weather-old {
  font-size: var(--fs-body);
  font-weight: var(--fw-label);
  color: var(--c-text);
  margin: 0 0 var(--sp-2);
}
.ji-weather-now, .ji-weather-hour {
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: var(--lh-body);
  margin: 0 0 var(--sp-1);
  overflow-wrap: anywhere;
}
.ji-weather-now { font-weight: var(--fw-label); }
.ji-weather-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text-2);
  margin: var(--sp-2) 0 var(--sp-1);
}