/* Hesskey Foundation — Admin Panel Styles */

/* ── Section Header ────────────────────────────────────────────────────── */

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-member-stats {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Lists (members, nodes) ────────────────────────────────────────────── */

.admin-list {
  margin-bottom: 20px;
}

.admin-list-empty {
  color: var(--hk-grey);
  font-size: 13px;
  padding: 16px 0;
  text-align: center;
}

.admin-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--hk-light-grey);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.admin-list-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.admin-list-item-label {
  font-weight: 600;
  color: var(--hk-dark);
  word-break: break-all;
  font-family: monospace;
  font-size: 12px;
}

.admin-list-item-meta {
  font-size: 11px;
  color: var(--hk-grey);
}

.admin-list-item-actions {
  display: flex;
  gap: 8px;
  margin-left: 12px;
  flex-shrink: 0;
}

.admin-list-item-actions .hk-btn {
  padding: 6px 14px;
  font-size: 12px;
}

/* ── Action Boxes ──────────────────────────────────────────────────────── */

.admin-action-box {
  background: var(--hk-light-grey);
  border-radius: 10px;
  padding: 20px;
  margin-top: 16px;
}

.admin-action-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hk-dark);
  margin-bottom: 6px;
}

.admin-action-desc {
  font-size: 13px;
  color: var(--hk-grey);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */

.admin-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--hk-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: monospace;
  background: var(--hk-white);
  color: var(--hk-dark);
  transition: border-color 0.2s;
}

.admin-input:focus {
  outline: none;
  border-color: var(--hk-green);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
}

.admin-input::placeholder {
  color: #BDBDBD;
  font-family: var(--hk-font);
}

.admin-input-short {
  max-width: 120px;
  flex: 0 0 120px;
}

.admin-hint {
  font-size: 11px;
  color: var(--hk-grey);
  margin-top: 8px;
  line-height: 1.4;
}

/* ── Parameters Grid ───────────────────────────────────────────────────── */

.admin-param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.admin-param label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--hk-grey);
  margin-bottom: 4px;
}

.admin-param .admin-input {
  width: 100%;
  max-width: none;
  flex: none;
}

.admin-param-total {
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-green-dark);
  text-align: right;
}

.admin-param-total.invalid {
  color: var(--hk-red);
}

/* ── Pallet Grid ───────────────────────────────────────────────────────── */

.admin-pallet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-pallet-card {
  background: var(--hk-light-grey);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-pallet-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-dark);
}

.admin-pallet-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-pallet-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-pallet-status.active {
  color: var(--hk-green);
}

.admin-pallet-status.paused {
  color: var(--hk-red);
}

/* ── Info Box / Steps ──────────────────────────────────────────────────── */

.admin-info-box {
  background: #E8F5E9;
  border-radius: 10px;
  border-left: 3px solid #4CAF50;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.admin-info-box .admin-action-title {
  color: #388E3C;
}

.admin-steps {
  list-style: decimal;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--hk-dark);
}

.admin-steps code {
  background: rgba(0,0,0,0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
}

/* ── Details spacing inside admin ───────────────────────────────────────── */

#tab-params .hk-details {
  margin-bottom: 12px;
}

/* ── Cluster Map (Nodes tab) ───────────────────────────────────────────── */

.cluster-view-toggle {
  display: inline-flex;
  background: var(--hk-bg);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.hk-tab-pill {
  border: none;
  background: transparent;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--hk-grey);
  transition: all 0.15s;
}
.hk-tab-pill.active {
  background: var(--hk-purple);
  color: var(--hk-white);
}

.cluster-view {
  margin-top: 8px;
}

.cluster-node-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--hk-white);
  border: 1px solid var(--hk-border, #e0e0e0);
  border-radius: 8px;
  font-size: 13px;
}
.cluster-node-card.yours {
  border-color: var(--hk-purple);
  background: linear-gradient(0deg, rgba(106,27,154,0.04), rgba(106,27,154,0.04)), var(--hk-white);
}
.cluster-node-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cluster-node-name {
  font-weight: 700;
  color: var(--hk-text, #212121);
  letter-spacing: 0.3px;
}
.cluster-node-host {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--hk-grey);
}
.cluster-node-badges {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
}
.cluster-node-meta {
  font-size: 11px;
  color: var(--hk-grey);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.hk-badge-yours {
  background: #6A1B9A;
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* When a badge is rendered as a <button> (clickable VC pill), strip
   the default button chrome so it reads as a regular badge but
   advertises affordance via cursor + hover. */
button.hk-badge-foundation,
button.hk-badge-personal,
button.hk-badge-bootnode,
button.hk-badge-yours {
  border: none;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.3;
  transition: filter 0.12s, transform 0.12s;
}
button.hk-badge-foundation:hover,
button.hk-badge-personal:hover,
button.hk-badge-bootnode:hover,
button.hk-badge-yours:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.hk-badge-foundation {
  background: #E3F2FD;
  color: #0277BD;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.hk-badge-personal {
  background: #FFF3E0;
  color: #E65100;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.hk-badge-bootnode {
  background: #ECEFF1;
  color: #455A64;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Geo view: Leaflet world map */
.cluster-map {
  height: 420px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--hk-border, #e0e0e0);
  margin-bottom: 16px;
  overflow: hidden;
  background: #f5f5f5;
}
/* Hesskey-purple circle markers with white border. Sized inline by JS;
   this just sets shared visual properties. */
.hk-city-marker {
  background: #6A1B9A;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hk-city-marker.unmapped {
  background: #999;
}
/* Popup styling — overrides Leaflet defaults to match the rest of the
   admin UI. */
.leaflet-popup-content-wrapper {
  border-radius: 10px;
  font-family: var(--hk-font), -apple-system, sans-serif;
}
.leaflet-popup-content { margin: 12px 14px; }
.hk-popup-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--hk-dark);
  margin-bottom: 2px;
}
.hk-popup-meta {
  font-size: 11px;
  color: var(--hk-grey);
  margin-bottom: 8px;
}
.hk-popup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.hk-popup-list li {
  padding: 3px 0;
  border-top: 1px solid #f0f0f0;
}
.hk-popup-list li:first-child { border-top: none; }
.hk-popup-list .pop-name { font-weight: 600; color: var(--hk-dark); }
.hk-popup-list .pop-host {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--hk-grey);
  margin-left: 6px;
}
.hk-popup-list .pop-kind {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 4px;
}
.hk-popup-list .pop-kind.foundation { background: #E3F2FD; color: #0277BD; }
.hk-popup-list .pop-kind.personal   { background: #FFF3E0; color: #E65100; }
.hk-popup-list .pop-kind.bootnode   { background: #ECEFF1; color: #455A64; }
.hk-popup-list .pop-yours {
  display: inline-block;
  background: #6A1B9A;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: 4px;
}

/* Geo view: city groups */
.cluster-city {
  margin-bottom: 14px;
}
.cluster-city-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--hk-text, #212121);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hk-border, #e0e0e0);
}
.cluster-city-count {
  font-size: 11px;
  color: var(--hk-grey);
  font-weight: 500;
}
.cluster-city-rollup {
  margin-top: 6px;
  font-size: 12px;
  color: #6A1B9A;
  cursor: pointer;
  user-select: none;
}
.cluster-city-rollup:hover { text-decoration: underline; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .admin-input-row {
    flex-direction: column;
  }

  .admin-input-short {
    max-width: none;
    flex: 1 1 auto;
  }

  .admin-param-grid {
    grid-template-columns: 1fr;
  }

  .admin-pallet-grid {
    grid-template-columns: 1fr;
  }

  .admin-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ── Parameter rows with view/edit toggle (2026-06-01) ─────────────────
 *
 * Foundation parameters render in `view` mode by default — a read-only
 * code element shows the current on-chain value. A pencil button toggles
 * `data-mode="edit"` to reveal the input + Save (Propose) button. JS
 * (in app.js) gates the pencil visibility based on whether the
 * signed-in user is a foundation participant AND there's no open
 * proposal already pending for the same parameter.
 *
 * When a proposal IS pending, the view mode renders an extra banner
 * showing current → proposed with the proposal id + approval
 * progress.
 */
.param-row {
  border: 1.5px solid var(--hk-grey-light, #E0E0E0);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
  background: var(--hk-grey-50, #FAFAFA);
}
.param-row[data-mode="edit"] {
  background: var(--hk-white, #FFF);
  border-color: var(--hk-purple, #7B1FA2);
}
.param-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.param-row-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--hk-text-dark, #212121);
  letter-spacing: 0.02em;
}
.param-row-edit-btn {
  background: transparent;
  border: 1.5px solid var(--hk-grey-light, #BDBDBD);
  color: var(--hk-grey-dark, #616161);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.param-row-edit-btn:hover {
  border-color: var(--hk-purple, #7B1FA2);
  color: var(--hk-purple, #7B1FA2);
  background: #F3E5F5;
}
.param-row-edit-btn:disabled,
.param-row-edit-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
}
/* Hidden until the user-role + proposal-pending check passes. */
.param-row-edit-btn[hidden] {
  display: none !important;
}
.param-row-view code {
  display: inline-block;
  font-size: 15px;
  padding: 4px 10px;
  background: var(--hk-white, #FFF);
  border: 1px solid var(--hk-grey-light, #E0E0E0);
  border-radius: 6px;
}
.param-row-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.param-row-hint {
  color: var(--hk-grey, #757575);
  font-size: 11px;
}
.param-row-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.param-pending-banner {
  margin-top: 10px;
  padding: 8px 12px;
  background: #FFF3E0;
  border-left: 3px solid #FF9800;
  border-radius: 4px;
  font-size: 12px;
  color: #5D4037;
  line-height: 1.5;
}
.param-pending-banner strong { color: #E65100; }
.param-pending-banner .arrow {
  color: #9E9E9E;
  margin: 0 6px;
}

/* ── Unified parameter-line layout (2026-06-01) ────────────────────────
 *
 * One line per governance-tunable parameter, grouped by topic. The
 * layout is a flex row split into three slots:
 *   .param-line-name    — label + ? help button (left, fixed-ish)
 *   .param-line-values  — current value + proposed input/value (flex 1)
 *   .param-line-action  — pencil / Propose / progress (right, fixed)
 *
 * State is driven by `data-mode` on the .param-line: view (default),
 * edit (user clicked pencil), pending (proposal lives on-chain awaiting
 * approvals). The JS controller in app.js updates this attribute +
 * toggles the appropriate child elements' `hidden` attribute.
 */
/* `.param-group` is a `<details>` element. The `<summary>` is the
 * topic header that toggles open/closed. Hide the default disclosure
 * triangle and replace with our own chevron prefix to match the rest
 * of the portal's chevron style (see `.hk-details-icon`). */
.param-group {
  margin-top: 14px;
}
/* 2026-06-01: subtle Hesskey-brand accent per topic for readability.
 * `data-accent` on the `<details class="param-group">` picks one of the
 * four brand colors and applies (a) a thin colored left border, (b) a
 * 6% tinted background, (c) a matching topic title color. Mild on
 * purpose — no heavy fills, no shadows. The accent extends to nested
 * `.param-line` so the visual grouping reads through the box border.
 *
 *   purple → governance / lifecycle (Meta-governance, Validator Lifecycle)
 *   green  → value flow (Reward Distribution, IPFS quota)
 *   orange → cost (Fee Rates)
 *   yellow → distribution (Fee Split)
 *
 * The brand-color CSS vars (--hk-purple etc.) are defined globally;
 * the rgba()-tinted backgrounds below hard-code the same hex so the
 * tint is independent of any color override on the variable. */
.param-group[data-accent] {
  border-left: 3px solid transparent;
  border-radius: 4px;
  padding-left: 10px;
  margin-left: -10px;
  transition: background 0.18s ease;
}
.param-group[data-accent="purple"] {
  border-left-color: var(--hk-purple, #7B1FA2);
  background: rgba(123, 31, 162, 0.05);
}
.param-group[data-accent="green"] {
  border-left-color: var(--hk-green, #4CAF50);
  background: rgba(76, 175, 80, 0.05);
}
.param-group[data-accent="orange"] {
  border-left-color: var(--hk-orange, #FF9800);
  background: rgba(255, 152, 0, 0.05);
}
.param-group[data-accent="yellow"] {
  border-left-color: var(--hk-yellow, #FFC107);
  background: rgba(255, 193, 7, 0.07); /* yellow needs a touch more opacity to be visible */
}
.param-group[data-accent="purple"] > .param-topic { color: var(--hk-purple, #7B1FA2); }
.param-group[data-accent="green"]  > .param-topic { color: #2E7D32; }
.param-group[data-accent="orange"] > .param-topic { color: #E65100; }
.param-group[data-accent="yellow"] > .param-topic { color: #F57F17; }
/* Match the chevron color to the topic accent. */
.param-group[data-accent="purple"] > .param-topic::before { color: var(--hk-purple, #7B1FA2); }
.param-group[data-accent="green"]  > .param-topic::before { color: #2E7D32; }
.param-group[data-accent="orange"] > .param-topic::before { color: #E65100; }
.param-group[data-accent="yellow"] > .param-topic::before { color: #F57F17; }
.param-topic {
  font-size: 12px;
  font-weight: 700;
  color: var(--hk-grey, #757575);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 8px 0 6px 0;
  padding: 4px 0 4px 18px;
  border-bottom: 1px solid var(--hk-grey-light, #E0E0E0);
  cursor: pointer;
  user-select: none;
  list-style: none;
  position: relative;
}
/* WebKit-only: drop the default marker. `list-style: none` covers
 * Firefox. Chrome/Safari need this extra pseudo-element rule. */
.param-topic::-webkit-details-marker {
  display: none;
}
.param-topic::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 9px;
  color: var(--hk-grey, #9E9E9E);
  transition: transform 0.15s ease;
}
.param-group[open] > .param-topic::before {
  transform: translateY(-50%) rotate(90deg);
}
.param-topic:hover { color: var(--hk-text-dark, #212121); }
.param-topic:hover::before { color: var(--hk-purple, #7B1FA2); }
.param-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--hk-grey-light, #E0E0E0);
  border-radius: 10px;
  background: var(--hk-grey-50, #FAFAFA);
  margin-top: 8px;
  flex-wrap: wrap;
}
.param-line[data-mode="edit"] {
  background: var(--hk-white, #FFFFFF);
  border-color: var(--hk-purple, #7B1FA2);
}
.param-line[data-mode="pending"] {
  background: #FFFBF0;
  border-color: #FF9800;
}
.param-line-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 200px;
  flex: 0 0 auto;
}
.param-line-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--hk-text-dark, #212121);
}
.param-line-help {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.2px solid var(--hk-grey-light, #BDBDBD);
  color: var(--hk-grey, #757575);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  /* Positioning anchor for `.param-help-popover` — the JS appends the
   * popover INSIDE the button so this `position: relative` is what
   * gives `position: absolute` a frame of reference. Without it the
   * popover floated off somewhere on the page. */
  position: relative;
}
.param-line-help:hover {
  border-color: var(--hk-purple, #7B1FA2);
  color: var(--hk-purple, #7B1FA2);
  background: #F3E5F5;
}
.param-line-values {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 240px;
}
.param-line-current {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: var(--hk-text-dark, #212121);
  background: var(--hk-white, #FFFFFF);
  border: 1px solid var(--hk-grey-light, #E0E0E0);
  border-radius: 6px;
  padding: 4px 10px;
  min-width: 90px;
}
.param-line[data-mode="pending"] .param-line-current,
.param-line[data-mode="edit"] .param-line-current {
  /* Mute the current value when a proposed one is being shown
     next to it — directs attention to the change. */
  opacity: 0.65;
}
.param-tier-row {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.param-tier-row + .param-tier-row { margin-left: 10px; }
.param-tier-label {
  font-size: 10px;
  color: var(--hk-grey, #757575);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.param-line-proposed {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.param-line-proposed::before {
  content: '→';
  color: var(--hk-grey, #BDBDBD);
  font-size: 16px;
  font-weight: 700;
}
.param-line-input {
  border: 1.5px solid var(--hk-purple, #7B1FA2);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: 'Courier New', Courier, monospace;
  width: 110px;
  background: #F3E5F5;
}
.param-line-input:focus {
  outline: none;
  background: var(--hk-white, #FFFFFF);
  box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.18);
}
.param-line-proposed-value {
  display: inline-block;
  font-size: 13px;
  font-family: 'Courier New', Courier, monospace;
  background: #FFF3E0;
  color: #E65100;
  border: 1px solid #FFB300;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 700;
}
.param-line-hint {
  font-size: 11px;
  color: var(--hk-grey, #757575);
}
.param-line-action {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.param-line-pencil,
.param-line-cancel {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--hk-grey-light, #BDBDBD);
  color: var(--hk-grey-dark, #616161);
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}
.param-line-pencil:hover {
  border-color: var(--hk-purple, #7B1FA2);
  color: var(--hk-purple, #7B1FA2);
  background: #F3E5F5;
}
.param-line-cancel:hover {
  border-color: #E53935;
  color: #E53935;
  background: #FFEBEE;
}
.param-line-pencil[hidden],
.param-line-cancel[hidden],
.param-line-propose[hidden],
.param-line-progress[hidden],
.param-line-proposed[hidden],
.param-line-proposed-value[hidden] {
  display: none !important;
}
/* 2026-06-01: pencil moved out of .param-line-action to the start of
 * .param-line so it precedes the parameter name (per user feedback —
 * row gutter pattern). Reserve a flex slot so the name column stays
 * aligned across rows whether the pencil is visible (signed-in member)
 * or hidden (signed-out / non-member view). */
.param-line > .param-line-pencil { flex: 0 0 auto; }

/* 2026-06-01: "Recently executed proposals" strip — collapsed by
 * default below the Pending Proposals card. Without this, executed
 * proposals vanish silently from the pending list and the user has
 * no UI feedback that "I proposed → I approved on phone → it landed". */
.executed-proposal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--hk-grey-light, #E0E0E0);
  border-radius: 8px;
  background: #F1F8E9;
  margin-top: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
.executed-proposal-id {
  font-family: 'Courier New', Courier, monospace;
  color: var(--hk-grey-dark, #616161);
  flex: 0 0 auto;
}
.executed-proposal-summary {
  color: var(--hk-text-dark, #212121);
  flex: 1 1 auto;
}
.executed-proposal-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.executed-proposal-tally {
  color: var(--hk-grey-dark, #616161);
  font-size: 12px;
}
.executed-proposal-status {
  background: var(--hk-green, #4CAF50);
  color: var(--hk-white, #FFFFFF);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
}
.param-line-pencil[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
}
.param-line-propose {
  background: var(--hk-purple, #7B1FA2);
  color: var(--hk-white, #FFF);
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.param-line-propose:hover { opacity: 0.92; }
.param-line-propose:disabled { opacity: 0.4; cursor: not-allowed; }
.param-line-progress {
  background: #FFF3E0;
  border: 1.5px solid #FF9800;
  color: #E65100;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Courier New', Courier, monospace;
  white-space: nowrap;
  cursor: help;
}
/* Help popover — JS toggles `aria-expanded` + the visibility CSS. */
.param-line-help[aria-expanded="true"] {
  background: var(--hk-purple, #7B1FA2);
  color: var(--hk-white, #FFF);
  border-color: var(--hk-purple, #7B1FA2);
}
.param-help-popover {
  position: absolute;
  z-index: 50;
  /* Anchor to the ? button (which has `position: relative`).
   * top: 100% drops it just below the button; left: 50% + translateX
   * centers it horizontally on the button — keeps it next to the ?
   * regardless of where the button sits on the row. */
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 380px;
  background: var(--hk-white, #FFF);
  border: 1.5px solid var(--hk-purple, #7B1FA2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  line-height: 1.5;
  color: var(--hk-text-dark, #212121);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  /* Multi-line descriptions in `data-desc` use plain newlines + "•"
   * bullets — `pre-line` preserves the line breaks while still
   * collapsing runs of whitespace inside each line. */
  white-space: pre-line;
  /* The popover should NOT inherit the parent button's pointer cursor
   * or hover styles. */
  cursor: default;
}

@media (max-width: 720px) {
  .param-line { flex-direction: column; align-items: stretch; }
  .param-line-name, .param-line-values, .param-line-action {
    min-width: 0; width: 100%;
  }
  .param-line-action { justify-content: flex-end; }
}