/* ============================================================
   Page-specific layout
   ============================================================ */

/* -- overview --------------------------------------------------- */

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: var(--s4);
  align-items: start;
  margin-top: var(--s4);
}
@media (max-width: 1100px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
}

/* the expiry board: one row per cert, rail in the middle */
.expiry-board {
  padding: var(--s1) 0;
}
.expiry-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 2fr) 76px 84px;
  gap: var(--s3);
  align-items: center;
  padding: 6px var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.expiry-row:last-child { border-bottom: 0; }
.expiry-row:hover { background: var(--surface-3); }
.expiry-row .dom {
  font-family: var(--mono);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expiry-row a.dom:hover { text-decoration: underline; }
.expiry-scale {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 2fr) 76px 84px;
  gap: var(--s3);
  padding: var(--s1) var(--s3) var(--s2);
  font-size: var(--fs-micro);
  color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
}
.expiry-scale .ticks {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 720px) {
  .expiry-row, .expiry-scale {
    grid-template-columns: minmax(110px, 1fr) minmax(90px, 1.5fr);
    row-gap: var(--s1);
  }
  .expiry-row .col-hidden { display: none; }
  .expiry-scale .col-hidden { display: none; }
}

/* -- activity feed list ----------------------------------------- */

.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}
.feed li {
  display: flex;
  gap: var(--s2);
  padding: 6px var(--s3);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.feed li:last-child { border-bottom: 0; }
.feed .t {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--faint);
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 58px;
}
.feed .what {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed .what .who { color: var(--muted); }
.feed .what .obj {
  font-family: var(--mono);
  color: var(--text-strong);
}

/* -- finding rows ------------------------------------------------ */

.finding-item {
  display: grid;
  grid-template-columns: 64px minmax(130px, 1fr) minmax(0, 2fr) auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.finding-item:last-child { border-bottom: 0; }
.finding-item:hover { background: var(--surface-3); }
.finding-item .f-kind {
  font-family: var(--mono);
  color: var(--text);
  font-size: var(--fs-sm);
}
.finding-item .f-target {
  font-family: var(--mono);
  color: var(--text-strong);
}
.finding-item .f-detail {
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}
.finding-item .f-actions {
  display: flex;
  gap: var(--s1);
  justify-content: flex-end;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .finding-item {
    grid-template-columns: 60px minmax(0, 1fr) auto;
  }
  .finding-item .f-detail { display: none; }
}

.sev-group-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .04em;
}

/* -- filter bar -------------------------------------------------- */

.filters {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.filters .search {
  min-width: 180px;
  max-width: 280px;
}
.filters select { width: auto; min-width: 108px; }
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s3);
}
.tabs a {
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.tabs a.on { color: var(--text-strong); border-bottom-color: var(--brand); }
.tabs a .count {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--faint);
  margin-left: var(--s1);
}

/* -- detail page sections ---------------------------------------- */

.detail-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s4);
}
.detail-head .id-block { flex: 1; min-width: 260px; }
.detail-head .id-name {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-strong);
  word-break: break-all;
}
.detail-head .id-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.detail-head .id-life {
  min-width: 260px;
  max-width: 380px;
  flex: 1;
}

.section { margin-top: var(--s5); }
.section > h2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}
.section > h2 .spacer { flex: 1; }
.section > h2 .tag { text-transform: none; letter-spacing: 0; }

/* -- issue form (collapsible) ------------------------------------ */

.issue-panel {
  margin-top: var(--s4);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
}
.issue-panel summary {
  padding: var(--s3) var(--s4);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.issue-panel summary::-webkit-details-marker { display: none; }
.issue-panel summary::before {
  content: "+";
  font-family: var(--mono);
  color: var(--faint);
  width: 12px;
}
.issue-panel[open] summary::before { content: "−"; }
.issue-panel summary:hover { background: var(--surface-2); }
.issue-panel .issue-body {
  padding: 0 var(--s4) var(--s4);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}
.issue-panel .summary-line {
  margin-top: var(--s3);
  font-size: var(--fs-sm);
  color: var(--muted);
  font-family: var(--mono);
}

/* -- run log drawer ---------------------------------------------- */

details.tx {
  border-bottom: 1px solid var(--line);
}
details.tx > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 6px var(--s3);
  font-size: var(--fs-sm);
  cursor: pointer;
  list-style: none;
}
details.tx > summary::-webkit-details-marker { display: none; }
details.tx > summary:hover { background: var(--surface-3); }
details.tx .tx-body {
  padding: var(--s2) var(--s3) var(--s3) var(--s5);
  font-size: var(--fs-sm);
  color: var(--muted);
}
details.tx .tx-body ul { margin: 0; padding-left: var(--s4); font-family: var(--mono); }

pre.log {
  margin: 0;
  padding: var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  overflow: auto;
  max-height: 60vh;
  white-space: pre-wrap;
  word-break: break-word;
}

/* -- 404 --------------------------------------------------------- */

.not-found {
  max-width: 460px;
  margin: 12vh auto;
  text-align: center;
}
.not-found .nf-code {
  font-family: var(--mono);
  font-size: 48px;
  font-weight: 700;
  color: var(--line-strong);
  line-height: 1;
}
.not-found p { margin-top: var(--s3); color: var(--muted); }

/* -- inline guide block ------------------------------------------
   Used where a prerequisite cannot be inferred from the form itself
   (wildcard certificates needing DNS).  Collapsed by default so it does
   not push the actual work below the fold, but the summary line already
   carries the state the operator needs. */

.guide {
  margin-bottom: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface-1);
}
.guide > summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--muted);
  list-style: none;
}
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--faint);
  transition: transform .12s ease;
}
.guide[open] > summary::before { transform: rotate(90deg); }
.guide > summary:hover { color: var(--text); }
.guide-title { font-weight: 600; color: var(--text); }
.guide-body {
  padding: 0 var(--s3) var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin: var(--s3) 0;
}
@media (max-width: 760px) {
  .guide-grid { grid-template-columns: 1fr; gap: var(--s3); }
}
.guide-h {
  margin: var(--s3) 0 var(--s1);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}
.guide-body > .guide-h:first-child,
.guide-grid > div > .guide-h:first-child { margin-top: 0; }
.guide-body p { margin: 0 0 var(--s2); color: var(--muted); }
.guide-body ul { margin: 0 0 var(--s2); padding-left: 1.2em; color: var(--muted); }
.guide-body code {
  font-family: var(--mono);
  font-size: .92em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text);
}
.guide-code {
  margin: var(--s2) 0;
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

/* Readiness banner on the DNS settings panel: confirms the feature is usable,
   not just configured.  Green because it is an assurance, not a warning. */
.dns-ready {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--ok-wash);
  border-left: 2px solid var(--ok);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
}
.dns-status {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border-radius: var(--r-ctl);
}
.dns-field-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
}
.dns-field-name { min-width: 130px; color: var(--text); }
.dns-field-label { flex: 1; color: var(--muted); }

/* -- alternate-domain rows in the issue form ---------------------
   One input per name instead of a comma-separated box: each row can be
   removed on its own, and the zone hint tells the operator whether the names
   they are grouping actually belong together. */

.alt-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s1);
}
.alt-row {
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.alt-row input {
  flex: 1;
  min-width: 0;
  max-width: 320px;
  padding: 4px var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
}
.alt-row input:focus {
  outline: none;
  border-color: var(--line-focus);
  box-shadow: 0 0 0 2px var(--info-wash);
}
.alt-row input.invalid {
  border-color: var(--err);
  background: var(--err-wash);
}
/* Zone chip next to each row: quiet when it matches the primary, amber when it
   does not, because a cross-zone request is the risky case. */
.alt-zone {
  min-width: 96px;
  font-size: var(--fs-micro);
  color: var(--faint);
  white-space: nowrap;
}
.alt-zone.diff-zone { color: var(--warn); font-weight: 600; }
.alt-del {
  flex: 0 0 auto;
  padding: 0 var(--s2);
  font-size: 14px;
  line-height: 1;
  color: var(--faint);
}
.alt-del:hover { color: var(--err); border-color: var(--err-dim); background: var(--err-wash); }