/* NOTE, 2026-08-09: every `--step--2` in this file has been changed to
   `--step--1`. The scale defined in assets/css/styles.css runs --step--1 to
   --step-5 and has no -2, so CSS dropped all seven declarations and the badges,
   timestamps and labels on the owner dashboard rendered at inherited body size
   — uppercase and letterspaced at full size, which reads as headings rather
   than annotations. Nobody saw it because a dropped declaration renders, it
   just renders wrong.

   --step--1 rather than a new step, deliberately: app/css/tokens.css is
   GENERATED from the marketing stylesheet and adding a smaller step would mean
   editing assets/css/styles.css, which belongs to the design track. The shared
   scale is the ruling; this file follows it.

   Found by tools/app-tokens.mjs, once it started checking that every var()
   reference resolves — which it did not do for the whole life of this file. */

/* ==========================================================================
   DZT OWNER DASHBOARD

   Loaded after office.css, which it borrows the card, tally and table shapes
   from. Only the things this screen needs that the office one does not.

   THE COLOUR IS THE URGENCY AND THE WORDS ARE TOO. A row that has passed says
   "7 days ago" as well as being warm — a screen read through polarised safety
   glasses, or by somebody with a colour deficiency, cannot depend on a hue to
   carry "this right is already gone".
   ========================================================================== */

.own-h3 {
  margin: 1.6rem 0 0.35rem;
  font-family: var(--display);
  font-size: var(--step-0);
  letter-spacing: -0.005em;
}

/* Urgency bands. Warm for gone, warm-bright for close, quiet for the rest —
   and every one of them still prints the day count. */
#own-lien-body tr.is-passed td.strong   { color: #F0A08A; }
#own-lien-body tr.is-critical td.strong { color: #E8A87C; }
#own-lien-body tr.is-soon td.strong     { color: var(--app-text); }
#own-lien-body tr.is-ok td.strong       { color: var(--app-mute); }

/* A passed row is marked structurally as well, so it survives a screenshot in
   greyscale and a printout. */
#own-lien-body tr.is-passed  { background: rgba(196, 112, 58, 0.10); }
#own-lien-body tr.is-critical { background: rgba(196, 112, 58, 0.05); }

.ofc-table td.quiet { color: var(--app-mute); font-weight: 600; }
.ofc-table td.strong { font-weight: 750; }

/* The jobs nobody can date. Dashed, because it is a gap in the record rather
   than a deadline — a different KIND of problem from the table above. */
.own-undated { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.own-undated li {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px dashed rgba(196, 112, 58, 0.45);
}

.own-undated b { font-size: var(--step-0); }
.own-undated span { color: var(--app-mute); font-size: var(--step--1); font-weight: 600; }

/* ==========================================================================
   THE LEARNED-ANSWER QUEUE

   The one screen in this application where reading carefully matters more than
   scanning quickly. Everywhere else the job is to find the row that needs
   attention; here the job is to READ ONE PARAGRAPH PROPERLY and decide whether
   this company is willing to say it in public. So this section is deliberately
   slower than the rest of the dashboard: full text, comfortable measure, no
   truncation, and the two actions far enough apart to not be mis-tapped with a
   thumb.
   ========================================================================== */

.own-queue { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.85rem; }

.own-q {
  border: 1px solid var(--app-line);
  border-radius: 10px;
  padding: 0.9rem 1rem 0.8rem;
  background: var(--app-raised);
  /* The pending ones carry a left edge; the decided ones do not. Position as
     well as colour, so the distinction survives a colour deficiency and a
     screen in direct sun. */
  border-left-width: 1px;
}
.own-q--pending { border-left: 3px solid var(--app-accent); }

.own-q__head {
  display: flex; align-items: baseline; gap: 0.6rem;
  flex-wrap: wrap; margin-bottom: 0.45rem;
}
.own-q__tag {
  font-size: var(--step--1); font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--app-mute);
}
.own-q--pending .own-q__tag { color: var(--app-accent); }
.own-q__when { font-size: var(--step--1); color: var(--app-mute); }

.own-q__q {
  margin: 0 0 0.35rem; font-weight: 650; font-size: var(--step-0);
  color: var(--app-text);
}
/* A comfortable measure, and the FULL answer. A reviewer approving a paragraph
   they can only see the first line of is not reviewing it. */
.own-q__a {
  margin: 0 0 0.75rem; max-width: 68ch;
  font-size: var(--step--1); line-height: 1.65; color: var(--app-mute);
}

.own-q__do { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.own-q__btn {
  min-height: 44px;              /* a thumb, in a glove */
  padding: 0 1rem;
  border-radius: 8px;
  border: 1px solid var(--app-line);
  background: transparent;
  color: var(--app-text);
  font: 700 var(--step--1)/1 var(--display, inherit);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.own-q__btn:disabled { opacity: 0.5; cursor: default; }
.own-q__btn.is-yes { border-color: var(--app-accent); color: var(--app-accent); }
.own-q__msg {
  margin: 0.5rem 0 0; min-height: 1.2em;
  font-size: var(--step--1); color: var(--app-mute);
}

/* ==========================================================================
   CERTIFICATIONS

   Two visual weights only: this stops a truck, or it does not. Everything
   inside "does not" is ordered by the view and needs no further colour — a
   screen with five urgency shades is one nobody reads the shades of.
   ========================================================================== */
.own-creds { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.own-cred {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  grid-template-areas: "tag what when" "tag who when";
  gap: 0.1rem 0.7rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-raised);
}
.own-cred--stop { border-left: 3px solid #E8A87C; }
.own-cred__tag {
  grid-area: tag;
  font-size: var(--step--1); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--app-mute);
  align-self: center;
}
.own-cred--stop .own-cred__tag { color: #E8A87C; }
.own-cred b  { grid-area: what; font-size: var(--step--1); color: var(--app-text); }
.own-cred__who { grid-area: who; font-size: var(--step--1); color: var(--app-mute); }
.own-cred em { grid-area: when; font-style: normal; font-size: var(--step--1); color: var(--app-mute); }

@media (max-width: 560px) {
  /* Stacked on a phone: the three columns collapse rather than compressing the
     label to two words. */
  .own-cred { grid-template-columns: 1fr; grid-template-areas: "tag" "what" "who" "when"; gap: 0.15rem; }
}

/* ==========================================================================
   CONTRACT VALUE

   Three figures with visible arithmetic between them. A single total hides
   which half of it the customer has agreed to, and that is the half that
   matters when a change order is disputed.
   ========================================================================== */
.own-value {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.9rem 1.4rem;
  margin: 0.7rem 0 0.8rem;
}
.own-value dt {
  font-size: var(--step--1); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--app-mute); margin-bottom: 0.15rem;
}
.own-value dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  color: var(--app-text);
}
/* Warm, not red: unsigned change orders are a thing to chase this week, not a
   fault. The same tone the outbox uses for a parked entry. */
#own-value-pending.is-warn { color: #E8A87C; }