/* ==========================================================================
   Client portal pages — page-specific styles only.
   Everything structural (shell, card, dl, tabs, chips, buttons, timeline,
   notices, provenance labels) lives in /assets/app.css. Nothing here
   redefines a shared component; these rules only lay out the few
   arrangements the Connect-domain page needs and app.css does not carry.

   No @import, no font fetch, no URL of any kind.
   ========================================================================== */

/* The address row under the page title — the platform hostname the observed
   product links out to, with its external-link icon. */
.envrow { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.addr-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--ink-2); text-decoration: none;
}
.addr-link:hover { color: var(--ink); text-decoration: underline; }
.addr-link svg { width: 12px; height: 12px; stroke-width: 1.5; }

/* Card 1 puts the records on the left and the "leave these alone" list
   beside them. One column on narrow viewports. */
.records-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--s-5);
  align-items: start;
}
@media (max-width: 760px) { .records-layout { grid-template-columns: 1fr; } }

/* One record the customer has to add: a labelled block, not a table row. */
.record-block { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-4); background: var(--surface); }
.record-block + .record-block { margin-top: var(--s-4); }
.record-block__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.record-block__kind { font-size: var(--fs-body); font-weight: var(--fw-med); color: var(--ink-heading); }
.record-block__note { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); }
.record-block--secondary { background: var(--surface-alt); }

/* The aside naming what carries mail. */
.leave-alone { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-4); background: var(--surface-alt); }
.leave-alone h3 { font-size: var(--fs-sub); line-height: var(--lh-sub); margin-bottom: var(--s-3); }
.leave-alone ul { list-style: none; padding: 0; margin: 0 0 var(--s-3); }
.leave-alone li { font-size: var(--fs-small); line-height: var(--lh-small); padding-left: var(--s-4); position: relative; margin-bottom: var(--s-3); }
.leave-alone li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }
.leave-alone .kind { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); }

/* A sentence inside an observed card that this proposal rewrote. It carries
   its own data-basis="proposed" so the study-bar outline lands on the changed
   words, not on the whole card. */
.reframe { margin: var(--s-3) 0 var(--s-4); }
.reframe p + p { margin-top: var(--s-2); }

/* Quiet aside line — the observed propagation note. */
.aside-note { margin-top: var(--s-4); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }

/* The attestation row. */
.attest { display: flex; gap: var(--s-3); align-items: flex-start; }
.attest input { margin: 2px 0 0; accent-color: var(--brand); flex: 0 0 auto; }
.attest__title { font-size: var(--fs-body); color: var(--ink); }

/* Grouped rows inside the status view. */
.kv-group + .kv-group { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.kv-group__title { font-size: var(--fs-meta); font-weight: var(--fw-med); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-2); }
.kv-group__lede { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); margin-bottom: var(--s-3); }

/* Status header: the state chip sits opposite the card title. */
.conn-state { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.conn-ref { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-3); }

/* A numbered list of what to do next, used on the needs-attention screen. */
.todo { list-style: none; counter-reset: todo; padding: 0; margin: var(--s-3) 0 0; }
.todo li { counter-increment: todo; position: relative; padding-left: var(--s-6); font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--s-3); }
.todo li::before {
  content: counter(todo); position: absolute; left: 0; top: 1px;
  width: 15px; height: 15px; border-radius: var(--r-pill);
  background: var(--warn); color: #fff;
  font-size: 9px; font-weight: var(--fw-bold); display: grid; place-items: center;
}
.hidden { display: none !important; }