/************************************************************************************/
/******************************** BLOCK *********************************************/
/************************************************************************************/

.nav-layout > :first-child {
  --vnav-bg-color: var(--bg-primary);
  --vnav-color: var(--text-on-primary);
  --vnav-font-family: var(--ff-normal); /* no such var */
  --vnav-font-size: var(--fs-500);
  --vnav-font-weight: var(--fw-300);
  --vnav-bg-highlight: var(--bg-accent);
  --vnav-text-highlight: var(--text-on-accent);
  --vnav-font-weight-highlight: var(--fw-400);
  --vnav-active-bg-color: var(--bg-secondary);
  --vnav-active-color: var(--text-on-secondary);
  --vnav-min-width: 10rem;

  min-width: var(--vnav-min-width);
  background-color: var(--vnav-bg-color);
  color: var(--vnav-color);
  margin: 0;
  font-family: var(--vnav-font-family);
  font-size: var(--vnav-font-size);
  font-weight: var(--vnav-font-weight);
  padding-right: 0.1rem;

  ul {
    list-style: none;
    padding: 0;

    a {
      text-decoration: none;
      color: inherit;
      width: 100%;
      display: block;
      border-radius: 0.2rem;
      padding-inline: 1rem;
      margin: 0.1rem 0 0.1rem 0;

      &:visited {
        text-decoration: none;
      }

      &:hover {
        background-color: var(--vnav-bg-highlight);
        color: var(--vnav-text-highlight);
        font-weight: var(--vnav-font-weight-highlight);
      }
    }

    a.active {
      background-color: var(--vnav-active-bg-color);
      color: var(--vnav-active-color);

      &:hover {
        background-color: var(--vnav-active-bg-color);
        color: var(--vnav-active-color);
        font-weight: inherit;
      }
    }
  }
}

.card {
  box-shadow: 0px 0px 4px darkgray;
  border-radius: 0.2rem;
  background-color: white;

  .card-header {
    padding: 0.3rem;
    background-color: hsl(0, 0%, 94%);
    flex-basis: 30%;
    overflow: hidden;

    &.header--ready {
      /*background-color: hsl(80, 70%, 80%);*/
    }

    &.header--not-ready {
      /*background-color: hsl(20, 70%, 80%);*/
    }
  }


  .card-body {
    flex-grow: 999;
    background-color: transparent;

    .description {
      height: 6rem;
      overflow-y: auto;
      overflow-x: auto;
      scrollbar-width: none;
    }
  }

  .card-title {
  }

  .card-footer {
    width: 100%;
    background-color: var(--bg-tertiary);
    flex-basis: 30%;
  }
}

.card--square {
  aspect-ratio: 1;
}

.card--project {
  .card-footer {
    display: flex;
    align-items: end;

    .buttons {
      margin-inline: auto;
      margin-bottom: 2rem;
      display: flex;
      flex-direction: row;
      gap: 1rem;

      button {
        padding: 1rem;
      }

      .open-project-button {
      }
    }
  }

  .card-title {
    a {
      text-decoration: none;
    }
  }
}

.card--create-new {
  .card-content {
    border: 2px dashed gray;
    background-color: transparent;
  }

}

.projects-grid {
  --ag-cell-size: 22rem;
}

.navbar-brand {
  font-weight: var(--fw-600);
  font-size: var(--fs-400);
  width: 10rem;
  background-color: var(--bg-primary);
  color: var(--text-on-primary);
  letter-spacing: 0.31rem;

  &::first-letter {
    font-size: var(--fs-800);
  }
}

header {
  font-size: var(--header-font-size);
  background: var(--clr-gray-200);

  .header-page {
    color: var(--clr-bg-primary-darker);
    /*margin-left: 1rem;*/
  }

  .header-item {
    flex-grow: 0;
    align-items: center;
    display: flex;
    padding-inline: 0.1rem;
  }

  .header-logo {
    margin-block: 0.1rem;
    margin-inline: 1rem;

    img {
      height: 2rem;
    }
  }
}

.menu-items {
    font-size: 13px;
    font-family: var(--ff-base);
    border: 1px solid var(--clr-gray-200);
    background: var(--clr-white);
    color: var(--clr-gray-800);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    padding: 6px;
    z-index: 1000;
    min-width: 190px;
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    li a {
      display: block;
      padding: 7px 12px;
      border-radius: 7px;
      color: var(--clr-gray-700);
      text-decoration: none;
      font-weight: 500;
      transition: background 0.12s;
    }
    li a:hover {
      background: var(--clr-gray-100);
      color: var(--clr-gray-900);
    }
}

.account-container {
  margin-right: 0;
  .account-menu-items {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
  }
}

.account-menu-items .user-email {
    font-size: 12px;
    color: var(--clr-gray-500);
    padding: 6px 12px 8px;
    font-weight: 400;
    border-bottom: 1px solid var(--clr-gray-100);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.project-main {
  overflow: hidden;

  nav.vertical-sidebar {
    /* width: 4.5rem; */
    flex-grow: 0;
    flex-shrink: 0;
    align-self: stretch;
    /*color: var(--clr-secondary);*/
    background-color: var(--clr-gray-200);
    color: var(--clr-neutral);
    font-family: var(--ff-secondary);
    font-weight: var(--fw-400);
    font-size: var(--fs-500);
/*
    border-right: 1px solid var(--clr-neutral-lighter);
*/
    position: relative; /* because of the collapse button's absolute position */

    ul {
      list-style: none;
    }

    li:hover {
      color: var(--clr-highlight);
      background-color: var(--clr-bg-highlight);
      border-radius: 0.3rem;
    }

    li {
      display: grid;
      min-height: 3rem;
    }

    a {
      width: 100%;
      align-content: center;
    }

    li:has(> a.active) {
      border-radius: 0.3rem;
      background-color: var(--clr-gray-600);
/*
      background: linear-gradient(to right,
           var(--clr-bg-primary) 50%,
           white 100%);
*/
    }

    a.active {
      color: var(--clr-primary);
/*
      background-color: var(--clr-bg-primary);
*/
      /*font-weight: var(--fw-600);*/
      border-radius: 0.3rem;
    }

    a span {
      transition: width 200ms ease;
      transition-delay: 300ms;
    }

    li i {
      padding-inline: 0.3rem;
      font-size: var(--fs-600);
    }

  }

  nav.vertical-sidebar[aria-expanded="false"] {
    width: 4rem;
    transition: width 250ms ease-in-out;

    .vertical-sidebar-collapse button::before {
      content: '>';
    }
  }

  nav.vertical-sidebar[aria-expanded="true"] {
    width: var(--header-logo-width, 10rem);
    transition: width 250ms ease-in-out;

    .vertical-sidebar-collapse button::before {
      content: '<';
    }
  }

  .vertical-sidebar-collapse {
    position: absolute;
    bottom: 1rem;
    right: -1rem;

    button {
      width: 2rem;
      aspect-ratio: 1;
      border: 1px dotted gray;
      border-radius: 20rem;
      color: gray;
      background-color: var(--clr-bg-neutral-dark);
      opacity: 0.5;

      &:hover {
        color: var(--clr-neutral);
      }
    }
  }
}

/* Setup page: turbo-frame anchors to viewport height */
turbo-frame.setup-frame {
  display: flex;
  flex-direction: column;
}

/* Setup edit — full-bleed, fills pn-page--setup-edit like chart fills pn-page--chart */
.pn-page--setup-edit {
    overflow: hidden;
}
.setup-frame--edit {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.setup-frame--edit > .field-mapping-container {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
    padding-left: 12px;
}

.setup-frame {
  .status-container {
    width: fit-content;
    grid-area: status;
    margin-bottom: 1rem;

    > div {
      gap: 2rem;
      padding: 0.2rem;
      border-radius: 0.3rem;
      font-family: var(--ff-mono);
      align-items: center;

      .error {
        color: red;
      }

      .ok {
        color: green;
      }

      .warning {
        color: orange;
      }
    }
  }

  .field-mapping-container {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }
}

.column-mapping-container {
  align-items: stretch;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 13px;

  &[data-mode="edit"] {
    input, select {
      /* common styling for input fields */
    }
    select:invalid {
      border: 2px solid var(--clr-error);
    }
  }

  .help {
    border-left: 4px solid rgba(200, 200, 200, 0.7);
    padding-left: 1rem;
    color: var(--clr-neutral-light);

    ul {
      list-style: none;
      padding-left: 0.3rem;
    }
  }

  .controls {
    label {
      font-weight: var(--fw-600);
      font-size: 12px;
    }
  }

  .title {
    grid-area: title;
  }

  .controls-url {
    grid-area: controls-url;
  }

  .help-url {
    grid-area: help-url;
  }

  .controls-sheet {
    grid-area: controls-sheet;
  }

  .help-sheet {
    grid-area: help-sheet;
  }

  .field-mapping-title {
    grid-area: field-mapping-title;
  }

  .controls-data-range {
    grid-area: controls-data-range;
  }

  .help-data-range {
    grid-area: help-data-range
  }

  .controls-field-mapping {
    grid-area: controls-field-mapping;
  }

  .help-field-mapping {
    grid-area: help-field-mapping;
  }

  .preview-title {
    grid-area: preview-title;
  }

  .controls-preview {
    grid-area: controls-preview;
  }

  .help-preview {
    grid-area: help-preview;
  }

  .edit-validation-messages {
    grid-area: edit-validation-messages;
  }

  .help-edit-validation-messages {
    grid-area: help-edit-validation-messages;
  }

  .buttons {
    grid-area: buttons;
  }

  .column-mapping--preview .column-mapping--card {
      width: calc(var(--config-node-width) * 1px);
      max-width: calc(var(--config-node-width) * 1px);
  }

  .mapping-form-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
  }

  .controls-container {
    flex: 0 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    padding-bottom: 1.5rem;
  }

  /* "Hide setup panel" toggle (field-mapping#toggleControlsPanel) - gives the preview, e.g. the map layout,
     the full width instead of squeezing it into the ~70% left after the setup panel's own 30%/min-500px. */
  .mapping-form-container--controls-collapsed {
    .controls-container { display: none; }
    .chart-preview-container { width: 100% !important; }
  }

  .chart-preview-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    #preview-chart, #preview-directory {
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    #preview-chart {
      display: flex;
      flex-direction: column;
      > .chart-container { /* org-chart controller element */
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .chart-container--config { /* d3 render target */
          flex: 1;
          min-height: 0;
          overflow: hidden;
        }
      }
    }
  }

  /* Global customize-panel styles - used by both column-mapping and visual-layers */
  .customize-panel {
    background-color: var(--clr-bg-neutral);
    color: var(--clr-neutral);
    border: 1px solid var(--clr-gray-300);
    border-radius: 0.3rem;
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 280px;
    align-items: left;

    .customize-panel-content {
      .title {
          text-align: left;
      }

      .panel-container {
          /*justify-items: baseline;
          align-items: stretch;
          grid-auto-rows: 1fr;*/
          text-align: left;
      }
    }

    label {
      font-weight: var(--fw-600);
      font-size: var(--fs-300);
    }

    input[type="text"]:disabled {
      background-color: var(--clr-gray-100);
      cursor: not-allowed;
    }
  }

  .column-mapping--card-container, .column-mapping--preview {
    margin: auto;
    padding-block: 0.3rem;
    min-width: 50%;

    label {
      font-weight: var(--fw-600);
      font-size: var(--fs-300);
    }

    .column-mapping--card {
      margin-top: 3rem;
      margin-inline: auto;
      position: relative;

      .field:not(.additional-field) {
        text-wrap: nowrap;

        .field-label {
          font-size: var(--fs-400);
          font-weight: 600;
        }
      }
    }

    .additional-field-row {
      position: relative;
      margin-bottom: 0.5rem;
    }

    .customize-field-button {
      color: var(--config-node-fg-color);

      &:hover {
        color: var(--clr-highlight);
      }

      &:disabled {
        background: transparent;
        color: var(--clr-gray-500);
      }
    }

    .icon-selector-container {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;

      .icon-display {
        display: flex;
        align-items: center;
        min-width: 3rem;
        font-size: 1.5rem;
        flex-shrink: 0;
      }

      .icon-chooser-dropdown {
        flex: 1;
        position: relative;

        .icon-search-input {
          width: 100%;
          padding: 0.35rem;
          border: 1px solid var(--clr-gray-300);
          border-radius: 0.2rem;
          font-size: 0.875rem;

          &:focus {
            outline: none;
            border-color: var(--clr-bg-primary);
            box-shadow: 0 0 0 2px rgba(var(--clr-bg-primary-hue), var(--clr-bg-primary-sat), 48%, 0.1);
          }

          &:disabled {
            background-color: var(--clr-gray-100);
            cursor: not-allowed;
          }
        }

        .icon-list {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: white;
          border: 1px solid var(--clr-gray-300);
          border-top: none;
          border-radius: 0 0 0.2rem 0.2rem;
          max-height: 200px;
          overflow-y: auto;
          z-index: 100;
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
          gap: 0.25rem;
          padding: 0.25rem;

          &:not(.visually-hidden) {
            display: grid;
          }
        }
      }
    }
  }

  .unmapped {
    opacity: 0.5;
  }

  .reportsTo-field {
    min-height: 1.5rem; /* because line-height: 1.5 */
    text-align: end;
    padding-inline: 0.5rem;
    position: absolute;
    top: -3rem;
    border: 1px solid var(--clr-neutral-darker);
    border-radius: 0.3rem;
    background-color: var(--clr-gray-200);
    color: var(--clr-gray-800);
    min-width: 100%;
    max-width: 500px;
    text-align: center;

    &::after {
      content: '';
      position: absolute;
      width: 1px;
      background-color: var(--clr-neutral-darker);
      height: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      top: 100%;
    }
  }

  .mapping-fields {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--clr-gray-300);
    border-radius: 0.25rem;
    background-color: var(--clr-bg-neutral);
    font-family: var(--ff-secondary);

    .field {
      text-wrap: nowrap;

      &.reportsTo-field {
        position: absolute;
        top: -3rem;
        left: 0;
        right: 0;
        margin: 0 auto;
      }

      &.id-field {
        display: flex;
        flex-direction: row;
        justify-content: end;
        gap: 0.3rem;
        font-size: 0.875rem;
      }

      &.name-field {
        display: flex;
        flex-direction: row;
        justify-content: end;
        gap: 0.3rem;
        font-size: 1.1rem;
      }
    }

    .additional-fields {
      display: flex;
      flex-direction: column;
    }
  }


  .column-mapping--card {
    .create-additional-field {
      display: flex;
      justify-content: center;
      margin-top: 0.5rem;
    }

    .add-field-button {
      background: var(--clr-gray-100);
      color: var(--clr-gray-700);
      border: 1px dotted var(--clr-gray-400);
      border-radius: 0.1rem;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      width: auto;
      transition: all 0.2s;

      &:hover {
        border: 1px solid var(--clr-gray-700);
        background: var(--clr-gray-200);
      }
    }

    .delete-field-button {
      background: transparent;
      border: none;
      color: var(--config-node-fg-color);
      cursor: pointer;
      padding: 0.25rem 0.5rem;
      font-size: 1.2rem;
      line-height: 1;

      &:hover {
        color: var(--clr-error);
      }
    }

    .clear-icon-button {
      &:not([disabled]):hover {
        color: var(--clr-error);
      }

      &[disabled] {
        background: transparent;
        color: var(--clr-gray-500);
      }
    }

    .field, .reportsTo-field, .additional-field {
      select {
        max-width: 25%;
        font-size: var(--fs-400);
      }

      input[type="text"] {
        font-size: var(--fs-400);
      }
    }

    .additional-field {
      padding-top: 0.15rem;
      /* these are the inline styles additional-field because the additional-field gets removed in the setup page */
      min-height: 1.5rem;
      text-align: end;
      font-size: 0.8rem;
      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: nowrap;

      .field-icon {
        margin-right: 0.25rem;
        flex-shrink: 0;
      }

      .field-label {
        font-size: 12px;
        font-weight: 400;
      }
    }
  }

  .validation-issue {
    padding-inline: 1rem;
    padding-block: 0.2rem;
    display: flex;
    flex-direction: row;
    border-left: 3px solid var(--clr-validation-issue-bg, var(--clr-success));
    background-color: rgba(from var(--clr-validation-issue-bg, var(--clr-success)) r g b / 0.1);
    color: var(--clr-validation-issue, var(--clr-body));
    margin-block: 1rem;

    .severity-icon-container {
      align-self: start;
      padding-right: 1rem;
      font-size: var(--fs-600);
    }

    &[data-severity="fail"] {
      --clr-validation-issue-bg: var(--clr-error);
    }

    &[data-severity="warn"] {
      --clr-validation-issue-bg: var(--clr-warn);
    }

    .main-message {
      font-size: var(--fs-400);
    }

    .help-message {
      font-size: var(--fs-300);
      color: var(--clr-neutral-lighter);
    }

    .impact-message {
      font-size: var(--fs-300);
      color: var(--clr-neutral-lighter);
    }

    .affected-rows {
      .row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        font-size: var(--fs-200);
        padding: 0.5rem;
        gap: 0.5rem;
        overflow-x: auto;
        word-break: break-word;

        &.header {
          font-weight: bold;
          background-color: rgba(0, 0, 0, 0.05);
        }
      }
      .expandable {
        &::after {
          content: 'Expand';
          margin-left: 0.3rem;
          font-size: var(--fs-200);
          color: var(--clr-neutral-lighter);
        }
        +.affected-rows-content {
          display:none
        }
      }
      .expandable.expanded {
        &::after {
          content: 'Collapse';
        }
        +.affected-rows-content {
          display: block;
        }
      }
    }
  }
}

.column-mapping-container h3 {
    font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--clr-gray-700);
}
/* Scale rem-based utility classes down to the 13px design system base */
.column-mapping-container .body-medium,
.column-mapping-container .body-large {
    font-size: 13px;
    letter-spacing: 0;
}
.column-mapping-container .body-small {
    font-size: 12px;
    letter-spacing: 0;
}

.chart-container {
  color: var(--clr-neutral);
}

.login-section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Shared by both sign-in options (Google and email-code) so their labels align and read as
   two equally-weighted choices. */
.signin-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 300px;
  padding: 10px;
}

.signin-option__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-gray-700);
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--clr-gray-300);
  border-top-color: var(--clr-bg-primary);
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.otp-help-icon {
  color: var(--clr-gray-400);
  font-size: 11px;
  margin-left: 2px;
  cursor: help;
}

.otp-row {
  display: flex;
  gap: 8px;
}

.otp-input {
  flex: 1;
  min-width: 0;
  font-family: var(--ff-base);
  font-size: 13px;
  border: 1px solid var(--clr-gray-200);
  border-radius: 8px;
  padding: 8px 12px;
  outline: none;
}

.otp-input--code {
  letter-spacing: 2px;
}

.signin-status {
  font-size: 12px;
  color: var(--clr-gray-500);
  min-height: 14px;
}

.login-billboard {
  height: 100%;
  align-items: center;
  justify-content: center;
  border-left: 1px solid darkgray;
  display: flex;

  h1 {
    font-size: 3rem;
    font-family: var(--ff-heading-secondary);
    font-weight: 300;
    padding: 0.25rem;
    text-align: center;
  }

  img {
    align-self: center;
    justify-self: center;

  }
}

.inline-message-alert {
  display: flex;
  margin: 1rem;
  padding: 0.5rem;
  justify-content: center;
  border: var(--border-width, 1px) solid var(--clr-border, var(--clr-highlight));
  /* background-color: var(--clr-background, var(--clr-bg-neutral-dark)); */
  border-radius: 0.4rem;

  .title {
    font-weight: var(--fw-600);
  }

  .button {
    margin-right: 0.3rem;
  }
}

.nudge-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.2rem 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--clr-highlight);
  border-radius: 0.4rem;
  background-color: var(--clr-bg-neutral-light, #f8f9ff);
  animation: nudgeBannerIn 0.2s ease-out;
  font-size: 0.9rem;
}

.nudge-banner--warning {
  border-color: var(--clr-warning, #e6a817);
  background-color: var(--clr-bg-warning-light, #fffbf0);
}

.nudge-banner .nudge-banner-body {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.nudge-banner .nudge-banner-body span {
  font-size: 0.9rem;
}

.nudge-banner .nudge-banner-body .button {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}

.nudge-banner .nudge-banner-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-subdued, #6c757d);
  padding: 0.15rem;
  line-height: 1;
}

.nudge-banner .nudge-banner-close:hover {
  color: var(--text-primary, #333);
}

@keyframes nudgeBannerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.create-project-container {
/*  transition: all 0.2s ease-in-out;
  opacity: 0;
  visibility: hidden;
  */
}

.create-project-container.showContainer {
  opacity: 1;
  visibility: visible;
}

.create-project-container.hideContainer {
  opacity: 0;
  visibility: hidden;
  display: none;
}

.welcome {
  & .welcome-toggle {
    cursor: pointer;
    color: inherit;
    margin-inline: 0.3rem;
    border: none;
    background: none;
    text-decoration: none;
/*    transition: transform 0.3s ease;  */
  }
}
/*  & .welcome-toggle[aria-expanded="true"] {
    i {
      transform: rotate(180deg);
    }
*/

.coming-soon {
  background-color: var(--clr-bg-primary-light);
  border: 1px solid var(--clr-bg-primary-light);
  border-radius: 0.3rem;
  padding-inline: 0.3rem;
  margin-right: 0.3rem;
}

.coming-soon::after {
  content: 'Coming Soon';
}

/* ---- Pricing page ----------------------------------------- */
.pn-pricing-page { padding-top: 40px; padding-bottom: 80px; }

.pn-pricing-header { text-align: center; margin-bottom: 32px; }
.pn-pricing-header__eyebrow {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--clr-gray-500); margin-bottom: 14px;
}
/* Hero: the TCO formula is the lead statement */
.pn-pricing-hero {
    font-family: var(--ff-secondary); font-size: 22px; font-weight: 700;
    color: var(--clr-gray-900); margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.35;
}
.pn-pricing-hero__sub {
    font-size: 14px; color: var(--clr-gray-600); line-height: 1.5; margin-bottom: 22px;
}
/* "Choose your plan" is now a secondary section label */
.pn-pricing-header__title {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--clr-gray-500); margin: 0;
}

.pn-pricing-toggle {
    display: inline-flex;
    background: var(--clr-gray-100);
    border-radius: 999px;
    padding: 3px;
}
.pn-pricing-toggle input[type="radio"] { display: none; }
.pn-pricing-toggle label {
    padding: 6px 22px; border-radius: 999px; cursor: pointer;
    font-size: 13px; font-weight: 500; color: var(--clr-gray-600);
    transition: all 0.15s;
}
.pn-pricing-toggle input[type="radio"]:checked + label {
    background: var(--clr-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    color: var(--clr-gray-900); font-weight: 600;
}

/* subgrid aligns head / alternate-cycle / total / features / footer across all cards */
.pn-pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-template-rows: auto auto auto 1fr auto;
    align-items: stretch;
    gap: 0 16px; margin-bottom: 24px;
}

.pn-pricing-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    background: var(--clr-white);
    border: 1px solid var(--clr-gray-200);
    border-radius: 12px;
    overflow: hidden;
}
.pn-pricing-card--volume { border-color: hsl(150 50% 80%); }
.pn-pricing-card__footer--empty { padding: 0; }
.pn-pricing-card__head {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--clr-gray-100);
}
.pn-pricing-card__plan-name { margin-bottom: 14px; }
.pn-pricing-card .price-container {
    display: flex; align-items: baseline; gap: 4px;
}
.pn-pricing-card .price-container .price {
    font-family: var(--ff-secondary); font-size: 2rem;
    font-weight: 700; color: var(--clr-gray-900);
}
.pn-pricing-card .price-container .per-month {
    font-size: 12px; color: var(--clr-gray-500);
}
.pn-pricing-card .savings {
    min-height: 18px; margin-top: 4px;
    font-size: 12px; color: var(--clr-gray-500);
}
.pn-pricing-card .savings .full-price {
    text-decoration: line-through;
    text-decoration-color: var(--clr-gray-400);
}
.pn-pricing-card .savings .percent {
    color: #2a7a4b; font-weight: 600; margin-left: 4px;
}
.pn-pricing-card .cycle-info { font-size: 12px; color: var(--clr-gray-500); margin-top: 4px; }
.pn-pricing-card .alternate-cycle {
    padding: 8px 20px; font-size: 12px; color: var(--clr-gray-500); min-height: 30px;
}
.pn-pricing-card__total {
    padding: 10px 20px;
    background: var(--clr-gray-100);
    border-top: 1px solid var(--clr-gray-200);
    border-bottom: 1px solid var(--clr-gray-200);
    font-size: 13px;
}
.pn-pricing-card .total-price-section .price { font-weight: 700; color: var(--clr-gray-900); }
.pn-pricing-card .total-price-section .taxes { font-size: 12px; color: var(--clr-gray-500); }
.pn-pricing-card__features {
    flex: 1; padding: 16px 20px;
    font-size: 13px; color: var(--clr-gray-700);
}
.pn-pricing-card__features ul { list-style: none; padding: 0; margin: 0; }
.pn-pricing-card__features li {
    padding: 3px 0 3px 16px; position: relative; line-height: 1.5;
}
.pn-pricing-card__features li::before {
    content: '–'; position: absolute; left: 0; color: var(--clr-gray-400);
}
.pn-pricing-card__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--clr-gray-100);
}
.pn-pricing-card__footer .button { width: 100%; justify-content: center; }

/* FAQ inside pn-section */
.pn-faq-item { border-bottom: 1px solid var(--clr-gray-100); padding: 12px 0; }
.pn-faq-item:last-of-type { border-bottom: none; padding-bottom: 0; }
.pn-faq-item summary {
    font-size: 13px; font-weight: 600; color: var(--clr-gray-800);
    cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: 8px; user-select: none;
}
.pn-faq-item summary::after {
    content: '+'; margin-left: auto; color: var(--clr-gray-400); font-size: 16px; font-weight: 400;
}
.pn-faq-item[open] summary::after { content: '–'; }
.pn-faq-item summary::-webkit-details-marker { display: none; }
.pn-faq-item__body {
    font-size: 13px; color: var(--clr-gray-600); line-height: 1.6; padding-top: 8px;
}

/* Legacy — kept for backward compat */
.pricing-container { display: grid; max-width: 72rem; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-gap: 1rem; padding-top: 1rem; justify-content: center; }
.pricing-container-addendum { grid-column: 1 / -1; justify-self: start; }
.faq-container { grid-column: 1 / -1; justify-self: start; }

/* Inline Edit Support */
.editable-input {
    transition: background-color 0.2s ease;
    cursor: auto;
}

.editable-input:hover {
    background-color: var(--clr-gray-100);
    cursor: pointer;
}

.editable-input:focus {
    outline: 1px solid var(--clr-gray-300);
    cursor: auto;
}

.release-note-content {
    height: 15rem;
    overflow: auto;
}

/* Nav item hover behavior */
.navitem-hover-container {
    width: 4.5rem; /* Collapsed width */
    transition: width 0.3s ease;
}

.navitem-hover-container.expanded {
    width: 10rem; /* Expanded width */
}

.navitem-hover-container .navitem-text {
    opacity: 0;
    width: 0;
    pointer-events: none;   /* even with width: 0 this participates in hover */
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.navitem-hover-container.expanded .navitem-text {
    opacity: 1;
    width: 100%;
    pointer-events: auto;
}

.navitem-hover-container .navitem-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Icon Chooser Styles */
.icon-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 2px solid transparent;
  border-radius: 0.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  min-width: 60px;

  i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--clr-neutral);
  }

  .icon-name {
    font-size: var(--fs-200);
    text-align: center;
    word-break: break-word;
    color: var(--clr-gray-700);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &:hover {
    border-color: var(--clr-bg-primary);
    background-color: var(--clr-bg-primary-lighter);
    transform: scale(1.05);
  }

  &.selected {
    border-color: var(--clr-bg-primary);
    background-color: var(--clr-bg-primary-light);
    box-shadow: 0 0 0 2px var(--clr-bg-primary-lighter);

    i {
      color: var(--clr-bg-primary-darker);
    }

    .icon-name {
      color: var(--clr-bg-primary-darker);
      font-weight: var(--fw-600);
    }
  }
}

/* =============================================================
   CHART RENDERING DEFAULTS — DO NOT CHANGE
   These --config-* variables define the default chart node
   appearance (borders, colors, fonts, expander styles).
   They are read at runtime by orgChartController.js and affect
   every user's rendered chart. Any change here would alter the
   visual output of existing charts.
   User-configured appearance overrides these values at the
   .chart-container element level via the appearance config system.
   ============================================================= */
.chart-container--config {
    background1: var(--config-chart-bg-color, var(--clr-bg-neutral)) var(--config-chart-bg-image);
    color1: var(--config-chart-fg-color, var(--clr-neutral));
    --config-chart-highlight-color: #E27396;
    --config-chart-highlight-width: 10;
    --config-chart-line-color: var(--clr-gray-800);
    --config-chart-line-width: 2;

    /* these are all template vars */
    --config-chart-bg-color: var(--clr-bg-neutral);
    --config-chart-bg-image: ;
    --config-chart-bg-size: cover;
    --config-chart-bg-position: center;
    --config-chart-bg-repeat: no-repeat;
    --config-chart-fg-color: var(--clr-neutral);
    --config-chart-fg-ff: var(--ff-secondary);
    --config-node-width: 300;
    --config-node-border-width: 1px;
    --config-node-border-style: solid;
    --config-node-border-color: var(--clr-neutral-darker);
    --config-node-border-radius: 0.3rem;
    --config-node-profile-image-border-width: 0px;
    --config-node-profile-image-border-style: solid;
    --config-node-profile-image-border-color: var(--clr-neutral-darker);
    --config-node-bg-color: var(--clr-white);
    --config-node-fg-color: var(--clr-gray-800);
    --config-node-fg-ff: var(--ff-secondary);
    --config-node-expander-border-width: 1px;
    --config-node-expander-border-style: solid;
    --config-node-expander-border-color: #E4E2E9;
    --config-node-expander-border-radius: 3px;
    --config-node-expander-fg-color: #716E7B;
    --config-node-expander-bg-color: var(--clr-white);
    --config-node-expander-bg-image: url();
    --config-node-link-fg-color: var(--config-node-fg-color);
}

.node--config1 {
    border: var(--config-node-border-width, 1px) var(--config-node-border-style, solid) var(--config-node-border-color, var(--clr-neutral-darker));
    border-radius: var(--config-node-border-radius, 5px);
    background: var(--config-node-bg-color, var(--clr-white));
    color: var(--config-node-fg, var(--clr-gray-800));
    padding: 0.5rem;
    padding-right: 0.65rem;
}

.preset-popup {
    background: var(--clr-bg-primary-lighter);
    color: var(--clr-primary-darker);
    font-weight: 500;
    margin: 0.3rem;
    border-radius: 0.3rem;
    border: 1px solid var(--clr-bg-highlight);
    cursor: pointer;
    z-index: 100;
}

/* Additional Field Links Styling */
.additional-field-link {
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-underline-position: auto !important;    /* override the a.* one because it doesn't show in the chart */

  &:hover {
    text-decoration: underline;
    color: color-mix( in oklab, var(--config-node-link-fg-color) 85%, white 15% );
  }

  &:visited {
    color: color-mix( in oklab, var(--config-node-link-fg-color) 85%, white 15% );
  }

  &:active {
    color: color-mix( in oklab, var(--config-node-link-fg-color) 85%, white 15% );
  }
}

.additional-field-label {
  text-decoration: none;
  cursor: pointer;
}

/************************************************************************************/
/******************************* VISUAL LAYERS *************************************/
/************************************************************************************/

/* Toolbar button for layers (inside pn-chart-toolbar via visual-layers-panel.jte) */
.visual-layers-tb-btn {
    border: none; background: none; color: var(--clr-gray-700);
    width: 30px; height: 30px; border-radius: 6px;
    display: grid; place-items: center; cursor: pointer; font-size: 14px;
}
.visual-layers-tb-btn:hover { background: var(--clr-gray-100); color: var(--clr-gray-900); }
.visual-layers-tb-btn[data-btn-toggle-on="true"] { background: hsl(199 30% 94%); color: hsl(199 40% 30%); }

/* Legacy floating button — kept for backward compat, hidden when inside toolbar */
.visual-layers-button { display: none; }

/* Expandable Panel — anchored above the toolbar button via position:relative on parent wrapper */
.visual-layers-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: 320px;
    max-height: 600px;
    background: var(--clr-white);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 1px solid var(--clr-gray-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.visual-layers-panel--hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
}

.visual-layers-panel--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Panel Header */
.visual-layers-panel-header {
    padding: 0.5rem;
    border-bottom: 1px solid #E0E0E0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.visual-layers-panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #202124;
}

.visual-layers-panel-header .btn-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #5F6368;
    font-size: 20px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.visual-layers-panel-header .btn-close:hover {
    color: #202124;
}

/* Panel Content */
.visual-layers-panel-content {
    flex: 1;
    overflow-y: auto;
    /* padding: 12px 0; */
}

/* Layer List */
.visual-layers-list {
    display: flex;
    flex-direction: column;
}

.visual-layers-item {
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    flex-direction: column;
}

.visual-layers-item:last-child {
    border-bottom: none;
}

.visual-layers-item-header {
    /* padding: 12px 16px; */
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.visual-layers-item-header:hover {
    background-color: #F8F9FA;
}

.visual-layers-legend-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #5F6368;
    font-size: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
    margin-left: auto;
}

.visual-layers-legend-toggle:hover {
    color: #202124;
}

.visual-layers-legend-toggle--expanded {
    transform: rotate(180deg);
}

.visual-layers-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #4285F4;
}

.visual-layers-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    cursor: pointer;
}

.visual-layers-name {
    font-size: 14px;
    font-weight: 500;
    color: #202124;
}

.visual-layers-channel {
    font-size: 12px;
    color: #80868B;
}

.visual-layers-empty {
    padding: 16px;
    text-align: center;
    color: #5F6368;
    font-size: 14px;
    margin: 0;
}

/* Inline Legend Section (Collapsible) */
.visual-layers-legend-section {
    max-height: 400px;
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.2s ease;
    opacity: 1;
}

.visual-layers-legend-section--collapsed {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.1s ease 0.1s;
}

.visual-layers-legend-section--expanded {
    max-height: 400px;
    opacity: 1;
}

.visual-layers-legend-section {
    padding: 0 16px 12px 16px;
    border-top: 1px solid #F0F0F0;
    background-color: #FAFAFA;
}

.visual-layers-legend-empty {
    padding: 8px 0;
    font-size: 12px;
    color: #80868B;
    margin: 0;
}

.visual-layers-legend {
    margin: 0;
}

.visual-layers-legend-title {
    font-size: 12px;
    font-weight: 600;
    color: #202124;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.visual-layers-legend-entries {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.visual-layers-legend-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #5F6368;
}

.visual-layers-swatch {
    flex-shrink: 0;
}

.visual-layers-legend-label {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.visual-layers-entry-label {
    color: #202124;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-layers-entry-count {
    color: #80868B;
    flex-shrink: 0;
}

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
    .visual-layers-button {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .visual-layers-panel {
        bottom: 80px;
        right: 16px;
        width: calc(100% - 32px);
        max-width: 320px;
        max-height: 50vh;
    }
}

/* Scrollbar styling */
.visual-layers-panel-content::-webkit-scrollbar {
    width: 6px;
}

.visual-layers-panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.visual-layers-panel-content::-webkit-scrollbar-thumb {
    background: #D3D3D3;
    border-radius: 3px;
}

.visual-layers-panel-content::-webkit-scrollbar-thumb:hover {
    background: #A0A0A0;
}

/* Exact Value Configuration - Manual Value Management UI */
.exact-value-config {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Value Mappings List */
.value-mappings-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.value-mapping-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem;

    input {
      margin-left: 0.3rem;
    }
}

.value-mapping-row:hover {
    background-color: #f0f0f0;
}

.value-mapping-row .value-selector {
    flex: 1;
    min-width: 150px;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: white;
}

.value-mapping-row .value-selector:focus {
    outline: none;
    border-color: #4285F4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.1);
}

.value-mapping-row .value-selector::placeholder {
    color: #999;
}

/* Color Picker */
.value-mapping-row .color-picker {
    width: 60px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
    background: white;
}

.value-mapping-row .color-picker:hover {
    border-color: #999;
}

/* Style Selector (for border-style) */
.value-mapping-row .style-selector {
    width: 120px;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: white;
    cursor: pointer;
}

.value-mapping-row .style-selector:focus {
    outline: none;
    border-color: #4285F4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.1);
}

/* Width Spinner (for border-width) */
.value-mapping-row .width-spinner {
    width: 50px;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: white;
}

.value-mapping-row .width-spinner:focus {
    outline: none;
    border-color: #4285F4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.1);
}

.value-mapping-row .width-unit {
    font-size: 0.875rem;
    color: #666;
    margin-left: -0.25rem;
}

/* Value mapping remove button - styled with page's button class */
.value-mapping-row .button {
    width: auto;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Add Value Mapping Button section */
/* Panel Container - tighter grid for form fields */
.panel-container {
    column-gap: 0.5rem !important;
}

.exact-value-footer {
    display: flex;
    justify-content: center;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border: none;
}

.exact-value-footer .add-value-mapping-button {
    background: var(--clr-gray-100);
    color: var(--clr-gray-700);
    border: 1px dotted var(--clr-gray-400);
    border-radius: 0.1rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    width: auto;
    transition: all 0.2s;
}

.exact-value-footer .add-value-mapping-button:hover {
    border: 1px solid var(--clr-gray-700);
    background: var(--clr-gray-200);
}

/************************************************************************************/
/****** APPEARANCE SECTION - Theme Panel and Visual Layers Collapsible *****/
/************************************************************************************/

/* Appearance Section Layout */
.appearance-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--clr-bg-neutral);
}

/* Theme Line with Gear Icon */
.appearance-theme-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.3rem;
}

.appearance-theme-line .button {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
}

/* Customize Panel Styling - Floating Overlay */
.customize-panel {
    background-color: transparent;
    border: none;
    border-radius: 0.2rem;
    box-shadow: none;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1000;
    /* Position and visibility handling */
    display: none;
    pointer-events: none;
    /* Ensure proper stacking context and prevent affecting parent layout */
    margin: 0;
    padding: 0;
}

.customize-panel:not(.visually-hidden) {
    display: block;
    pointer-events: auto;
}

.customize-panel::-webkit-scrollbar {
    width: 6px;
}

.customize-panel::-webkit-scrollbar-thumb {
    background: var(--clr-gray-400);
    border-radius: 3px;
}

.customize-panel::-webkit-scrollbar-track {
    background: transparent;
}

/* Visual Layer Configuration Form - Tightened layout */
.customize-panel-content {
    padding: 0;
    background-color: transparent;
}

.customize-panel-content .title {
    margin: 0 0 0.5rem 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.customize-panel-content .panel-container {
    padding: 0;
    background-color: transparent;
    border: none;
}

.customize-panel-content .panel-container label {
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
    padding-right: 0.5rem;
}

.customize-panel-content .panel-container input[type="text"],
.customize-panel-content .panel-container select {
    /* padding: 0.375rem 0.5rem; */
    font-size: 0.875rem;
}

/* Value Mapping Configuration */
.mode-config-section {
    background-color: transparent;
    padding: 0;
    border: none;
}

.exact-value-config {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.value-mappings-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.value-mapping-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0;
}

.value-mapping-row .value-selector {
    flex: 1;
    background-color: white;
    border: 1px solid var(--clr-gray-300);
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

.value-mapping-row .color-picker {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--clr-gray-300);
    border-radius: 0.2rem;
    cursor: pointer;
}

.value-mapping-row .style-selector {
    flex: 0 0 150px;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.value-mapping-row .width-spinner {
    flex-shrink: 0;
    width: 60px;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.value-mapping-row .button {
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--config-node-fg-color);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.value-mapping-row .button:hover {
    color: var(--clr-error);
}

.add-value-mapping-button {
    align-self: flex-start;
}

/* Visual Layers Collapsible Section */
.visual-layers-section {
    padding-left: 0.3rem;
}

.visual-layers-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem 0 0.25rem 0;
    transition: background-color 0.2s ease;
}

.visual-layers-header .chevron-toggle {
    margin-left: auto;
}

.visual-layers-header:hover {
    background-color: var(--clr-gray-100);
    border-radius: 0.2rem;
}

.visual-layers-header .chevron-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 0.25rem;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-layers-header .chevron-toggle i {
    font-size: 1rem;
    color: var(--clr-gray-600);
}

/* Content Container - Expansion/Collapse Animation */
.visual-layers-content {
    max-height: 2000px;
    overflow: visible;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    padding-left: 0.3rem;
}

.visual-layers-content.visual-layers-section--collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.2s ease 0.1s;
}

/* Chevron Rotation based on Content Collapsed State */
/* When content has collapsed class, chevron points down (0deg) */
.visual-layers-section:has(.visual-layers-content.visual-layers-section--collapsed) .chevron-toggle {
    transform: rotate(0deg);
}

/* When content doesn't have collapsed class, chevron points up (180deg) */
.visual-layers-section:not(:has(.visual-layers-content.visual-layers-section--collapsed)) .chevron-toggle {
    transform: rotate(180deg);
}

/************************************************************************************/
/******************************** EXCEPTION *****************************************/
/************************************************************************************/

/************************************************************************************/
/****************************** SEARCH SIDEBAR *************************************/
/************************************************************************************/

/* Floating panel for search - positioned absolutely within chart area, below toolbar */
.search-sidebar {
    position: absolute;
    top: 14px;
    left: 12px;
    width: 320px;
    max-height: calc(100% - 80px); /* leave room for bottom toolbar */
    display: flex;
    flex-direction: column;
    background: var(--clr-white);
    border: 1px solid var(--clr-gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 100;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    pointer-events: auto;
    transform: scale(1);
}

.search-sidebar.d-none {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.97);
}

.search-sidebar__header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--clr-gray-100);
    font-family: var(--ff-secondary);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--clr-gray-900);
    letter-spacing: -0.01em;
}

.search-sidebar__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: grid;
    place-items: center;
    color: var(--clr-gray-500);
    transition: color 0.15s;
    font-size: 14px;
    border-radius: 6px;
    width: 24px; height: 24px;
}
.search-sidebar__close:hover { color: var(--clr-gray-900); background: var(--clr-gray-100); }

.search-sidebar__input-wrap {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--clr-gray-100);
}

.search-sidebar__input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--clr-gray-200);
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--ff-base);
    background: var(--clr-gray-50);
    color: var(--clr-gray-900);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.search-sidebar__input:focus {
    outline: none;
    background: var(--clr-white);
    border-color: hsl(199 50% 55%);
    box-shadow: 0 0 0 3px hsl(199 50% 55% / 0.12);
}
.search-sidebar__input::placeholder { color: var(--clr-gray-400); }

.search-sidebar__results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px;
}

.search-sidebar__section-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--clr-gray-500);
    letter-spacing: 0.07em;
    padding: 10px 6px 4px;
    margin-top: 4px;
}
.search-sidebar__section-label:first-of-type { margin-top: 0; }

.search-sidebar__help-text {
    font-size: 12px;
    color: var(--clr-gray-600);
    padding: 4px 6px 4px 10px;
    margin: 4px 0;
    line-height: 1.45;
    border-left: 2px solid var(--clr-gray-300);
}

.search-sidebar__empty {
    padding: 24px 8px;
    color: var(--clr-gray-500);
    text-align: center;
    font-size: 13px;
}

/* Individual search result item - matches chart node layout */
.search-result-item {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    border: 1px solid var(--clr-gray-200);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    background: var(--clr-white);
    user-select: none;
    gap: 1px;
    font-family: var(--config-node-fg-ff, inherit);
}

.search-result-item:hover {
    background-color: #F8F9FA;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.search-result-item.search-result-item--active {
    border: 2px solid var(--search-highlight-color, var(--clr-primary, #0066cc));
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.15);
}

/* Result item name — prominent, left-aligned, shown first via order */
.search-result-item__name {
    font-weight: 500;
    color: var(--clr-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1.35;
    text-align: end;
}

/* Result item ID — smaller, gray, shown below name */
.search-result-item__id {
    color: var(--clr-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.35;
    text-align: end;
}

/* Result item footer row - HIDDEN */
.search-result-item__footer {
    display: none;
}

/* ID row container — badge on left, ID right-aligned */
.search-result-item__id-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
}

/* Ancestor badge - star icon only */
.search-result-ancestor-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--clr-warning, #ff9900);
    flex: 0 0 auto;
}

.search-result-ancestor-badge i {
    font-size: 0.9rem;
}

/* ID grows to fill space */
.search-result-item__id-row .search-result-item__id {
    flex: 1;
}

/* Group accordion item */
.search-group-item {
    border-radius: 0.2rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
}

/* Group header (clickable accordion trigger) */
.search-group-item__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    background: var(--clr-gray-50);
    border: 1px solid var(--clr-gray-200);
    border-left: 3px solid var(--clr-gray-400);
    border-radius: 6px;
    user-select: none;
    font-size: 12.5px;
    font-family: var(--ff-base);
}

.search-group-item__header:hover {
    background-color: #F8F9FA;
    cursor: pointer;
}

.accordion--expanded.search-group-item .search-group-item__header {
    background-color: var(--clr-gray-100, #f9f9f9);
}

/* Group node name */
.search-group-item__name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Icon in group name */
.search-group-item__name i {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--clr-gray-500);
    margin-right: 0.3rem;
}

/* Label text in group name */
.search-group-item__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Group match count badge */
.search-group-item__count {
    flex: 0 0 auto;
    background: var(--clr-gray-200);
    color: var(--clr-gray-700);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

/* Accordion chevron icon */
.search-group-item__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    font-size: 11px;
    color: var(--clr-gray-500);
    transform: rotate(0deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Chevron rotation when expanded */
.accordion--expanded.search-group-item .search-group-item__chevron {
    transform: rotate(90deg);
}

/* Children list (hidden by default) */
.search-group-item__children {
    display: none;
    max-height: 0;
    opacity: 0;
    padding: 3px 0 0 0.5rem;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left border indicator for group children - aligns with item bounds */
.search-group-item__children::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 0;
    width: 2px;
    background-color: var(--clr-gray-300, #e0e0e0);
}

/* Show children when group is expanded */
.accordion--expanded.search-group-item .search-group-item__children {
    display: block;
    max-height: 1000px;
    opacity: 1;
}

/* Add gap below expanded groups to separate from next individual result */
.accordion--expanded.search-group-item {
    margin-bottom: 1rem;
}

/* Child result items inside groups */
.search-group-item__children .search-result-item {
    padding: 5px 8px;
    margin-bottom: 3px;
}

/* Chart area container - now fills entire space since sidebar is floating */
.search-chart-area {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Pulse animation for highlighted nodes */
@keyframes search-node-pulse {
    0% {
        filter: drop-shadow(0 0 0 rgba(0, 102, 204, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(0, 102, 204, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 0 rgba(0, 102, 204, 0.3));
    }
}

/* Apply pulse animation to highlighted node body */
.search-highlight-pulse {
    animation: search-node-pulse 0.8s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .search-highlight-pulse {
        animation: none;
    }
}

/* Accordion expanded state class (generic) */
.accordion--expanded {
    /* Used by AccordionItemController for toggle state */
}


/* Match reason badge */
.search-result-match-reason {
    margin-top: 0.35rem;
    margin-bottom: 0.1rem;
    font-size: 0.7rem;
}

.search-result-match-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #4a90e2;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 0.2rem;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    word-break: break-word;
    flex: 1;
    min-width: 0;
    cursor: help;
}

.search-result-match-count {
    display: inline-block;
    background: rgba(255, 255, 255, 0.3);
    padding: 0 0.3rem;
    border-radius: 0.1rem;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 0.2rem;
    white-space: nowrap;
}


/* All fields display */
.search-result-fields {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--clr-gray-200, #f0f0f0);
    font-size: 0.75rem;
}

.search-result-field {
    display: flex;
    margin-bottom: 0.2rem;
    color: var(--text-secondary, #666);
}

.search-result-field-label {
    font-weight: 500;
    color: var(--text-primary, #333);
    flex: 0 0 auto;
    min-width: 60px;
}

.search-result-field-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 0.3rem;
    color: var(--text-secondary, #666);
}

/************************************************************************************/
/****************************** AI ENHANCEMENT BANNER *****************************/
/************************************************************************************/

.close-banner {
    background: none;
    border: none;
    color: currentColor;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.close-banner:hover { opacity: 1; }

/* Analysis progress steps (inside pn-banner--info during analysis) */
.analysis-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.analysis-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.38;
    transition: opacity 0.25s ease, font-weight 0s;
}

.analysis-step__icon {
    width: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.analysis-step--done  { opacity: 0.72; }
.analysis-step--active { opacity: 1; font-weight: 600; }

.analysis-summary {
    margin-top: 9px;
    padding-top: 9px;
    font-size: 12px;
    opacity: 0.82;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.analysis-step__spin {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: analysis-spin 0.75s linear infinite;
}

@keyframes analysis-spin { to { transform: rotate(360deg); } }


/* =============================================================
   HOME PAGE COMPONENTS  (hn-*)
   Visual vocabulary for the projects list / dashboard page.
   Buttons and pills here are reused by project pages too.
   ============================================================= */

* { box-sizing: border-box; }

/* ---- App shell -------------------------------------------- */
.hn-shell {
    height: 100%;
    width: 100%;
    background: var(--clr-white);
    color: var(--clr-gray-900);
    font-family: var(--ff-base);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Header ----------------------------------------------- */
.hn-header {
    height: 56px;
    border-bottom: 1px solid var(--clr-gray-100);
    background: var(--clr-white);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 24px;
    flex-shrink: 0;
}
.hn-brand { display: flex; align-items: center; gap: 10px; }
.hn-brand__mark {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--clr-bg-primary);
    color: white;
    display: grid; place-items: center;
    font-family: var(--ff-secondary);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.hn-brand__name {
    font-family: var(--ff-secondary);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--clr-gray-900);
}
.hn-header__spacer { flex: 1; }
.hn-header__plan {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--clr-gray-200);
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-gray-700);
    white-space: nowrap;
}
.hn-header__plan .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clr-bg-primary); flex-shrink: 0; }
.hn-header__plan a { color: var(--clr-bg-primary-darker); text-decoration: none; font-weight: 600; margin-left: 4px; }
.hn-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, hsl(199 35% 65%), hsl(199 35% 45%));
    color: white;
    display: grid; place-items: center;
    font-family: var(--ff-secondary);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- Page main -------------------------------------------- */
.hn-main {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px 48px;
}
.hn-main--narrow {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.hn-pagehead {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 18px;
}
.hn-pagehead h1 {
    font-family: var(--ff-secondary);
    font-size: 22px;
    font-weight: 600;
    color: var(--clr-gray-900);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}
.hn-pagehead .count { font-size: 13px; color: var(--clr-gray-500); }
.hn-pagehead .spacer { flex: 1; }

/* Segmented toggle */
.hn-segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--clr-gray-100);
    border-radius: 8px;
    border: 1px solid var(--clr-gray-200);
}
.hn-segmented button {
    border: none;
    background: transparent;
    font-family: var(--ff-base);
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-gray-600);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
}
.hn-segmented button:hover { color: var(--clr-gray-900); }
.hn-segmented button.active {
    background: var(--clr-white);
    color: var(--clr-gray-900);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ---- Buttons ---------------------------------------------- */
.hn-btn {
    font-family: var(--ff-base);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--clr-gray-200);
    background: var(--clr-white);
    color: var(--clr-gray-800);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hn-btn:hover { background: var(--clr-gray-100); border-color: var(--clr-gray-300); color: var(--clr-gray-900); }
.hn-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.hn-btn--primary {
    background: var(--clr-bg-primary);
    border-color: var(--clr-bg-primary);
    color: white;
}
.hn-btn--primary:hover {
    background: hsl(36 100% 42%);
    border-color: hsl(36 100% 42%);
    color: white;
}
.hn-btn--ghost { border-color: transparent; background: transparent; color: var(--clr-gray-700); }
.hn-btn--ghost:hover { background: var(--clr-gray-100); color: var(--clr-gray-900); }
.hn-btn--danger-ghost { border-color: transparent; background: transparent; color: var(--clr-gray-500); }
.hn-btn--danger-ghost:hover { color: hsl(0 60% 50%); background: hsl(0 70% 96%); }
.hn-btn--fix { background: hsl(0 60% 50%); border-color: hsl(0 60% 50%); color: white; }
.hn-btn--fix:hover { background: hsl(0 60% 42%); border-color: hsl(0 60% 42%); color: white; }
.hn-btn--sm { padding: 5px 10px; font-size: 12px; }
.hn-btn--icon { padding: 6px 8px; }

/* ---- Pills ------------------------------------------------- */
.hn-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--ff-base);
    border: 1px solid transparent;
    line-height: 1.5;
}
.hn-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.hn-pill--ready { background: hsl(147 50% 95%); color: hsl(147 50% 28%); border-color: hsl(147 50% 80%); }
.hn-pill--ready .dot { background: hsl(147 60% 42%); }
.hn-pill--notready { background: hsl(30 75% 95%); color: hsl(30 70% 30%); border-color: hsl(30 75% 80%); }
.hn-pill--notready .dot { background: hsl(30 75% 50%); }
.hn-pill--private { color: var(--clr-gray-700); border-color: var(--clr-gray-200); background: var(--clr-white); }
.hn-pill--shared { color: hsl(199 40% 30%); border-color: hsl(199 30% 80%); background: hsl(199 30% 96%); }
.hn-pill--plus { color: hsl(36 80% 28%); border-color: hsl(36 90% 70%); background: hsl(36 100% 95%); font-weight: 600; }
.hn-pill--basic { color: var(--clr-gray-700); border-color: var(--clr-gray-200); background: var(--clr-gray-100); }

/* Status pill (with dot) */
.hn-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--ff-base);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}
.hn-status-pill.ready { background: hsl(147 50% 95%); color: hsl(147 50% 25%); border: 1px solid hsl(147 50% 80%); }
.hn-status-pill.ready .dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(147 60% 42%); }
.hn-status-pill.broken { background: hsl(0 70% 94%); color: hsl(0 60% 30%); border: 1px solid hsl(0 70% 80%); }
.hn-status-pill.warn { background: hsl(147 50% 95%); color: hsl(147 50% 25%); border: 1px solid hsl(147 50% 80%); }
.hn-status-pill.warn .dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(147 60% 42%); }

/* ---- Alert banner (inside cards) -------------------------- */
.hn-alert-banner {
    margin: -4px -2px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: hsl(0 70% 96%);
    border: 1px solid hsl(0 70% 88%);
    display: flex;
    gap: 8px;
    align-items: center;
    color: hsl(0 50% 30%);
    font-size: 12px;
    line-height: 1.4;
}
.hn-alert-banner.warn { background: hsl(36 100% 95%); border-color: hsl(36 90% 82%); color: hsl(36 80% 28%); }
.hn-alert-banner.info { background: hsl(214 100% 96%); border-color: hsl(214 80% 85%); color: hsl(214 60% 30%); }
.hn-alert-banner__icon { flex-shrink: 0; }
.hn-alert-banner__body { flex: 1; }
.hn-alert-banner__title { font-weight: 600; }
.hn-alert-banner__dismiss { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 2px 4px; font-size: 14px; line-height: 1; opacity: 0.5; color: inherit; }
.hn-alert-banner__dismiss:hover { opacity: 1; }

/* ---- Quick-create row ------------------------------------- */
.hn-quickcreate {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--clr-gray-200);
    border-radius: 12px;
    background: var(--clr-white);
    margin-bottom: 24px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    min-width: 0;
}
@media (max-width: 640px) {
    .hn-quickcreate .hn-quickcreate__hint,
    .hn-quickcreate .sep,
    .hn-quickcreate .hn-btn--ghost { display: none; }
    .hn-quickcreate input { min-width: 0; }
}
.hn-quickcreate__icon {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    color: var(--clr-gray-500);
    flex-shrink: 0;
}
.hn-quickcreate input {
    flex: 1;
    border: none;
    background: none;
    font-family: var(--ff-base);
    font-size: 14px;
    color: var(--clr-gray-900);
    padding: 6px 4px;
    outline: none;
}
.hn-quickcreate input::placeholder { color: var(--clr-gray-500); }
.hn-quickcreate .sep { width: 1px; height: 20px; background: var(--clr-gray-200); }
.hn-quickcreate__hint { font-size: 12px; color: var(--clr-gray-500); padding: 0 4px; }

/* ---- Hero card (featured project) ------------------------- */
.hn-hero {
    border: 1px solid var(--clr-gray-200);
    border-radius: 16px;
    background: var(--clr-white);
    display: grid;
    grid-template-columns: 1.1fr 1.5fr;
    overflow: hidden;
    margin-bottom: 24px;
    min-height: 220px;
}
.hn-hero__body {
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hn-hero__eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-gray-500);
}
.hn-hero__title {
    font-family: var(--ff-secondary);
    font-size: 26px;
    font-weight: 700;
    color: var(--clr-gray-900);
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0;
}
.hn-hero__desc {
    font-size: 13px;
    color: var(--clr-gray-700);
    line-height: 1.5;
    margin: 0;
}
.hn-hero__meta-row {
    display: flex; gap: 16px; font-size: 12px; color: var(--clr-gray-600); flex-wrap: wrap;
}
.hn-hero__meta-row strong { color: var(--clr-gray-900); font-weight: 600; margin-left: 4px; }
.hn-hero__pills { display: flex; gap: 6px; margin-top: 2px; }
.hn-hero__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.hn-hero__viz {
    background: linear-gradient(135deg, hsl(220 30% 96%), hsl(199 30% 94%));
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-gray-400);
}
.hn-hero__viz-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--clr-gray-400);
    font-size: 12px;
}
.hn-hero__viz-placeholder i { font-size: 48px; }

/* ---- Project card grid (3-up on laptop, 2-up on smaller) -- */
.hn-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) {
    .hn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hn-grid--featured-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .hn-grid, .hn-grid--featured-rest { grid-template-columns: 1fr; }
    .hn-hero { grid-template-columns: 1fr; }
    .hn-hero__viz { display: none; }
    .hn-nudge { flex-wrap: wrap; }
    .pn-header { padding: 0 12px; gap: 8px; }
    .pn-brand__name { display: none; }
    .pn-plan-pill .dot + span { display: none; }
}
/* Featured view: spotlight hero takes full width, remaining in 2-up grid */
.hn-grid--featured-rest {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* ---- Welcome / nudge banner -------------------------------- */
.hn-nudge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--clr-gray-100);
    background: linear-gradient(180deg, hsl(36 100% 98%), hsl(36 100% 96%));
    border-radius: 10px;
    margin-bottom: 20px;
}
.hn-nudge__icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--clr-bg-primary);
    color: white;
    display: grid; place-items: center;
    font-size: 14px;
    flex-shrink: 0;
}
.hn-nudge__body { flex: 1; line-height: 1.35; }
.hn-nudge__title { font-family: var(--ff-secondary); font-weight: 600; font-size: 14px; color: var(--clr-gray-900); }
.hn-nudge__sub { font-size: 13px; color: var(--clr-gray-700); margin-top: 2px; }
.hn-nudge__sub a { color: var(--clr-bg-primary-darker); font-weight: 600; text-decoration: none; }
.hn-nudge__close {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    color: var(--clr-gray-500); font-size: 14px; border-radius: 4px;
}
.hn-nudge__close:hover { background: hsl(36 100% 92%); }

/* ---- AddOn dismissable card ----------------------------- */
.hn-addon-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--clr-green-200, #bbf7d0);
    border-left: 3px solid #0F9D58;
    border-radius: 10px;
    padding: 14px 16px 14px 14px;
    margin: 12px 24px 0;
    position: relative;
}
.hn-addon-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.hn-addon-card__body { flex: 1; min-width: 0; }
.hn-addon-card__title {
    font-family: var(--ff-secondary);
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-gray-900);
    margin-bottom: 2px;
}
.hn-addon-card__sub {
    font-size: 12px;
    color: var(--clr-gray-600);
    margin-bottom: 10px;
}
.hn-addon-card__form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hn-addon-card__url-input {
    flex: 1;
    min-width: 200px;
    font-size: 12px;
    padding: 5px 10px;
    height: 30px;
}
.hn-addon-card__dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    color: var(--clr-gray-400);
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
}
.hn-addon-card__dismiss:hover { background: var(--clr-gray-100); color: var(--clr-gray-700); }

/* ---- State-aware project card (v4) ----------------------- */
.hn-card-v4 {
    position: relative;
    border: 1px solid var(--clr-gray-200);
    border-radius: 12px;
    background: var(--clr-white);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    color: inherit;
}
.hn-card-v4:hover { border-color: var(--clr-gray-300); box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
.hn-card-v4.is-broken {
    border-color: hsl(0 60% 75%);
    background: linear-gradient(180deg, hsl(0 70% 99%), var(--clr-white));
    box-shadow: 0 0 0 3px hsl(0 70% 70% / 0.10);
}
.hn-card-v4.is-broken:hover { border-color: hsl(0 60% 65%); box-shadow: 0 0 0 3px hsl(0 70% 70% / 0.18), 0 4px 16px rgba(0,0,0,0.05); }
.hn-card-v4.needs-attention { }
.hn-card-v4.needs-attention:hover { }

.hn-card-v4__top { display: flex; align-items: flex-start; gap: 12px; }
.hn-card-v4.is-broken .hn-card-v4__thumb { color: hsl(0 60% 50%); }
.hn-card-v4.needs-attention .hn-card-v4__thumb { }
.hn-card-v4__thumb {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, hsl(220 30% 96%), hsl(199 30% 94%));
    color: var(--clr-gray-400);
    display: grid; place-items: center;
    position: relative;
    font-size: 28px;
}
.hn-card-v4__plan {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    background: hsl(36 100% 94%); color: hsl(36 80% 28%);
    font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4;
    border: 1px solid hsl(36 90% 80%);
    white-space: nowrap;
}
.hn-card-v4__plan.is-basic { background: var(--clr-white); color: var(--clr-gray-600); border: 1px solid var(--clr-gray-200); }
.hn-card-v4__title-wrap { flex: 1; min-width: 0; }
.hn-card-v4__title {
    font-family: var(--ff-secondary);
    font-size: 15px; font-weight: 600; color: var(--clr-gray-900);
    margin: 0 0 4px; line-height: 1.25; letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hn-card-v4__desc {
    font-size: 12.5px; color: var(--clr-gray-600); line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hn-card-v4__statusrow {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 12px; color: var(--clr-gray-600);
}
.hn-card-v4__statusrow .sep { width: 3px; height: 3px; background: var(--clr-gray-300); border-radius: 50%; }
.hn-card-v4__meta {
    display: flex; gap: 14px;
    font-size: 11.5px; color: var(--clr-gray-500);
    border-top: 1px solid var(--clr-gray-100);
    padding-top: 10px;
}
.hn-card-v4__meta .meta-l { color: var(--clr-gray-500); }
.hn-card-v4__meta .meta-v { color: var(--clr-gray-800); margin-left: 4px; }
.meta-link { color: var(--clr-gray-500); text-decoration: none; font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.meta-link:hover { color: var(--clr-gray-800); text-decoration: underline; }
.hn-hero__meta-row .meta-link { color: var(--clr-gray-500); }
.hn-card-v4__actions { display: flex; gap: 6px; align-items: center; }
.hn-card-v4__actions .grow { flex: 1; }
.hn-btn--delete {
    color: var(--clr-gray-400); border-color: transparent; background: transparent;
}
.hn-btn--delete:hover { color: hsl(0 60% 50%); background: hsl(0 70% 97%); border-color: hsl(0 60% 88%); }

/* Share chip */
.hn-share-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--clr-gray-700); font-size: 12px; font-weight: 500; }
.hn-share-chip.is-shared { color: hsl(199 40% 32%); }

/* Create new card */
.hn-card-v4--create {
    border: 1.5px dashed var(--clr-gray-300);
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 24px;
    min-height: 160px;
}
.hn-card-v4--create:hover { border-color: var(--clr-bg-primary); color: var(--clr-bg-primary-darker); background: hsl(36 100% 98%); }
.hn-card-v4--create .plus { font-size: 20px; }

/* ---- Empty state ------------------------------------------ */
.hn-empty {
    border: 1.5px dashed var(--clr-gray-200);
    border-radius: 16px;
    padding: 56px 32px;
    text-align: center;
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
    background: hsl(0 0% 99%);
}
.hn-empty__icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    display: grid; place-items: center; color: var(--clr-gray-500); font-size: 22px;
}
.hn-empty__title { font-family: var(--ff-secondary); font-size: 18px; font-weight: 600; color: var(--clr-gray-900); }
.hn-empty__desc { font-size: 13.5px; color: var(--clr-gray-600); max-width: 440px; line-height: 1.5; }
.hn-empty__cta { margin-top: 6px; }

/* ---- Nudge banner ----------------------------------------- */
.hn-nudge {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--clr-gray-100);
    background: linear-gradient(180deg, hsl(36 100% 98%), hsl(36 100% 96%));
    border-radius: 10px;
    margin-bottom: 20px;
}
.hn-nudge__icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--clr-bg-primary); color: white;
    display: grid; place-items: center; font-size: 14px; flex-shrink: 0;
}
.hn-nudge__body { flex: 1; line-height: 1.35; }
.hn-nudge__title { font-family: var(--ff-secondary); font-weight: 600; font-size: 14px; color: var(--clr-gray-900); }
.hn-nudge__sub { font-size: 13px; color: var(--clr-gray-700); margin-top: 2px; }
.hn-nudge__sub a { color: var(--clr-bg-primary-darker); font-weight: 600; text-decoration: none; }
.hn-nudge__close { background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--clr-gray-500); font-size: 14px; border-radius: 4px; }
.hn-nudge__close:hover { background: hsl(36 100% 92%); }

/* =============================================================
   PROJECT PAGE COMPONENTS  (pn-*)
   Shell, rail nav, section cards, banners, form controls,
   and chart chrome for the 5 in-project pages.
   ============================================================= */

/* ---- Project shell layout --------------------------------- */
.pn-shell {
    height: 100%;
    width: 100%;
    background: var(--clr-white);
    color: var(--clr-gray-900);
    font-family: var(--ff-base);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pn-shell__body { flex: 1; display: flex; min-height: 0; }

/* ---- Top header ------------------------------------------- */
.pn-header {
    height: 56px;
    border-bottom: 1px solid var(--clr-gray-100);
    background: var(--clr-white);
    display: flex;
    align-items: center;
    padding: 0 20px 0 24px;
    gap: 14px;
    flex-shrink: 0;
}
.pn-header .pn-brand { display: flex; align-items: center; gap: 10px; }
.pn-header .pn-brand__mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--clr-bg-primary); color: white;
    display: grid; place-items: center;
    font-family: var(--ff-secondary); font-weight: 700; font-size: 13px;
    flex-shrink: 0;
}
.pn-header .pn-brand__name {
    font-family: var(--ff-secondary); font-size: 17px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--clr-gray-900);
}
.pn-header .pn-crumbs {
    display: flex; align-items: center; gap: 6px;
    margin-left: 4px; font-size: 13px; color: var(--clr-gray-500);
}
.pn-header .pn-crumbs .sep { color: var(--clr-gray-300); font-weight: 300; }
.pn-header .pn-crumbs a {
    color: var(--clr-gray-600); text-decoration: none;
    padding: 4px 8px; border-radius: 6px;
}
.pn-header .pn-crumbs a:hover { background: var(--clr-gray-100); color: var(--clr-gray-900); }
.pn-header .pn-crumbs .here {
    color: var(--clr-gray-900); font-weight: 600;
    padding: 4px 8px; display: inline-flex; align-items: center; gap: 6px;
}
.pn-header .pn-crumbs .here .caret { color: var(--clr-gray-400); font-size: 11px; }
.pn-header .pn-crumbs .here button.caret { background: none; border: 0; padding: 0 2px; cursor: pointer; }
.pn-header .pn-crumbs .here button.caret:hover { color: var(--clr-gray-700); }
/* Pencil next to an inline-editable name (see .pn-inline-name below) */
.pn-inline-edit-btn {
    background: none; border: 0; padding: 0 2px; margin-left: 2px; cursor: pointer;
    color: var(--clr-gray-400); font-size: 11px; line-height: 1;
}
.pn-inline-edit-btn:hover { color: var(--clr-gray-700); }
/* Project name shown as plain text that becomes editable on click (inline-edit controller) */
.pn-inline-name {
    border: 0; background: none; padding: 1px 4px; margin: 0 -4px; font: inherit; color: inherit;
    outline: none; cursor: text; border-radius: 4px; field-sizing: content; min-width: 3ch; max-width: 40vw;
}
.pn-inline-name[readonly]:hover { background: var(--clr-gray-100); }
.pn-inline-name:not([readonly]) { background: #fff; box-shadow: 0 0 0 1px var(--clr-gray-400); }
.pn-header .spacer { flex: 1; }
.pn-header .pn-plan-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--clr-gray-200);
    font-size: 12px; font-weight: 500; color: var(--clr-gray-700); white-space: nowrap;
}
.pn-header .pn-plan-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clr-bg-primary); }
.pn-header .pn-plan-pill a { color: var(--clr-bg-primary-darker); text-decoration: none; font-weight: 600; margin-left: 4px; }
.pn-header .pn-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, hsl(199 35% 65%), hsl(199 35% 45%));
    color: white; display: grid; place-items: center;
    font-family: var(--ff-secondary); font-weight: 600; font-size: 12px; cursor: pointer;
}
.pn-header .pn-nav-tabs {
    display: flex; align-items: center; gap: 2px; margin-left: 4px;
}
.pn-header .pn-nav-tabs a {
    font-size: 13px; font-weight: 500; color: var(--clr-gray-600);
    text-decoration: none; padding: 6px 10px; border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}
.pn-header .pn-nav-tabs a:hover { background: var(--clr-gray-100); color: var(--clr-gray-900); }
.pn-header .pn-nav-tabs a.active { background: var(--clr-gray-100); color: var(--clr-gray-900); font-weight: 600; }

/* ---- Left rail -------------------------------------------- */
.pn-rail {
    width: 220px;
    border-right: 1px solid var(--clr-gray-100);
    background: hsl(0 0% 99%);
    display: flex; flex-direction: column; flex-shrink: 0;
    padding: 14px 12px;
    transition: width 0.18s ease;
    position: relative;
    overflow: visible;
}
.pn-rail--collapsed { width: 60px; padding: 14px 8px; }
.pn-rail--collapsed .pn-rail__project-body,
.pn-rail--collapsed .pn-rail__switcher,
.pn-rail--collapsed .pn-rail__heading,
.pn-rail--collapsed .pn-nav__label,
.pn-rail--collapsed .pn-rail__back-label { display: none; }
.pn-rail--collapsed .pn-rail__project { padding: 4px; justify-content: center; margin-bottom: 10px; }
.pn-rail--collapsed .pn-rail__project-mark { width: 32px; height: 32px; }
.pn-rail--collapsed .pn-nav__item { justify-content: center; padding: 8px 0; position: relative; }
.pn-rail--collapsed .pn-rail__back { justify-content: center; padding: 6px; }
.pn-rail--collapsed .pn-nav__badge {
    position: absolute; top: 5px; right: 8px;
    box-shadow: 0 0 0 2px hsl(0 0% 99%);
}

/* Collapse toggle button */
.pn-rail__toggle {
    position: absolute; top: 50%; right: -10px; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    color: var(--clr-gray-500); font-size: 9px;
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    z-index: 2;
    transition: color 0.15s, border-color 0.15s;
    padding: 0;
}
.pn-rail__toggle:hover { color: var(--clr-gray-900); border-color: var(--clr-gray-300); }
.pn-rail--collapsed .pn-rail__toggle { transform: translateY(-50%) rotate(180deg); }

/* Tooltip on hover when collapsed */
.pn-rail--collapsed .pn-nav__item[data-label]:hover::after,
.pn-rail--collapsed .pn-rail__back[data-label]:hover::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--clr-gray-900); color: white;
    font-family: var(--ff-base); font-size: 11.5px; font-weight: 500;
    padding: 4px 8px; border-radius: 6px;
    white-space: nowrap; pointer-events: none; z-index: 20;
}

/* Project switcher block */
.pn-rail__project {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; margin-bottom: 14px; cursor: pointer;
}
.pn-rail__project:hover { background: var(--clr-gray-100); }
.pn-rail__project-mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    display: grid; place-items: center; color: hsl(199 35% 45%); flex-shrink: 0;
    font-size: 14px;
}
.pn-rail__project-body { min-width: 0; flex: 1; }
.pn-rail__project-name {
    font-family: var(--ff-secondary); font-weight: 700; font-size: 13.5px;
    color: var(--clr-gray-900); line-height: 1.2; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-rail__project-sub { font-size: 11px; color: var(--clr-gray-500); margin-top: 2px; }
.pn-rail__switcher { color: var(--clr-gray-400); flex-shrink: 0; font-size: 12px; }

.pn-rail__heading {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 600; color: var(--clr-gray-500);
    padding: 0 10px; margin: 8px 0 6px;
}

/* Nav items */
.pn-nav { display: flex; flex-direction: column; gap: 1px; }
.pn-nav__item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 7px;
    font-size: 13px; font-weight: 500; color: var(--clr-gray-700);
    text-decoration: none; cursor: pointer;
    border: none; background: none; text-align: left; width: 100%;
    font-family: var(--ff-base); line-height: 1.25;
}
.pn-nav__item:hover { background: var(--clr-gray-100); color: var(--clr-gray-900); }
.pn-nav__item.active {
    background: var(--clr-white); color: var(--clr-gray-900); font-weight: 600;
    box-shadow: 0 0 0 1px var(--clr-gray-200), 0 1px 2px rgba(0,0,0,0.04);
}
.pn-nav__icon {
    color: var(--clr-gray-500); flex-shrink: 0;
    width: 16px; height: 16px; display: grid; place-items: center; font-size: 15px;
}
.pn-nav__item.active .pn-nav__icon { color: var(--clr-bg-primary-darker); }
.pn-nav__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-nav__badge {
    width: 7px; height: 7px; border-radius: 50%;
    background: hsl(0 60% 55%); flex-shrink: 0;
}
.pn-nav__badge.warn { background: hsl(36 80% 55%); }

/* Rail footer */
.pn-rail__footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--clr-gray-100); }
.pn-rail__back {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 6px;
    font-size: 12px; color: var(--clr-gray-600); text-decoration: none;
}
.pn-rail__back:hover { background: var(--clr-gray-100); color: var(--clr-gray-900); }
.pn-rail__back-icon { flex-shrink: 0; }

/* ---- Page content area ------------------------------------ */
.pn-page {
    flex: 1;
    overflow-y: auto;
    background: hsl(0 0% 99.5%);
}
.pn-page__inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 28px 32px 64px;
}
.pn-page__inner--wide { max-width: 1180px; }

/* Chart page: full-bleed, no scroll */
.pn-page--chart {
    background: var(--clr-white);
    overflow: hidden;
    position: relative;
}
.pn-page--chart .chart-container,
.pn-page--chart .chart-container--config {
    height: 100%;
}
/* Nudge banner floats over the chart; chart-container height is unaffected */
.pn-page--chart .hn-alert-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* ---- Directory -------------------------------------------- */
.pn-page--directory {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.dr-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.dr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--clr-gray-200);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}
.dr-toolbar__left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.dr-toolbar__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--clr-gray-700);
    white-space: nowrap;
}
.dr-toolbar__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.dr-search {
    display: flex; align-items: center; gap: 6px;
    background: var(--clr-gray-50); border: 1px solid var(--clr-gray-200); border-radius: 6px;
    padding: 4px 10px; flex: 1; max-width: 320px;
}
.dr-search__icon { font-size: 12px; color: var(--clr-gray-400); flex-shrink: 0; }
.dr-search__input {
    border: none; background: none; outline: none;
    font-size: 13px; color: var(--clr-gray-800); width: 100%;
}
.dr-search__input::placeholder { color: var(--clr-gray-400); }
.dr-layout-toggle { display: flex; gap: 2px; }
.dr-layout-btn {
    border: none; background: none; color: var(--clr-gray-500);
    width: 28px; height: 28px; border-radius: 5px; display: grid; place-items: center; cursor: pointer; font-size: 14px;
}
.dr-layout-btn:hover { background: var(--clr-gray-100); color: var(--clr-gray-800); }
.dr-layout-btn.active { background: var(--clr-gray-200); color: var(--clr-gray-900); }
.dr-table-wrapper { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; }
.dr-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.dr-table th {
    text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--clr-gray-500);
    border-bottom: 1px solid var(--clr-gray-200); padding: 6px 12px;
}
.dr-table td { padding: 8px 12px; border-bottom: 1px solid var(--clr-gray-100); vertical-align: middle; }
/* Overrides site.css's global `tr:hover` rule (background/color, both !important) that
   otherwise applies to every table row on the site, including this one — more specific
   selector wins even against another !important declaration. Deliberately scoped here
   rather than touching the global rule, since other tables elsewhere may depend on it.
   Targets the <tr> itself, not its <td> children: the global rule sets its background on
   the row element, not the cells, so overriding the cells with `inherit` was a no-op — it
   just pulled the same unwanted color back down from the still-affected parent <tr>. */
.dr-table__row:hover { background-color: transparent !important; color: inherit !important; }
/* Header row hits the same global site.css rule — it's a plain, unclassed <tr> inside
   <thead>, so .dr-table__row's override above doesn't reach it. Headers aren't
   interactive/clickable at all, so it needs no hover state whatsoever, not even the
   directory's own selected/hover styling. */
.dr-table thead tr:hover { background-color: transparent !important; color: inherit !important; }
.dr-table__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: #e0e0e0; color: #555;
    font-size: 11px; font-weight: 700; margin-right: 8px; flex-shrink: 0; vertical-align: middle;
    overflow: hidden;
}
.dr-table__avatar--photo { position: relative; overflow: visible; }
.dr-table__avatar--photo > img {
    border-radius: var(--config-node-profile-image-border-radius, 50%);
    border-width: var(--config-node-profile-image-border-width, 0px);
    border-style: var(--config-node-profile-image-border-style, solid);
    border-color: var(--config-node-profile-image-border-color, transparent);
    width: 100%; height: 100%; object-fit: cover;
}
.dr-table__avatar-hover {
    display: none; position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
    z-index: 20; width: 80px; height: 80px;
    border-radius: var(--config-node-profile-image-border-radius, 50%); overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 2px solid #fff; pointer-events: none;
}
.dr-table__avatar-hover img {
    border-radius: var(--config-node-profile-image-border-radius, 50%);
    border-width: var(--config-node-profile-image-border-width, 0px);
    border-style: var(--config-node-profile-image-border-style, solid);
    border-color: var(--config-node-profile-image-border-color, transparent);
    width: 100%; height: 100%; object-fit: cover;
}
.dr-table__avatar--photo:hover .dr-table__avatar-hover { display: block; }
.dr-table__name { vertical-align: middle; font-weight: 500; }
.dr-table td a { color: var(--clr-primary, #4a6cf7); text-decoration: none; }
.dr-table td a:hover { text-decoration: underline; }
.dr-no-results { padding: 24px; text-align: center; color: var(--clr-gray-500); font-size: 13px; }
.dr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--clr-gray-100);
    background: var(--clr-bg, #fff);
    font-size: 12px;
    flex-shrink: 0;
}
.dr-legend__dim { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-legend__name { font-weight: 600; color: var(--clr-gray-500); white-space: nowrap; }
.dr-legend__item { display: flex; align-items: center; gap: 4px; }
.dr-legend__swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.08); }
.dr-legend__swatch--border { width: 4px; height: 14px; border-radius: 1px; border: none; }
.dr-legend__swatch--border-style { display: inline-block; width: 0; height: 14px; flex-shrink: 0; border-left-color: var(--clr-gray-600); }
.dr-legend__label { color: var(--clr-gray-700); white-space: nowrap; }

/* Spotlight used by the animated /demo-directory/ walkthrough to call out whichever section
   it's currently demoing — same yellow as the walkthrough panel's own .demo-animating state.
   !important because this is applied to arbitrary existing elements (.dp-panel, .dr-grid,
   toolbar controls, ...) that already carry their own box-shadow at equal specificity. */
.dr-demo-spotlight {
    outline: 3px solid #ffc107 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.25) !important;
    border-radius: 8px;
    transition: outline-color 0.3s ease, box-shadow 0.3s ease;
}

.dr-grid {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    align-content: start;
    align-items: start;
}
.dr-card {
    cursor: pointer;
    transition: box-shadow 0.12s;
    min-width: 0;
}
.dr-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.dr-card--selected { outline: 2px solid var(--config-chart-highlight-color, #E27396); outline-offset: 1px; }
.dr-card .node--body { cursor: pointer; width: 100%; box-sizing: border-box; border: 1px solid var(--clr-neutral-darker); border-radius: 0.3rem; }
.dr-table__row { cursor: pointer; }
/* Right side, not left — the layers feature already owns border-left on the first cell for
   its own color-coding, and a same-property !important there would always win, hiding
   whichever layer color the row has whenever it's selected (arrow-key browsing selects many
   rows in quick succession, so this was far more noticeable than it used to be with mouse-
   only clicks). Right-border-on-last-cell is the same proven mechanism, just the other side. */
/* box-shadow, not border-right: this table uses border-collapse (see .dr-table above),
   where a cell's own border can fail to render reliably once toggled dynamically via a
   class — box-shadow isn't part of the border/collapse model at all, so it sidesteps that
   whole class of issue regardless of the exact cause. inset positions it at the cell's own
   right edge, mimicking a 3px border without being one. */
.dr-table__row--selected td:last-child { box-shadow: inset -3px 0 0 0 var(--config-chart-highlight-color, #E27396) !important; }
.dr-table__row--selected td { background-color: rgba(0,0,0,0.03) !important; }
/* Unlike .dr-card--selected (which sets outline directly on .dr-card, the same element that
   receives focus, so it naturally overrides the browser default), every rule above targets
   the <td> children, never the <tr> itself — the element focus actually lands on. That left
   the browser's own default all-around focus outline completely unmanaged on the row,
   dwarfing the layer/selected borders on the cells peeking out from under it. */
.dr-table__row:focus-visible { outline: none; }
/* Directory profile panel — inline flex sibling (same pattern as chart-body .dp-host) */
.dr-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.dr-shell .dp-panel {
    width: 380px;
    height: 100%;
}
.dr-error, .dr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 12px;
    color: var(--clr-gray-500);
    padding: 40px;
    text-align: center;
}
@media (prefers-color-scheme: dark) {
    .dr-card { background: var(--clr-bg-neutral); border-color: var(--clr-gray-700); }
    .dr-toolbar { border-color: var(--clr-gray-700); }
}

/* ---- Page head -------------------------------------------- */
.pn-pagehead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.pn-pagehead__main { flex: 1; min-width: 0; }
.pn-pagehead__eyebrow {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--clr-gray-500); margin-bottom: 4px;
}
.pn-pagehead__title {
    font-family: var(--ff-secondary); font-size: 22px; font-weight: 700;
    color: var(--clr-gray-900); letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 4px;
}
.pn-pagehead__sub {
    font-size: 13px; color: var(--clr-gray-600); line-height: 1.5; margin: 0; max-width: 620px;
}
.pn-pagehead__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; margin-top: 2px; }

/* ---- Section card ----------------------------------------- */
.pn-section {
    background: var(--clr-white);
    border: 1px solid var(--clr-gray-200);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}
.pn-section__head {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--clr-gray-100);
}
.pn-section__head--bare { border-bottom: none; padding-bottom: 8px; }
.pn-section__icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--clr-gray-100); color: var(--clr-gray-600);
    display: grid; place-items: center; flex-shrink: 0; font-size: 15px;
}
.pn-section__title-wrap { flex: 1; min-width: 0; }
.pn-section__title {
    font-family: var(--ff-secondary); font-size: 15px; font-weight: 700;
    color: var(--clr-gray-900); line-height: 1.3; margin: 0 0 2px; letter-spacing: -0.005em;
}
.pn-section__sub { font-size: 12.5px; color: var(--clr-gray-600); line-height: 1.45; margin: 0; }
.pn-section__action { flex-shrink: 0; }
.pn-section__body { padding: 18px 20px; }
.pn-section__body--tight { padding: 14px 20px; }
.pn-section__body--bare { padding: 0; }

/* Danger variant */
.pn-section--danger {
    border-color: hsl(0 60% 88%);
    background: linear-gradient(180deg, hsl(0 70% 99%), var(--clr-white));
}
.pn-section--danger .pn-section__head { border-bottom-color: hsl(0 60% 92%); }
.pn-section--danger .pn-section__icon { background: hsl(0 70% 95%); color: hsl(0 60% 45%); }

/* ---- Status banners --------------------------------------- */
.pn-banner {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px; border-radius: 10px; border: 1px solid;
    font-size: 13px; line-height: 1.5; margin-bottom: 18px;
}
.pn-banner__icon { flex-shrink: 0; margin-top: 1px; width: 18px; height: 18px; display: grid; place-items: center; font-size: 15px; }
.pn-banner__body { flex: 1; min-width: 0; }
.pn-banner__title { font-weight: 600; font-family: var(--ff-secondary); }
.pn-banner__detail { font-size: 12.5px; opacity: 0.92; margin-top: 2px; }
.pn-banner__actions { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; }
.pn-banner--broken { background: hsl(0 70% 97%); border-color: hsl(0 70% 88%); color: hsl(0 50% 30%); }
.pn-banner--warn { background: hsl(36 100% 96%); border-color: hsl(36 90% 82%); color: hsl(36 80% 28%); }
.pn-banner--info { background: hsl(199 30% 96%); border-color: hsl(199 30% 84%); color: hsl(199 40% 28%); }

/* ---- OAuth authorization context card ------------------- */
.pn-auth-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-gray-200);
    border-left: 3px solid var(--clr-bg-primary);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pn-auth-card__title {
    font-family: var(--ff-secondary);
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-gray-900);
    display: flex;
    align-items: center;
    gap: 7px;
}
.pn-auth-card__detail p {
    font-size: 13px;
    color: var(--clr-gray-700);
    margin: 0 0 10px;
    line-height: 1.5;
}
.pn-auth-card__created {
    font-size: 12.5px;
    color: var(--clr-gray-500);
    margin-bottom: 6px !important;
}
.pn-auth-card__detail p a { color: hsl(220 80% 50%); }
.pn-auth-card__expect {
    font-size: 12.5px;
    color: var(--clr-gray-600);
    background: var(--clr-gray-50, #f9fafb);
    border: 1px solid var(--clr-gray-200);
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.45;
}
.pn-auth-card__expect i { margin-top: 2px; flex-shrink: 0; color: var(--clr-bg-primary-dark); }
.pn-auth-card__privacy {
    font-size: 11px;
    color: var(--clr-gray-500);
    display: flex;
    align-items: center;
    gap: 5px;
}
.pn-auth-card__privacy i { color: hsl(147 50% 40%); }

/* Auto-dismissing flash messages */
.pn-flash { animation: pn-flash-out 0.4s ease 3.5s forwards; }
@keyframes pn-flash-out { to { opacity: 0; max-height: 0; margin: 0; padding: 0; overflow: hidden; } }
.pn-banner--ready { background: hsl(147 50% 96%); border-color: hsl(147 50% 82%); color: hsl(147 50% 26%); }

/* ---- Definition list -------------------------------------- */
.pn-deflist {
    display: grid; grid-template-columns: 180px 1fr;
    row-gap: 12px; column-gap: 16px; font-size: 13px; align-items: baseline;
}
.pn-deflist dt { color: var(--clr-gray-600); font-weight: 500; line-height: 1.45; }
.pn-deflist dd { margin: 0; color: var(--clr-gray-900); line-height: 1.45; }
.pn-deflist dd .muted { color: var(--clr-gray-500); }

/* ---- Form controls ---------------------------------------- */
.pn-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pn-field__label {
    font-size: 12px; font-weight: 600; color: var(--clr-gray-800);
    letter-spacing: 0.005em; display: flex; align-items: center; gap: 6px;
}
.pn-field__label .hint { color: var(--clr-gray-500); font-weight: 400; }
.pn-input, .pn-select, .pn-textarea {
    font-family: var(--ff-base); font-size: 13px; color: var(--clr-gray-900);
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    border-radius: 8px; padding: 8px 12px; outline: none; line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pn-input:focus, .pn-select:focus, .pn-textarea:focus {
    border-color: var(--clr-bg-primary);
    box-shadow: var(--shadow-focus);
}
.pn-input::placeholder { color: var(--clr-gray-400); }
.pn-input--mono { font-family: var(--ff-mono); font-size: 12.5px; }
.pn-input--readonly { background: var(--clr-gray-100); color: var(--clr-gray-700); }
.pn-textarea { resize: vertical; min-height: 80px; }
.pn-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px;
}
.pn-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--clr-gray-800); cursor: pointer; }
/* Matches .visual-layers-checkbox's accent color -- var(--clr-bg-primary) is
   the app's orange brand color, which doesn't match how checkboxes/radios
   are styled anywhere else in the product. */
.pn-checkbox input { accent-color: #4285F4; width: 15px; height: 15px; cursor: pointer; }
.pn-field__row { display: flex; align-items: center; gap: 10px; }
.pn-field__row .grow { flex: 1; }
.pn-help { font-size: 12px; color: var(--clr-gray-500); line-height: 1.5; }
.pn-help a { color: var(--clr-bg-primary-darker); font-weight: 500; text-decoration: none; }

/* ---- Stat tiles (Project Home) ---------------------------- */
.pn-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.pn-stat-tile {
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    border-radius: 12px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.pn-stat-tile__label { font-size: 11.5px; color: var(--clr-gray-500); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.pn-stat-tile__value { font-family: var(--ff-secondary); font-size: 22px; font-weight: 700; color: var(--clr-gray-900); letter-spacing: -0.01em; line-height: 1.2; }
.pn-stat-tile__sub { font-size: 11.5px; color: var(--clr-gray-500); }

/* ---- Plan card (subscription section) --------------------- */
.pn-plan-card { display: flex; align-items: center; gap: 16px; padding: 14px 4px 4px; }
.pn-plan-card__badge {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, hsl(36 100% 60%), hsl(36 100% 48%));
    color: white; display: grid; place-items: center;
    font-family: var(--ff-secondary); font-weight: 800; font-size: 14px; letter-spacing: 0.04em;
    flex-shrink: 0; box-shadow: 0 2px 8px hsl(36 80% 50% / 0.25);
}
.pn-plan-card__badge.is-basic {
    background: linear-gradient(135deg, hsl(0 0% 75%), hsl(0 0% 50%));
    box-shadow: 0 2px 8px hsl(0 0% 0% / 0.10);
}
.pn-plan-card__name { font-family: var(--ff-secondary); font-size: 15px; font-weight: 700; color: var(--clr-gray-900); line-height: 1.3; }
.pn-plan-card__detail { font-size: 12.5px; color: var(--clr-gray-600); margin-top: 2px; }

/* ---- Code / URL field ------------------------------------- */
/* Inline plan requirement badge — shown next to locked controls */
/* Plan badge — consistent chip used everywhere a plan name appears */
.pn-plan-badge {
    display: inline-flex; align-items: center;
    font-size: 11.5px; font-weight: 700;
    border-radius: 6px; padding: 2px 9px; white-space: nowrap; vertical-align: middle;
    border: 1px solid transparent;
}
.pn-plan-badge--basic   { background: var(--clr-gray-100); color: var(--clr-gray-600); border-color: var(--clr-gray-200); }
.pn-plan-badge--plus    { background: hsl(220 100% 95%); color: hsl(220 70% 40%); border-color: hsl(220 80% 85%); }
.pn-plan-badge--volume  { background: hsl(150 60% 94%); color: hsl(150 60% 26%); border-color: hsl(150 50% 80%); }
.pn-plan-badge--trial   { background: hsl(36 100% 94%); color: hsl(36 80% 28%); border-color: hsl(36 90% 80%); }
.pn-plan-badge__detail  { font-size: 12px; color: var(--clr-gray-500); font-weight: 400; margin-left: 6px; }

/* Feature gate chip — reuses plan badge colours when a plan class is added */
.pn-plan-gate {
    display: inline-flex; align-items: center;
    font-size: 11.5px; font-weight: 600; color: var(--clr-gray-700);
    background: var(--clr-gray-100); border: 1px solid var(--clr-gray-200);
    border-radius: 6px; padding: 2px 8px; white-space: nowrap;
    vertical-align: middle;
}
.pn-plan-gate.pn-plan-gate--standard { background: hsl(36 100% 94%); color: hsl(36 80% 28%); border-color: hsl(36 90% 80%); }
.pn-plan-gate.pn-plan-gate--plus     { background: hsl(220 100% 95%); color: hsl(220 70% 40%); border-color: hsl(220 80% 85%); }

.pn-codefield {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--clr-gray-200); border-radius: 8px;
    background: var(--clr-gray-100);
    font-family: var(--ff-mono); font-size: 12.5px; color: var(--clr-gray-800);
}
.pn-codefield code { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit; }
.pn-codefield button {
    flex-shrink: 0; border: 1px solid var(--clr-gray-200); background: var(--clr-white);
    color: var(--clr-gray-700); font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: var(--ff-base);
}
.pn-codefield button:hover { color: var(--clr-gray-900); border-color: var(--clr-gray-300); }

/* ---- Sharing user list ------------------------------------ */
.pn-share-list { display: flex; flex-direction: column; border: 1px solid var(--clr-gray-200); border-radius: 10px; overflow: hidden; }
.pn-share-list__empty { padding: 20px; text-align: center; color: var(--clr-gray-500); font-size: 13px; background: hsl(0 0% 99%); }
.pn-share-list__row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--clr-gray-100);
}
.pn-share-list__row:last-child { border-bottom: none; }
.pn-share-list__row:hover { background: hsl(0 0% 99%); }
.pn-share-list__avatar {
    width: 30px; height: 30px; border-radius: 50%; color: white;
    display: grid; place-items: center;
    font-family: var(--ff-secondary); font-weight: 600; font-size: 11px; flex-shrink: 0;
}
.pn-share-list__main { flex: 1; min-width: 0; }
.pn-share-list__name { font-size: 13.5px; font-weight: 600; color: var(--clr-gray-900); line-height: 1.3; }
.pn-share-list__email { font-size: 12px; color: var(--clr-gray-500); margin-top: 1px; }
.pn-share-list__role { font-size: 12px; color: var(--clr-gray-600); flex-shrink: 0; }

/* Share input row */
.pn-share-input { display: flex; gap: 8px; align-items: stretch; }
.pn-share-input input {
    flex: 1; font-family: var(--ff-base); font-size: 13px;
    border: 1px solid var(--clr-gray-200); border-radius: 8px; padding: 8px 12px; outline: none;
}
.pn-share-input input:focus { border-color: var(--clr-bg-primary); box-shadow: var(--shadow-focus); }

/* General access row */
.pn-access-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--clr-gray-200); border-radius: 10px; background: var(--clr-white);
}
.pn-access-row__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--clr-gray-100); color: var(--clr-gray-700); display: grid; place-items: center; flex-shrink: 0; font-size: 15px; }
.pn-access-row__main { flex: 1; min-width: 0; }
.pn-access-row__title { font-size: 13.5px; font-weight: 600; color: var(--clr-gray-900); line-height: 1.3; }
.pn-access-row__sub { font-size: 12px; color: var(--clr-gray-600); margin-top: 2px; line-height: 1.4; }

/* ---- Chart page chrome ------------------------------------ */
.pn-chart-canvas {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 40%, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 60%, hsl(0 0% 95%) 100%);
    overflow: hidden;
}
.pn-chart-canvas__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, hsl(0 0% 90% / 0.5) 1px, transparent 1px),
        linear-gradient(to bottom, hsl(0 0% 90% / 0.5) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none; opacity: 0.5; z-index: 0;
}
.pn-chart-toolbar {
    position: absolute; bottom: 20px; left: 0; right: 0; width: fit-content; margin: 0 auto;
    background: var(--clr-white); border: 1px solid var(--clr-gray-200); border-radius: 10px;
    padding: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    display: flex; gap: 2px; align-items: center; z-index: 10;
}
.pn-chart-toolbar button,
.pn-chart-toolbar .pn-chart-toolbar__btn {
    border: none; background: none; color: var(--clr-gray-700); text-decoration: none;
    width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; font-size: 14px;
}
.pn-chart-toolbar button:hover,
.pn-chart-toolbar .pn-chart-toolbar__btn:hover { background: var(--clr-gray-100); color: var(--clr-gray-900); }
.pn-chart-toolbar button.active,
.pn-chart-toolbar button[data-btn-toggle-on="true"] { background: hsl(199 30% 94%); color: hsl(199 40% 30%); }
.pn-chart-toolbar .sep { width: 1px; height: 18px; background: var(--clr-gray-200); margin: 0 2px; }
.pn-chart-toolbar .pn-zoom { font-size: 12px; color: var(--clr-gray-700); padding: 0 8px; min-width: 44px; text-align: center; }
/* Keyboard focus indicators for elements made focusable for accessibility.
   box-shadow (not outline) is used on the chart nodes/expander since they render
   inside SVG foreignObjects, where an outline can be clipped at the element's bounds. */
/* No custom focus ring here — the chart's own highlight styling (nodeUpdate's
   stroke/fill, driven by the appearance-config highlight color) already shows exactly
   which node keyboard navigation is on, since arrow/Enter navigation always highlights
   as it moves. A second ring would just double up on the same information. Suppress the
   browser's default outline too, or it'd reintroduce the same redundancy. */
.node--body:focus-visible {
    outline: none;
}
/* No custom focus ring here (same reasoning as the org chart canvas's .node--body): arrow-
   key movement always selects as it moves now, so .dr-card--selected / .dr-table__row--
   selected already show exactly which card keyboard navigation is on. A separate ring here
   would actively conflict, not just duplicate — .dr-card--selected uses `outline`, and a
   :focus-visible rule on the same property has higher specificity, so it would silently
   override the selected-state outline whenever both apply (which arrow-key movement means
   they always do). The browser's own default focus indicator still applies in the brief
   window before a card is ever selected (e.g. tabbing in without having navigated yet). */
.pn-fab {
    position: absolute; bottom: 20px; right: 20px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--clr-white); border: 1px solid var(--clr-gray-200); color: var(--clr-gray-700);
    display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: transform 0.15s; font-size: 18px; z-index: 10;
}
.pn-fab:hover { color: var(--clr-bg-primary-darker); }
.pn-fab:active { transform: scale(0.95); }
.pn-chart-error {
    position: absolute; inset: 0; display: grid; place-items: center; padding: 40px;
}
.pn-chart-error__card {
    background: var(--clr-white); border: 1px solid hsl(0 70% 88%); border-radius: 14px;
    padding: 28px 32px; max-width: 520px; text-align: center;
    box-shadow: 0 0 0 3px hsl(0 70% 70% / 0.08);
}
.pn-chart-error__icon {
    width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 16px;
    background: hsl(0 70% 95%); color: hsl(0 60% 45%);
    display: grid; place-items: center; font-size: 24px;
}
.pn-chart-error__title { font-family: var(--ff-secondary); font-size: 18px; font-weight: 700; color: var(--clr-gray-900); letter-spacing: -0.01em; margin: 0 0 6px; }
.pn-chart-error__detail { font-size: 13px; color: var(--clr-gray-600); line-height: 1.55; margin: 0 0 18px; }
.pn-chart-error__actions { display: flex; gap: 10px; justify-content: center; }

/* ---- Setup two-column layout ------------------------------ */
.pn-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.pn-setup-grid .pn-section { margin-bottom: 0; }
.pn-sticky-preview { position: sticky; top: 20px; }

/* ---- Field-mapping visualizer ----------------------------- */
.pn-mapping { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 0; }
.pn-mapping__node {
    background: var(--clr-white); border: 1px solid var(--clr-gray-300);
    border-radius: 8px; padding: 10px 14px; min-width: 280px;
    display: flex; flex-direction: column; gap: 6px;
}
.pn-mapping__node--mgr { background: hsl(0 0% 96%); min-width: 220px; align-items: center; text-align: center; }
.pn-mapping__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.pn-mapping__row .lbl { color: var(--clr-gray-600); font-weight: 500; }
.pn-mapping__row .val { color: var(--clr-gray-900); font-weight: 600; }
.pn-mapping__row .val.unmapped { color: hsl(0 60% 50%); font-weight: 500; }
.pn-mapping__edge { width: 1px; height: 22px; background: var(--clr-gray-300); }
.pn-mapping__plus {
    margin-top: 8px; font-size: 12px; color: var(--clr-gray-500);
    border: 1.5px dashed var(--clr-gray-300); border-radius: 8px; padding: 6px 12px;
    cursor: pointer; background: none; font-family: var(--ff-base);
}
.pn-mapping__plus:hover { color: var(--clr-bg-primary-darker); border-color: var(--clr-bg-primary); }

/* ---- Misc helpers ----------------------------------------- */
.pn-divider { height: 1px; background: var(--clr-gray-100); margin: 14px 0; }
.pn-muted { color: var(--clr-gray-500); }
.pn-link { color: var(--clr-bg-primary-darker); text-decoration: none; font-weight: 500; }
.pn-link:hover { text-decoration: underline; }

/* ============================================================
   Node Details Panel  (dp- prefix)
   Docked to the right of the chart, overlaid (v1 — no squeeze).
   ============================================================ */

/* ---- Chart body (fills the org-chart container, flex row: chart + docked panel) */
.chart-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
/* chart-container is flex-1 (takes remaining width); dp-host docked on right */
.chart-body .chart-container--config { order: 1; flex: 1; min-width: 0; height: 100%; }
.chart-body .dp-host { order: 2; }

/* ---- Host (docked panel container) ------------------------ */
.dp-host {
    order: 2;
    display: flex;
    flex-shrink: 0;
    align-self: stretch;
    z-index: 8;
}

/* The floating layers trigger button is now in the toolbar */
.visual-layers-button { display: none; }

/* ---- Full panel shell ------------------------------------- */
.dp-panel {
    width: 340px;
    flex-shrink: 0;
    background: var(--clr-white);
    border-left: 1px solid var(--clr-gray-200);
    display: flex;
    flex-direction: column;
    min-height: 0;
    font-family: var(--ff-base);
    box-shadow: -4px 0 16px rgba(0,0,0,0.06);
}
/* Focused programmatically (focusPanel()) when opened via keyboard — not part of the
   tab order itself (tabindex="-1"), so this only needs to render once JS calls .focus(). */
.dp-panel:focus {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--clr-bg-primary), -4px 0 16px rgba(0,0,0,0.06);
}
.dp-panel__head {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 10px 11px 16px;
    border-bottom: 1px solid var(--clr-gray-100);
}
.dp-panel__eyebrow {
    font-family: var(--ff-secondary);
    font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--clr-gray-400);
    margin-right: auto;
}
.dp-panel__act {
    width: 28px; height: 28px;
    border: none; background: none;
    border-radius: 7px;
    color: var(--clr-gray-500);
    display: grid; place-items: center;
    cursor: pointer; line-height: 1;
}
.dp-panel__act:hover { background: var(--clr-gray-100); color: var(--clr-gray-900); }

/* "Locate on map": a split button (fragments/locate-on-map.jte) - the main button goes to the default map view, the
   chevron (only when there's more than one) opens a menu of the named ones. */
.dp-panel__locate { flex-shrink: 0; padding: 8px 16px; border-bottom: 1px solid var(--clr-gray-100); }
.lom { position: relative; display: inline-block; }
.lom__group { display: inline-flex; }
.lom__main, .lom__chev {
    display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3;
    padding: 5px 10px; border: 1px solid var(--clr-gray-300); background: var(--clr-white); color: var(--clr-gray-800); cursor: pointer;
}
.lom__main { border-radius: 6px; }
.lom__main--split { border-radius: 6px 0 0 6px; }
.lom__chev { border-radius: 0 6px 6px 0; border-left: none; padding: 5px 8px; }
.lom__main:hover, .lom__chev:hover { background: var(--clr-gray-100); }
.lom__main:focus-visible, .lom__chev:focus-visible, .lom__item:focus-visible { outline: 3px solid #f59e0b; outline-offset: 1px; }
.lom__main[aria-disabled="true"] { color: var(--clr-gray-400); background: var(--clr-gray-50, #fafafa); cursor: not-allowed; }
.lom__menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1000; min-width: 210px; margin: 0; padding: 6px; list-style: none;
    background: var(--clr-white); border: 1px solid var(--clr-gray-200); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
}
.lom__menu[hidden] { display: none; }
.lom__item {
    display: flex; width: 100%; align-items: center; gap: 6px; text-align: left; padding: 6px 8px; border: none; background: none;
    border-radius: 7px; font: inherit; font-size: 13px; color: var(--clr-gray-800); cursor: pointer;
}
.lom__item:hover { background: var(--clr-gray-100); }
.lom__item[aria-disabled="true"] { color: var(--clr-gray-400); cursor: not-allowed; }
.lom__item[aria-disabled="true"]:hover { background: none; }
.lom__item-name { flex: 1; min-width: 0; }
.lom__tag {
    font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--clr-gray-500);
    background: var(--clr-gray-100); border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.lom__tag[hidden] { display: none; }
/* on the profile page it sits in the top bar with the other buttons (.pp-topbar-btn) */
.lom--page .lom__main, .lom--page .lom__chev { border: 1.5px solid #d0d5dd; color: #344054; font-size: 0.8125rem; padding: 0.3rem 0.7rem; }
.lom--page .lom__chev { border-left: none; padding: 0.3rem 0.5rem; }
.lom--page .lom__main[aria-disabled="true"] { color: #98a2b3; }
.lom--page .lom__menu { left: auto; right: 0; }
.dp-panel__body { flex: 1; min-height: 0; overflow-y: auto; }
.dp-panel__foot {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-top: 1px solid var(--clr-gray-100);
    background: hsl(0 0% 99.3%);
    font-size: 11px; color: var(--clr-gray-500);
}
.dp-panel__sync-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--clr-success, hsl(147 45% 46%));
}

/* ---- Collapsed rail --------------------------------------- */
.dp-rail {
    width: 46px; flex-shrink: 0;
    background: var(--clr-white);
    border-left: 1px solid var(--clr-gray-200);
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 0; gap: 12px;
    box-shadow: -4px 0 16px rgba(0,0,0,0.06);
}
.dp-rail__btn {
    width: 30px; height: 30px;
    border: 1px solid var(--clr-gray-200); background: var(--clr-white);
    border-radius: 8px; color: var(--clr-gray-600);
    display: grid; place-items: center; cursor: pointer; line-height: 1;
}
.dp-rail__btn:hover { color: var(--clr-gray-900); border-color: var(--clr-gray-300); background: hsl(36 100% 97%); }
.dp-rail__label {
    writing-mode: vertical-rl;
    font-family: var(--ff-secondary);
    font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--clr-gray-400); margin-top: 4px;
}
.dp-rail__avatar {
    margin-top: auto;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--clr-gray-200); color: var(--clr-gray-600);
    display: grid; place-items: center;
    font-family: var(--ff-secondary); font-weight: 800; font-size: 12px;
}

/* ---- Empty state ------------------------------------------ */
.dp-empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px;
    padding: 40px 24px; text-align: center;
    min-height: 200px;
}
.dp-empty-state__icon { font-size: 2rem; color: var(--clr-gray-300); }
.dp-empty-state__text { font-size: 13px; color: var(--clr-gray-500); line-height: 1.5; }

/* ---- Identity card ---------------------------------------- */
.dp-id {
    position: relative;
    margin: 14px;
    border: 1.5px solid var(--dp-node-border, var(--clr-gray-300));
    border-radius: 10px;
    overflow: hidden;
    background: var(--clr-white);
}
.dp-id__tint {
    position: absolute; inset: 0;
    background: var(--dp-node-bg, transparent);
    opacity: 0.42;
    pointer-events: none;
}
.dp-id__inner { position: relative; padding: 18px 16px 16px; text-align: center; }
.dp-id__eid {
    font-family: var(--ff-mono);
    font-size: 11px; font-weight: 500;
    color: var(--clr-gray-400); letter-spacing: 0.02em; line-height: 1;
}
.dp-id__name {
    font-family: var(--ff-secondary);
    font-weight: 800;
    color: var(--clr-gray-900);
    letter-spacing: -0.01em; line-height: 1.15;
    margin-top: 4px;
}
.dp-id--image .dp-id__name { font-size: 20px; }
.dp-id--name  .dp-id__name { font-size: 24px; }
.dp-id__title { font-size: 13px; color: var(--clr-gray-600); margin-top: 3px; line-height: 1.35; }
.dp-id__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center; margin-top: 11px;
}

/* ---- Photo slot ------------------------------------------- */
.dp-photo {
    width: 88px; height: 88px;
    border-radius: 8px;
    border: 1.5px solid var(--dp-node-border, var(--clr-gray-300));
    overflow: hidden; flex-shrink: 0;
    background: var(--clr-gray-100);
    margin: 0 auto 13px;
    display: flex; align-items: center; justify-content: center;
}
.dp-photo__initials {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-family: var(--ff-secondary); font-weight: 800; font-size: 30px;
    color: var(--clr-gray-500); letter-spacing: 0.02em;
}
.dp-photo--error {
    background: hsl(0 70% 97.5%);
    border-color: hsl(0 60% 80%);
}
.dp-photo__ph {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; color: hsl(0 55% 55%);
}
.dp-photo__cap {
    font-family: var(--ff-mono); font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: hsl(0 55% 45%);
    margin-top: 5px; padding: 0 6px; text-align: center; line-height: 1.3;
}

/* ---- Identity chips --------------------------------------- */
.dp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600;
    padding: 3px 10px; border-radius: 999px;
    background: var(--clr-gray-100); color: var(--clr-gray-700); line-height: 1.5;
}

/* ---- Blocks (sections: Layers, Reporting) ----------------- */
.dp-block { padding: 4px 16px 14px; }
.dp-block__label {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--ff-secondary);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--clr-gray-500); margin: 0 0 9px;
}
.dp-block__line { flex: 1; height: 1px; background: var(--clr-gray-100); }

/* ---- Layers chips ----------------------------------------- */
.dp-laychips { display: flex; flex-wrap: wrap; gap: 7px; }
.dp-laychip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    line-height: 1.5; border: 1px solid transparent;
}
.dp-laychip__dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dp-laychip--border {
    background: var(--clr-white);
    border-color: var(--clr-gray-200);
    color: var(--clr-gray-700);
}
.dp-laychip__swatch {
    width: 16px; height: 0;
    border-top-width: 2px;
    border-top-color: var(--clr-gray-500);
    flex-shrink: 0;
}

/* ---- Reporting: metrics ----------------------------------- */
.dp-metrics {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px; margin-bottom: 11px;
}
.dp-metric {
    border: 1px solid var(--clr-gray-200); border-radius: 9px;
    background: var(--clr-white); padding: 9px 6px; text-align: center;
}
.dp-metric b {
    display: block;
    font-family: var(--ff-secondary); font-weight: 800; font-size: 19px;
    color: var(--clr-gray-900); line-height: 1.1;
}
.dp-metric span {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--clr-gray-500); font-weight: 600;
}

/* ---- Reporting: reports-to row ---------------------------- */
.dp-relrow {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 8px 10px; margin-top: 8px;
    border: 1px solid var(--clr-gray-200); border-radius: 10px;
    background: var(--clr-white); cursor: pointer; text-align: left;
    font-family: var(--ff-base);
    transition: border-color 0.12s, background 0.12s;
}
.dp-relrow:hover { border-color: var(--clr-bg-primary); background: hsl(36 100% 98%); }
.dp-relrow__avatar {
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    display: grid; place-items: center;
    font-family: var(--ff-secondary); font-weight: 800; font-size: 12.5px;
    background: var(--clr-gray-200); color: var(--clr-gray-600);
}
.dp-relrow__main { flex: 1; min-width: 0; }
.dp-relrow__role {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--clr-gray-400); display: block;
}
.dp-relrow__name {
    font-size: 13px; font-weight: 600; color: var(--clr-gray-900);
    margin-top: 1px; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-relrow__sub {
    font-size: 11.5px; color: var(--clr-gray-500); display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-relrow__chev { color: var(--clr-gray-300); flex-shrink: 0; }
.dp-relrow:hover .dp-relrow__chev { color: var(--clr-bg-primary); }

/* ---- Collapsible sections --------------------------------- */
.dp-sec { border-top: 1px solid var(--clr-gray-100); }
.dp-sec__head {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 12px 16px;
    border: none; background: none;
    cursor: pointer; font-family: var(--ff-base); text-align: left;
}
.dp-sec__head:hover { background: hsl(0 0% 99%); }
.dp-sec__icon {
    width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
    background: var(--clr-gray-100); color: var(--clr-gray-500);
    display: grid; place-items: center;
}
.dp-sec__icon--empty { background: transparent; }
.dp-sec__title {
    flex: 1; min-width: 0;
    font-family: var(--ff-secondary);
    font-size: 12.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--clr-gray-600);
}
.dp-sec__count { font-size: 11px; color: var(--clr-gray-400); font-weight: 600; }
.dp-sec__chev { color: var(--clr-gray-400); transition: transform 0.18s; }
.dp-sec.is-open .dp-sec__chev { transform: rotate(90deg); }
.dp-sec__body { padding: 0 16px 8px; }
.dp-sec:not(.is-open) .dp-sec__body { display: none; }

/* ---- Typed field rows ------------------------------------- */
.dp-field {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 8px 0;
    border-bottom: 1px solid var(--clr-gray-100);
}
.dp-field:last-child { border-bottom: none; }
.dp-field__icon {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    background: var(--clr-gray-100); color: var(--clr-gray-500);
    display: grid; place-items: center; margin-top: 1px;
}
.dp-field__icon--empty { background: transparent; }
.dp-field__main { flex: 1; min-width: 0; }
.dp-field__label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--clr-gray-400); line-height: 1.3;
}
.dp-field__value {
    font-size: 13px; color: var(--clr-gray-900);
    line-height: 1.4; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-field__value a {
    color: var(--clr-bg-primary-darker); text-decoration: none; font-weight: 600;
}
.dp-field__value a:hover { text-decoration: underline; }
.dp-field__value.is-empty { color: var(--clr-gray-400); font-style: italic; font-size: 12.5px; }

/* ---- Copy button ------------------------------------------ */
.dp-copy {
    width: 26px; height: 26px; flex-shrink: 0;
    border: 1px solid transparent; background: none;
    border-radius: 7px; color: var(--clr-gray-400);
    display: grid; place-items: center; cursor: pointer;
    opacity: 0; transition: opacity 0.12s, color 0.12s, border-color 0.12s;
    align-self: center;
}
.dp-field:hover .dp-copy { opacity: 1; }
.dp-copy:hover { color: var(--clr-gray-800); border-color: var(--clr-gray-200); background: var(--clr-white); }
.dp-copy.is-done { color: var(--clr-success, hsl(147 45% 46%)); opacity: 1; }

/* ---- Multiline (expandable) ------------------------------- */
.dp-field--multi { flex-direction: column; gap: 6px; align-items: stretch; }
.dp-field--multi .dp-field__topline { display: flex; align-items: center; gap: 11px; }
.dp-longtext {
    font-size: 12.5px; color: var(--clr-gray-700); line-height: 1.55;
    background: hsl(0 0% 99%);
    border: 1px solid var(--clr-gray-100); border-radius: 8px;
    padding: 10px 12px; white-space: pre-wrap; word-break: break-word;
}
.dp-longtext.is-clamped {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.dp-longtext-toggle {
    border: none; background: none; cursor: pointer;
    font-family: var(--ff-base); font-size: 11.5px; font-weight: 600;
    color: var(--clr-bg-primary-darker); padding: 4px 0 0; align-self: flex-start;
}

/* ---- Responsive (narrow screens) -------------------------- */
@media (max-width: 640px) {
    /* Profile panel → full-screen overlay, scrollable body */
    .dp-panel { width: 100%; position: fixed; inset: 0; border-left: none; border-top: none; z-index: 200; }
    .dp-host { position: fixed; inset: 0; z-index: 200; }
    .dp-panel__body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .dr-shell .dp-panel { width: 100%; top: 0; }
    /* D12: card grid → single column */
    .dr-grid { grid-template-columns: 1fr; }
    /* D12: table → horizontal scroll */
    .dr-table-wrapper { overflow-x: auto; }
    .dr-table { min-width: 560px; }
    /* D12: search bar → full width */
    .dr-search { max-width: none; }
}

/* ── Tab group (Node | Details) ─────────────────────────────────────────── */
.pn-tab-group { display: inline-flex; border: 1px solid var(--clr-gray-300); border-radius: 6px; overflow: hidden; }
.pn-tab {
    padding: 3px 12px; font-size: 12.5px; font-weight: 500;
    background: transparent; border: none; cursor: pointer;
    color: var(--clr-gray-600); line-height: 1.6;
    transition: background 0.12s, color 0.12s;
}
.pn-tab:hover { background: var(--clr-gray-100); color: var(--clr-gray-900); }
.pn-tab--active { background: var(--clr-gray-900); color: #fff; }
.pn-tab--active:hover { background: var(--clr-gray-800); color: #fff; }
.chart-preview-container[data-active-preview="directory"] #preview-chart { display: none; }
.chart-preview-container[data-active-preview="chart"] #preview-directory { display: none; }

/* ── Details Panel Config Editor ─────────────────────────────────────────── */
.dp-cfg-editor { padding-top: 0.5rem; }
.dp-cfg-block {
    border: 1px solid var(--clr-gray-200); border-radius: 6px;
    padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
    background: var(--clr-gray-50, #fafafa);
}
.dp-cfg-block-title { font-size: 12px; font-weight: 600; color: var(--clr-gray-600); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.dp-cfg-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; min-height: 28px; }
.dp-cfg-row--chips { align-items: flex-start; }
.dp-cfg-lbl { font-size: 12.5px; color: var(--clr-gray-600); min-width: 72px; flex-shrink: 0; }
.dp-cfg-fixed { font-size: 12.5px; color: var(--clr-gray-400); font-style: italic; }
.dp-cfg-chip-row { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.25rem; }
.dp-cfg-sections-label { font-size: 12px; font-weight: 600; color: var(--clr-gray-600); text-transform: uppercase; letter-spacing: 0.04em; margin: 0.5rem 0 0.25rem; }
.dp-cfg-section {
    border: 1px solid var(--clr-gray-200); border-radius: 6px;
    padding: 0.5rem 0.6rem; margin-bottom: 0.5rem;
    background: #fff;
}
.dp-cfg-section-hd { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; }
.dp-cfg-sec-title { flex: 1; font-size: 12.5px; font-weight: 500; border: 1px solid var(--clr-gray-300); border-radius: 4px; padding: 3px 6px; min-width: 0; }
.dp-cfg-sec-title:focus { outline: none; border-color: var(--clr-blue-400, #3b82f6); }
.dp-cfg-open-lbl { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--clr-gray-600); cursor: pointer; white-space: nowrap; }
.dp-cfg-fields { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.35rem; }
.dp-cfg-field-row { display: flex; align-items: center; gap: 0.35rem; }
.dp-cfg-fld-label { font-size: 12.5px; border: 1px solid var(--clr-gray-300); border-radius: 4px; padding: 3px 6px; width: 90px; flex-shrink: 0; }
.dp-cfg-fld-label:focus { outline: none; border-color: var(--clr-blue-400, #3b82f6); }
.dp-cfg-fld-col { font-size: 12px; min-width: 110px; }
.dp-cfg-fld-type { font-size: 12px; min-width: 80px; }
.dp-cfg-fld-link-text { font-size: 12px; border: 1px solid var(--clr-gray-300); border-radius: 4px; padding: 3px 6px; width: 80px; }
.dp-cfg-icon-btn {
    width: 26px; height: 26px; border: 1px solid var(--clr-gray-300); border-radius: 4px;
    background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--clr-gray-600); flex-shrink: 0;
}
.dp-cfg-icon-btn:hover { border-color: var(--clr-gray-500); color: var(--clr-gray-900); }
.dp-cfg-remove {
    padding: 0 5px; height: 24px; border: 1px solid transparent; border-radius: 4px;
    background: transparent; cursor: pointer; color: var(--clr-gray-400); font-size: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dp-cfg-remove:hover { color: var(--clr-red-600, #dc2626); border-color: var(--clr-red-200, #fecaca); background: var(--clr-red-50, #fef2f2); }
.dp-cfg-add-btn, .dp-cfg-add-field-btn, .dp-cfg-add-section-btn {
    font-size: 12px; color: var(--clr-blue-600, #2563eb); background: none; border: none;
    cursor: pointer; padding: 2px 0; text-decoration: none;
}
.dp-cfg-add-btn:hover, .dp-cfg-add-field-btn:hover, .dp-cfg-add-section-btn:hover { text-decoration: underline; }
.dp-cfg-add-section-btn { display: block; margin: 0.25rem 0 0.75rem; font-size: 12.5px; }
.dp-cfg-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--clr-gray-100); margin-top: 0.5rem; }
.dp-cfg-status { font-size: 12px; color: var(--clr-gray-500); }
.dp-cfg-status--ok { color: var(--clr-success, hsl(147 45% 46%)); }
.dp-cfg-upsell { font-size: 12.5px; color: var(--clr-gray-500); }

/* ── Icon picker popup ───────────────────────────────────────────────────── */
.dp-icon-picker {
    position: absolute; z-index: 9999; width: 260px;
    background: #fff; border: 1px solid var(--clr-gray-200);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    overflow: hidden;
}
.dp-icon-picker-hd { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--clr-gray-100); }
.dp-icon-search { flex: 1; font-size: 12px; border: 1px solid var(--clr-gray-300); border-radius: 4px; padding: 3px 6px; }
.dp-icon-search:focus { outline: none; border-color: var(--clr-blue-400, #3b82f6); }
.dp-icon-close { background: none; border: none; cursor: pointer; color: var(--clr-gray-500); font-size: 16px; line-height: 1; padding: 0 4px; }
.dp-icon-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 6px; max-height: 200px; overflow-y: auto; }
.dp-icon-opt {
    width: 32px; height: 32px; border: 1px solid transparent; border-radius: 4px;
    background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--clr-gray-700);
}
.dp-icon-opt:hover { background: var(--clr-gray-100); }
.dp-icon-opt.is-selected { background: var(--clr-blue-50, #eff6ff); border-color: var(--clr-blue-400, #3b82f6); color: var(--clr-blue-600, #2563eb); }

/* ── Column Map Table (E3 Setup) ─────────────────────────────────────────── */
.col-map-wrap { margin-top: 0.5rem; overflow-x: auto; }
.col-map-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.col-map-table th {
    text-align: left; padding: 5px 8px; font-weight: 600;
    color: var(--clr-gray-500); border-bottom: 1px solid var(--clr-gray-200);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.col-map-table td { padding: 4px 6px; border-bottom: 1px solid var(--clr-gray-100); vertical-align: middle; }
.col-map-table tr:last-child td { border-bottom: none; }
.col-map-td--role-name { width: 28%; min-width: 100px; font-size: 12.5px; }
.col-map-th--col, .col-map-td--col { width: 38%; min-width: 110px; }
.col-map-th--type, .col-map-td--type { width: 22%; min-width: 80px; }
.col-map-th--exp, .col-map-td--exp { width: 12%; text-align: right; padding-right: 4px; white-space: nowrap; }
.col-map-row--core td { background: rgba(79, 108, 220, 0.04); }
.col-map-row--core .col-map-td--role-name { border-left: 2px solid rgba(79, 108, 220, 0.35); padding-left: 6px; font-weight: 600; color: var(--clr-gray-700); }
.col-map-td--add { padding: 6px 8px !important; }
.col-map-add-select { font-size: 12px !important; color: var(--clr-gray-500); }
.col-map-select { font-size: 12px !important; padding: 3px 22px 3px 6px !important; }
.col-map-expand-btn, .col-map-remove-btn {
    background: none; border: none; cursor: pointer; color: var(--clr-gray-400);
    padding: 2px 4px; border-radius: 4px; font-size: 14px; line-height: 1;
    transition: color 0.12s, transform 0.15s;
}
.col-map-expand-btn:hover { color: var(--clr-gray-700); }
.col-map-expand-btn.is-open { transform: rotate(180deg); color: var(--clr-gray-700); }
.col-map-remove-btn:hover { color: var(--clr-red, #c0392b); }
.col-map-expand-td { padding: 8px 12px 10px; background: var(--clr-gray-50, #fafafa); border-bottom: 1px solid var(--clr-gray-200) !important; }
.col-map-expand-inner { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.col-map-expand-field { display: flex; flex-direction: column; gap: 3px; }
.col-map-expand-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-gray-500); }
.col-map-expand-input { padding: 4px 8px; border: 1px solid var(--clr-gray-300); border-radius: 4px; font-size: 12px; min-width: 140px; background: var(--clr-bg, #fff); color: var(--clr-gray-800); }
.col-map-expand-input:focus { outline: none; border-color: var(--clr-gray-500); }
.col-map-icon-preview { display: inline-block; margin-left: 6px; color: var(--clr-gray-600); font-size: 14px; }
.col-map-empty { padding: 1rem; font-size: 13px; color: var(--clr-gray-500); text-align: center; }
.col-map-label-input { width: 100%; box-sizing: border-box; padding: 3px 6px; border: 1px solid var(--clr-gray-300); border-radius: 4px; font-size: 12px; background: var(--clr-bg, #fff); color: var(--clr-gray-800); }
.col-map-label-input::placeholder { color: var(--clr-gray-400); font-style: italic; }
.col-map-icon-choose-btn {
    background: var(--clr-gray-50, #f8f8f8); border: 1px solid var(--clr-gray-300); border-radius: 4px;
    cursor: pointer; font-size: 16px; padding: 3px 8px; color: var(--clr-gray-700); min-width: 34px;
}
.col-map-icon-choose-btn:hover { border-color: var(--clr-gray-500); background: var(--clr-gray-100); }
.col-map-icon-clear-btn {
    background: none; border: none; cursor: pointer; font-size: 14px; color: var(--clr-gray-400); padding: 2px 4px;
}
.col-map-icon-clear-btn:hover { color: var(--clr-red, #c0392b); }

/* ── Setup preview tabs (E4) ─────────────────────────────────────────────── */
.preview-tab-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.preview-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding: 4px 0; }
.preview-dir-empty { padding: 2rem; text-align: center; font-size: 13px; color: var(--clr-gray-500); }

/* ── Directory map layout (preview) ─────────────────────────────────────────────────────────────────────────── */
.dr-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dr-layout-btn--map { width: auto; padding: 0 6px; gap: 4px; grid-auto-flow: column; }
.dr-layout-badge {
    font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--clr-gray-100); color: var(--clr-gray-600); border-radius: 3px; padding: 1px 4px;
}
.dr-layout-btn--map.active .dr-layout-badge { background: var(--clr-white); }

.dr-map { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; }
.dr-map.d-none { display: none; }
.dr-map__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 32px; }
.dr-map__cfg { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.dr-map__select { padding: 4px 8px; border: 1px solid var(--clr-gray-300); border-radius: 4px; font-size: 13px; }
.dr-map__status { margin: 0 0 0 auto; font-size: 13px; color: var(--clr-gray-600); }
.dr-map__hint {
    margin: 0; padding: 8px 12px; font-size: 13px; border-radius: 6px;
    background: #fff7e6; border: 1px solid #f0c36d; color: #6b4a00;
}
.dr-map__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
/* The side column only earns its 340px when it actually has something in it (a list open, or people not on the
   map) - see _updateSideCollapse(). Most of the time neither is true, so the canvas gets the full width. */
.dr-map__body--full { grid-template-columns: minmax(0, 1fr); }
.dr-map__body--full .dr-map__side { display: none; }
.dr-map__canvas-wrap { position: relative; min-height: 320px; border: 1px solid var(--clr-gray-300); border-radius: 8px; overflow: hidden; }
.dr-map__canvas { position: absolute; inset: 0; background: var(--config-chart-bg-color, #eef1f4); }
.dr-map__notice {
    position: absolute; top: 8px; left: 8px; right: 60px; z-index: 500; margin: 0; padding: 6px 10px; font-size: 12px;
    border-radius: 6px; background: rgba(255, 255, 255, .92); border: 1px solid var(--clr-gray-300); color: var(--clr-gray-700);
}
.dr-map__side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.dr-map__group, .dr-map__unplaced {
    border: 1px solid var(--clr-gray-300); border-radius: 8px; padding: 10px 12px; background: var(--clr-white);
}
.dr-map__group[hidden], .dr-map__unplaced[hidden], .dr-map__hint[hidden] { display: none; }
.dr-map__group-title { margin: 0 0 2px; font-size: 15px; }
.dr-map__group-title:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; border-radius: 3px; }
.dr-map__group-count { margin: 0 0 8px; font-size: 12px; color: var(--clr-gray-600); }
.dr-map__group-actions { display: flex; gap: 6px; margin-bottom: 8px; }
.dr-map__cards { display: flex; flex-direction: column; gap: 8px; }
.dr-map__cards .dr-card { width: 100%; }
.dr-map__unplaced > summary { cursor: pointer; font-size: 13px; font-weight: 600; }

/* "All places", in the top bar next to "Map view": a dropdown-styled disclosure. Still a real <details>/<summary>
   list (not a native <select>) - a project can have many places, and this list is the documented map-free way
   to browse everyone, so it keeps room for a real accessible list rather than degrading to cramped <option>s. */
.dr-map__places[hidden] { display: none; }
.dr-map__places { position: relative; font-size: 13px; }
.dr-map__places > summary {
    cursor: pointer; list-style: none; font-weight: 600; color: var(--clr-gray-700); user-select: none;
    padding: 4px 10px; border: 1px solid var(--clr-gray-300); border-radius: 4px; background: var(--clr-white);
}
.dr-map__places > summary::-webkit-details-marker { display: none; }
.dr-map__places > summary::after { content: ' \25BE'; }
.dr-map__places[open] > summary { border-color: var(--clr-gray-400); }
.dr-map__places-list {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000; min-width: 240px;
    list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--clr-gray-200); background: var(--clr-white); border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
}
.dr-map__place-btn {
    width: 100%; text-align: left; padding: 5px 6px; border: none; background: none; border-radius: 7px; font-size: 13px; cursor: pointer;
}
.dr-map__place-btn:hover { background: var(--clr-gray-100); }
.dr-map__place-btn:focus-visible, .dr-map__places > summary:focus-visible, .dr-map__unplaced > summary:focus-visible {
    outline: 3px solid #f59e0b; outline-offset: 1px;
}
.dr-map__unplaced-reason { margin: 10px 0 6px; font-size: 13px; }
.dr-map__unplaced-group { margin-bottom: 6px; }

/* Pins and clusters: fill/text colour is set inline per-marker by JS (mapViewLogic's fillBackground/fillTextColor —
   the active layer's colour when one is on, else a fixed neutral so pins never depend on how pale a theme is). The
   dark ring + white halo + shadow here are what actually keep a pin visible against any basemap regardless of fill
   hue — a pale fill alone (e.g. a light theme colour) all but disappears on CARTO's pale default tiles otherwise.
   The focus ring is deliberately heavy because Leaflet's default is a thin 1px outline. */
.dr-map-pin-icon, .dr-map-cluster-icon { background: none; border: none; }
.dr-map-pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.dr-map-pin__dot {
    display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box;
    border-radius: 11px; font-size: 11px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 0 4px #fff, 0 2px 6px rgba(0, 0, 0, .5);
}
.dr-map-cluster { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.dr-map-cluster__count {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 14px; font-weight: 700;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 0 5px rgba(255, 255, 255, .95), 0 2px 8px rgba(0, 0, 0, .55);
}
/* The currently-open profile's pin (or its cluster, if grouped at this zoom) - same highlight colour as
   .dr-card--selected/.dr-table__row--selected, added as one more ring alongside the existing visibility rings
   above rather than an outline (an outline reads badly on a divIcon that's already relying on box-shadow rings
   for its own visibility against the basemap). */
.dr-map-pin-icon--highlighted .dr-map-pin__dot {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 0 4px #fff, 0 0 0 7px var(--config-chart-highlight-color, #E27396), 0 2px 6px rgba(0, 0, 0, .5);
}
.dr-map-cluster-icon--highlighted .dr-map-cluster__count {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 0 5px rgba(255, 255, 255, .95), 0 0 0 8px var(--config-chart-highlight-color, #E27396), 0 2px 8px rgba(0, 0, 0, .55);
}
.dr-map .leaflet-marker-icon:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; border-radius: 50%; }
.dr-map .leaflet-container:focus-visible { outline: 3px solid #f59e0b; outline-offset: -3px; }
.dr-map .leaflet-control-attribution { font-size: 11px; background: rgba(255, 255, 255, .9); z-index: 800; }
.dr-map .leaflet-control-attribution a { text-decoration: underline; }

@media (max-width: 800px) {
    .dr-map__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 55vh) auto; }
    .dr-map__body--full { grid-template-rows: minmax(300px, 55vh); }
    .dr-map__side { overflow: visible; }
}