/* ═══════════════════════════════════════════════════════════════════════════
   INFRASTRUCTURE — the app body. Header / gutter / tokens / tabs come from
   os-app.css (SPEC-APP-STANDARD §2); work-clay.css is the design. Ladder only.
   Colour is STATE and nothing else: ok = mint, attention = amber, critical =
   the violet accent on a warm ground, unmeasured = muted. Every number is mono.
   ⛔ The rules hang off `.osApp[data-app="infra"]` — the app root — so the app
   draws the same wherever the shell mounts it, and never leaks into a sibling.
   ═══════════════════════════════════════════════════════════════════════════ */
body.os.inthread.osAppOpen #osMain .thread,
body.os.inthread.osAppOpen #osMain .composer,
body.os.inthread.osAppOpen #osMain .rhead{visibility:hidden}

.osApp[data-app="infra"] .osAppCard .tabs .n{font:400 11px var(--osMono);color:var(--faint);margin-left:5px}

/* ── the subject row: which domain, what it is, what may be done ─────────── */
.osApp[data-app="infra"] .ifSub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.osApp[data-app="infra"] .ifSub .sel{
  appearance:none;-webkit-appearance:none;padding:7px 30px 7px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;
  color:var(--ink);font:500 13px var(--osDisp);cursor:pointer;min-width:200px}
.osApp[data-app="infra"] .ifSub .sel:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.osApp[data-app="infra"] .ifPill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);font:400 11px var(--osMono);color:var(--muted);background:transparent}
.osApp[data-app="infra"] .ifPill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.osApp[data-app="infra"] .ifPill.ok::before{background:var(--mint)}
.osApp[data-app="infra"] .ifPill.attention::before{background:var(--amber)}
.osApp[data-app="infra"] .ifPill.critical::before{background:var(--violet)}
.osApp[data-app="infra"] .ifPill.ok{color:var(--ink);border-color:color-mix(in srgb,var(--mint) 45%,var(--line))}
.osApp[data-app="infra"] .ifPill.attention{color:var(--ink);border-color:color-mix(in srgb,var(--amber) 55%,var(--line))}
.osApp[data-app="infra"] .ifPill.critical{color:var(--ink);border-color:color-mix(in srgb,var(--violet) 55%,var(--line));background:color-mix(in srgb,var(--violet) 7%,transparent)}
.osApp[data-app="infra"] .ifSub .grow{flex:1 1 auto}
.osApp[data-app="infra"] .btn{
  padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surf);
  color:var(--ink);font:500 12.5px var(--body);cursor:pointer}
.osApp[data-app="infra"] .btn:hover{border-color:var(--line2);background:var(--surf2)}
.osApp[data-app="infra"] .btn.primary{background:var(--violet);border-color:var(--violet);color:#fff}
.osApp[data-app="infra"] .btn.primary:hover{filter:brightness(1.06)}
.osApp[data-app="infra"] .btn:disabled{opacity:.5;cursor:default}
.osApp[data-app="infra"] .btn.ghost{background:transparent;color:var(--muted)}
.osApp[data-app="infra"] .btn.ghost:hover{color:var(--ink)}

/* ── the record table ────────────────────────────────────────────────────── */
.osApp[data-app="infra"] .ifTable{width:100%;border-collapse:separate;border-spacing:0 5px}
.osApp[data-app="infra"] .ifTable th{
  text-align:left;font:500 10.5px var(--osMono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:0 12px 2px}
.osApp[data-app="infra"] .ifTable td{
  padding:9px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;vertical-align:top}
.osApp[data-app="infra"] .ifTable td:first-child{border-left:1px solid var(--line);border-radius:10px 0 0 10px}
.osApp[data-app="infra"] .ifTable td:last-child{border-right:1px solid var(--line);border-radius:0 10px 10px 0}
.osApp[data-app="infra"] .ifTable tr:hover td{background:var(--surf);border-color:var(--line2)}
.osApp[data-app="infra"] .ifTable .n{font:500 13px var(--osDisp);color:var(--ink);word-break:break-all}
.osApp[data-app="infra"] .ifTable .t{font:400 11.5px var(--osMono);color:var(--muted)}
.osApp[data-app="infra"] .ifTable .v{font:400 12px var(--osMono);color:var(--ink);word-break:break-all;white-space:pre-wrap}
.osApp[data-app="infra"] .ifTable .v .more{color:var(--faint)}
.osApp[data-app="infra"] .ifTable .ttl{font:400 11px var(--osMono);color:var(--faint);text-align:right;white-space:nowrap}
.osApp[data-app="infra"] .ifTable .act{text-align:right;white-space:nowrap}
.osApp[data-app="infra"] .ifTable .act .btn{padding:4px 10px;font-size:11.5px;opacity:0;transition:opacity .12s}
.osApp[data-app="infra"] .ifTable tr:hover .act .btn,
.osApp[data-app="infra"] .ifTable .act .btn:focus-visible{opacity:1}
@media (hover:none){.osApp[data-app="infra"] .ifTable .act .btn{opacity:1}}
.osApp[data-app="infra"] .ifTable tr.load td{background:color-mix(in srgb,var(--amber) 6%,transparent)}
.osApp[data-app="infra"] .ifTag{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--amber) 55%,var(--line));
  font:400 10px var(--osMono);color:var(--muted);vertical-align:middle}

/* ── the editor / plan drawer ────────────────────────────────────────────── */
.osApp[data-app="infra"] .ifForm{display:grid;grid-template-columns:140px 110px minmax(0,1fr) 90px;gap:8px;align-items:start;margin:10px 0}
.osApp[data-app="infra"] .ifForm label{display:block;font:400 10.5px var(--osMono);color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin:0 0 4px}
.osApp[data-app="infra"] .ifForm input,.osApp[data-app="infra"] .ifForm select,.osApp[data-app="infra"] .ifForm textarea,
.osApp[data-app="infra"] .ifReason input{
  width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surf);
  color:var(--ink);font:400 12.5px var(--osMono)}
.osApp[data-app="infra"] .ifForm textarea{min-height:64px;resize:vertical}
.osApp[data-app="infra"] .ifForm input:focus,.osApp[data-app="infra"] .ifForm textarea:focus,.osApp[data-app="infra"] .ifReason input:focus{outline:2px solid var(--violet);outline-offset:1px}
@media (max-width:720px){.osApp[data-app="infra"] .ifForm{grid-template-columns:1fr 1fr}}

.osApp[data-app="infra"] .ifPlan{
  margin:12px 0 0;padding:14px 16px;border:1px solid var(--line2);border-radius:12px;background:var(--surf)}
.osApp[data-app="infra"] .ifPlan h4{margin:0 0 8px;font:500 13px var(--osDisp);color:var(--ink)}
.osApp[data-app="infra"] .ifPlan .diff{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font:400 12px var(--osMono)}
.osApp[data-app="infra"] .ifPlan .diff .k{color:var(--faint)}
.osApp[data-app="infra"] .ifPlan .diff .before{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--amber) 60%,transparent)}
.osApp[data-app="infra"] .ifPlan .diff .after{color:var(--ink)}
.osApp[data-app="infra"] .ifPlan .crit{
  margin:10px 0 0;padding:10px 12px;border-radius:9px;border:1px solid color-mix(in srgb,var(--violet) 45%,var(--line));
  background:color-mix(in srgb,var(--violet) 7%,transparent);font:400 12.5px/1.5 var(--body);color:var(--ink)}
.osApp[data-app="infra"] .ifPlan .crit label{display:flex;gap:8px;align-items:flex-start;margin-top:8px;cursor:pointer}
.osApp[data-app="infra"] .ifReason{margin:10px 0 0}
.osApp[data-app="infra"] .ifReason label{display:block;font:400 10.5px var(--osMono);color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin:0 0 4px}
.osApp[data-app="infra"] .ifActs{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.osApp[data-app="infra"] .ifNote{font:400 12px/1.5 var(--body);color:var(--muted);margin:8px 0 0}
.osApp[data-app="infra"] .ifNote b{color:var(--ink);font-weight:500}
.osApp[data-app="infra"] .ifDone{
  margin:12px 0 0;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--mint) 45%,var(--line));
  background:color-mix(in srgb,var(--mint) 8%,transparent);font:400 12.5px/1.5 var(--body);color:var(--ink)}
.osApp[data-app="infra"] .ifDone .ns{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:3px 12px;font:400 11.5px var(--osMono);margin-top:8px}

/* ── the audit ───────────────────────────────────────────────────────────── */
.osApp[data-app="infra"] .ifVerdict{display:flex;align-items:center;gap:14px;margin:0 0 14px;flex-wrap:wrap}
.osApp[data-app="infra"] .ifVerdict .word{font:500 22px/1.1 var(--osDisp);color:var(--ink);text-transform:capitalize}
.osApp[data-app="infra"] .ifVerdict .counts{display:flex;gap:6px;flex-wrap:wrap}
.osApp[data-app="infra"] .ifChecks{display:flex;flex-direction:column;gap:6px}
.osApp[data-app="infra"] .ifCheck{
  display:grid;grid-template-columns:10px 150px minmax(0,1fr);gap:0 12px;align-items:start;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.osApp[data-app="infra"] .ifCheck .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);margin-top:6px}
.osApp[data-app="infra"] .ifCheck.ok .dot{background:var(--mint)}
.osApp[data-app="infra"] .ifCheck.attention .dot{background:var(--amber)}
.osApp[data-app="infra"] .ifCheck.critical .dot{background:var(--violet)}
.osApp[data-app="infra"] .ifCheck.critical{border-color:color-mix(in srgb,var(--violet) 45%,var(--line));background:color-mix(in srgb,var(--violet) 5%,transparent)}
.osApp[data-app="infra"] .ifCheck.attention{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.osApp[data-app="infra"] .ifCheck .id{font:500 12.5px var(--osDisp);color:var(--ink)}
.osApp[data-app="infra"] .ifCheck .lvl{display:block;font:400 10.5px var(--osMono);color:var(--muted);margin-top:2px}
.osApp[data-app="infra"] .ifCheck .msg{font:400 12.5px/1.5 var(--body);color:var(--ink)}
.osApp[data-app="infra"] .ifCheck .det{font:400 11px/1.5 var(--osMono);color:var(--muted);margin-top:4px;white-space:pre-wrap;word-break:break-word}
@media (max-width:600px){.osApp[data-app="infra"] .ifCheck{grid-template-columns:10px minmax(0,1fr)}.osApp[data-app="infra"] .ifCheck .msg{grid-column:2}}

/* ── keys ────────────────────────────────────────────────────────────────── */
.osApp[data-app="infra"] .ifKey{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:0 0 6px}
.osApp[data-app="infra"] .ifKey .p{font:500 12.5px var(--osMono);color:var(--ink)}
.osApp[data-app="infra"] .ifKey .s{font:400 11.5px/1.5 var(--osMono);color:var(--muted)}
.osApp[data-app="infra"] .ifKey.revoked{opacity:.55}
.osApp[data-app="infra"] .ifSecret{
  margin:12px 0 0;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--violet) 45%,var(--line));
  background:color-mix(in srgb,var(--violet) 7%,transparent)}
.osApp[data-app="infra"] .ifSecret .val{
  display:block;margin:8px 0;padding:8px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--surf);
  font:400 12.5px var(--osMono);color:var(--ink);word-break:break-all;user-select:all}

/* ── mail ────────────────────────────────────────────────────────────────── */
.osApp[data-app="infra"] .ifKv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font:400 12.5px var(--osMono);margin:0 0 14px}
.osApp[data-app="infra"] .ifKv .k{color:var(--faint)}
.osApp[data-app="infra"] .ifKv .v{color:var(--ink)}

/* ── the domains list (home) ─────────────────────────────────────────────── */
.osApp[data-app="infra"] .ifDom{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:11px 14px;border:1px solid var(--line);border-radius:10px;margin:0 0 6px;cursor:pointer;background:transparent}
.osApp[data-app="infra"] .ifDom:hover{background:var(--surf);border-color:var(--line2)}
.osApp[data-app="infra"] .ifDom .d{font:500 14px var(--osDisp);color:var(--ink)}
.osApp[data-app="infra"] .ifDom .s{display:block;font:400 11.5px var(--osMono);color:var(--muted);margin-top:2px}
/* ⛔ The add field is the SHARED `.osAppBar` (os-app.css). The only thing this
   app adds is the space above it, because here the bar sits BELOW the list
   rather than above it — a domain is added after you have looked at the ones
   you have. */
.osApp[data-app="infra"] .osAppBar{padding:14px 0 0}
.osApp[data-app="infra"] .ifChallenge{
  margin:12px 0 0;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--surf);font:400 12.5px/1.5 var(--body);color:var(--ink)}
.osApp[data-app="infra"] .ifChallenge code{display:block;margin:6px 0;padding:6px 10px;border-radius:8px;background:var(--surf2);font:400 12px var(--osMono);word-break:break-all;user-select:all}

/* ── the plan card inside a conversation (chat) ──────────────────────────── */
.ifCard{
  margin:8px 0;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--surf);font:400 12.5px/1.5 var(--body);color:var(--ink)}
.ifCard .h{display:flex;align-items:center;gap:8px;font:500 13px var(--osDisp);margin:0 0 6px}
.ifCard .h img{width:22px;height:22px}
.ifCard .diff{font:400 12px var(--osMono);color:var(--muted);white-space:pre-wrap;word-break:break-all}
.ifCard .btn{margin-top:8px;padding:6px 12px;border:1px solid var(--violet);border-radius:999px;background:var(--violet);color:#fff;font:500 12px var(--body);cursor:pointer}

/* ── the people on a domain's mail (task f818c5c2) ───────────────────────────
   ⛔ THREE CHIPS, NEVER ONE DOT. Reading, sending and receiving fail
      independently — every aba.lv mailbox reads perfectly and none can send —
      so each capability carries its own word and its own colour, and the row's
      dot is only the worst of them.
   ⛔ `unmeasured` is drawn as its own thing and NEVER borrows the ok colour: it
      means we could not ask, which is not a clean bill. */
.osApp[data-app="infra"] .ifCap{
  display:inline-block;margin:0 6px 4px 0;padding:2px 7px;border-radius:999px;
  font:500 10.5px/1.4 var(--osMono);white-space:nowrap;
  border:1px solid var(--line);color:var(--muted);background:transparent;
}
.osApp[data-app="infra"] .ifCap.ok{
  border-color:color-mix(in srgb,var(--mint) 50%,var(--line));
  background:color-mix(in srgb,var(--mint) 12%,transparent);color:var(--ink);
}
.osApp[data-app="infra"] .ifCap.attention{
  border-color:color-mix(in srgb,var(--amber) 55%,var(--line));
  background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--ink);
}
.osApp[data-app="infra"] .ifCap.critical{
  border-color:color-mix(in srgb,var(--violet) 55%,var(--line));
  background:color-mix(in srgb,var(--violet) 10%,transparent);color:var(--ink);
}
/* ⚠ Deliberately the flattest of the four — an unasked question should read as
   quiet, not as a warning and not as a pass. */
.osApp[data-app="infra"] .ifCap.unmeasured{border-style:dashed;color:var(--muted)}

/* What the MIRROR holds, with the date of the last letter beside it so a stale
   mirror can never read as a quiet mailbox. */
.osApp[data-app="infra"] .ifHeld{
  display:block;margin-top:3px;font:400 11px/1.5 var(--osMono);color:var(--muted);
}
/* The sentence that explains a silence. It is prose, not a verdict, and it sits
   under the chips rather than replacing one. */
.osApp[data-app="infra"] .ifWhy{
  display:block;margin-top:6px;padding:6px 8px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--amber) 40%,var(--line));
  background:color-mix(in srgb,var(--amber) 7%,transparent);
  font:400 11.5px/1.55 var(--body);color:var(--ink);
}

/* ── the technical mail list (task f818c5c2) ─────────────────────────────────
   ⛔ Rows, not cards. These are letters in a list; giving each one a border, a
      radius and a shadow would say "separate object" thirteen times and flatten
      the one thing that matters — which KIND each is. */
.osApp[data-app="infra"] .ifMl{display:flex;flex-direction:column;gap:2px}
.osApp[data-app="infra"] .ifMlRow{
  display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:6px 14px;align-items:baseline;
  padding:8px 12px;border-radius:9px}
.osApp[data-app="infra"] .ifMlRow:nth-child(odd){background:var(--surf)}
.osApp[data-app="infra"] .ifMlRow .k{display:block;font:500 12px var(--osDisp);color:var(--ink)}
.osApp[data-app="infra"] .ifMlRow .f{display:block;font:400 10.5px var(--osMono);color:var(--faint);
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osApp[data-app="infra"] .ifMlRow .s{font:400 12.5px/1.4 var(--body);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osApp[data-app="infra"] .ifMlRow .d{font:400 11px var(--osMono);color:var(--faint);white-space:nowrap}
@media (max-width:640px){
  .osApp[data-app="infra"] .ifMlRow{grid-template-columns:minmax(0,1fr) auto}
  .osApp[data-app="infra"] .ifMlRow .s{grid-column:1/-1;white-space:normal}
}
/* The count beside a heading — the number is the point, so it is mono and
   quiet rather than a badge competing with the words. */
.osApp[data-app="infra"] .ifCount{font:400 11.5px var(--osMono);color:var(--faint);margin-left:6px}