/* ============================================================
   Awall surface stylesheet: guardrail.css
   Split from styles.css (F1, issue #186) — NO rule changes.
   Owns: guardrail cards (S4)
   Concatenating every surfaces/*.css in base.html <link> order
   reproduces the original styles.css byte-for-byte.
   ============================================================ */
.guardrails-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.guardrails-header-row .page-controls {
  margin-left: auto;
}

.guardrail-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.guardrail-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition-base),
              transform var(--transition-base),
              border-color var(--transition-base);
}

.guardrail-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--color-primary-ring);
}

.guardrail-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.guardrail-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-card);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guardrail-card-icon svg {
  width: 22px;
  height: 22px;
}

.guardrail-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.guardrail-card-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-heading);
  line-height: 1.2;
}

.guardrail-card-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1px var(--space-2);
  border-radius: var(--radius-tag);
  font-family: var(--font-mono);
  align-self: flex-start;
}

.guardrail-card-desc-wrap {
  position: relative;
}

.guardrail-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(1.6em * 2);
}

.guardrail-card-desc-more {
  display: inline-block;
  visibility: hidden;
  pointer-events: none;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text-link, var(--color-primary));
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
}

.guardrail-card-desc-more:hover,
.guardrail-card-desc-more:focus-visible {
  text-decoration: underline;
  outline: none;
}

.guardrail-card-desc-more.is-visible {
  visibility: visible;
  pointer-events: auto;
}

.guardrail-desc-popover {
  position: fixed;
  z-index: 1000;
  max-width: min(320px, calc(100vw - var(--space-4) * 2));
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-body);
  display: none;
}

.guardrail-desc-popover[data-open="true"] {
  display: block;
}

/* The fixed popover floats above the cards; use the semantic tooltip layer
   rather than an arbitrary z value (DESIGN.md z-index scale). */
.guardrail-desc-popover {
  z-index: var(--z-tooltip);
}

.guardrail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.guardrail-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.guardrail-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.guardrail-stat-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.guardrail-stat-unit {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* The status pill, when used inside a stat cell, sizes itself like a value
   rather than an inline tag so the three cells share visual weight. */
.guardrail-stat .status-tag {
  align-self: flex-start;
}

.guardrail-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.guardrail-card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.guardrail-card-meta time {
  margin-left: 4px;
}

/* ============================================================
   S4 polish (#195)
   .mode-selector / .mode-btn are used only on this page, so the
   overrides below are page-local even though the base rules live
   in components.css.
   ============================================================ */

/* Mode-keyed top edge. Reuses the metric-card "severity edge" idiom
   (DESIGN.md §5 Cards + the Hairline Rule: a 3px colored border-top is
   the one sanctioned thick border on a card). It gives the 2-up grid a
   single, fixed-position state signal the operator can scan straight down;
   the segmented selector at the card foot can't, because its highlighted
   segment shifts left/centre/right per card. The selected segment's text
   label still carries the state (Status-Plus-Label). */
.guardrail-card {
  --guardrail-edge: var(--color-border);
  border-top: 3px solid var(--guardrail-edge);
}
.guardrail-card[data-mode="active"]  { --guardrail-edge: var(--color-success); }
.guardrail-card[data-mode="monitor"] { --guardrail-edge: var(--color-warning); }
.guardrail-card[data-mode="mask"]    { --guardrail-edge: var(--color-primary); }
/* disabled keeps the hairline edge: "off" reads as no signal (calm). */

/* The shared card hover warms every border to the primary ring; keep the
   mode edge, exactly as metric cards preserve their severity edge on hover. */
.guardrail-card:hover {
  border-top-color: var(--guardrail-edge);
}

/* Managers read current mode from the segmented selector below, so their
   card drops the redundant Status pill for a 2-cell metric strip. */
.guardrail-stats--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Segmented selector — keyboard focus. The group clips child corners with
   overflow:hidden, so an outer ring would be cropped; an inset ring is
   never clipped and reads clearly against any segment fill. */
.mode-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-primary);
  position: relative;
  z-index: 1;
}

/* Selector is mid-write: dim and block input until the server confirms
   (paired with an optimistic update + error toast + revert on failure). */
.mode-selector[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Touch: lift each segment to the WCAG 2.5.5 44px floor on coarse pointers.
   responsive.css covers .btn-sm / .filter-btn / etc. but not .mode-btn. */
@media (pointer: coarse) {
  .mode-btn {
    min-height: 44px;
  }
}

/* Mobile: the card footer stacks (responsive.css). Let the selector span the
   row so the three segments are full-width, equal, and comfortably tappable. */
@media (max-width: 768px) {
  .guardrail-card-footer .mode-selector {
    display: flex;
    width: 100%;
  }
  .guardrail-card-footer .mode-btn {
    flex: 1;
    text-align: center;
  }
}

/* Custom Rules — classes lifted out of template inline styles. */
.guardrails-custom-section {
  margin-top: var(--space-8);
}
.custom-rule-keywords {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.custom-rule-match {
  font-size: var(--font-size-sm);
}
.custom-rule-actions {
  text-align: right;
  white-space: nowrap;
}

/* Give every cell a containing block so the visually-hidden "Actions" header
   (an absolutely-positioned .sr-only) stays anchored inside the table's
   horizontal-scroll area instead of escaping to the viewport and forcing a
   phantom page-level horizontal scroll at narrow widths. */
.custom-rules-table th,
.custom-rules-table td {
  position: relative;
}

/* Create/edit rule panel: block-level keyword hint + form-level error. */
.guardrail-rule-hint {
  display: block;
  margin-top: var(--space-1);
}
.guardrail-form-error {
  margin-top: var(--space-2);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.guardrail-form-error[hidden] {
  display: none;
}

/* Structured empty state nested in a dashed empty card: the card already
   carries the padding, so zero the inner block to avoid doubling it. */
.card.empty-state > .empty-state {
  padding: 0;
}

/* The heuristics info-tooltip (shared component) anchors its popover at the
   mid-row trigger icon; at mobile widths its ~351px box runs off the right
   edge and forces horizontal page scroll. Re-anchor it to the left-aligned
   title row and clamp its width so it stays inside the viewport. Scoped to
   this page so other surfaces' tooltips are untouched. */
@media (max-width: 480px) {
  .guardrails-header-row .page-title-row {
    position: relative;
  }
  .guardrails-header-row .info-tooltip {
    position: static;
  }
  .guardrails-header-row .info-tooltip-content {
    left: 0;
    max-width: calc(100vw - 2 * var(--space-4));
  }
}