.policy-dashboard {
  display: grid;
  gap: 20px;
  padding: 48px 8vw 110px;
}

.org-back-link {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 91;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(18, 22, 36, 0.14);
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.org-back-link span {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  margin-top: -4px;
}

.org-back-link:hover {
  background: var(--panel);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(18, 22, 36, 0.18);
}

body[data-page="policies"] .policy-dashboard {
  gap: 0;
  padding-top: 0;
}

.dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.add-policy-btn {
  position: fixed;
  left: 32px;
  bottom: 96px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--panel-strong);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 12px 24px rgba(18, 22, 36, 0.16);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, filter 220ms ease;
}

.branding-btn {
  bottom: 264px;
}

.manage-modules-btn {
  bottom: 208px;
}

.people-admin-btn,
.hrms-admin-btn {
  bottom: 152px;
}

.org-settings-btn {
  bottom: 96px;
}

[data-access-mode-show] {
  display: none;
}

[data-access-mode-show].is-mode-visible {
  display: inline-flex;
}

.theme-btn:hover {
  filter: brightness(1.04);
}

.theme-panel {
  position: fixed;
  left: 32px;
  bottom: 376px;
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--outline);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px;
  display: grid;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 95;
}

.theme-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.theme-panel-head {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-weight: 600;
}

.theme-panel-grid {
  display: grid;
  gap: 10px;
}

.theme-option {
  border: 1px solid var(--outline);
  background: var(--panel-strong);
  border-radius: 12px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.theme-option:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.theme-option.is-active {
  border-color: var(--accent);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

.theme-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--outline);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.theme-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}

.add-policy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
  filter: brightness(1.05);
}

.add-policy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
}

.add-policy-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.add-policy-text {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--panel-strong);
  border: 1px solid var(--outline);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: var(--shadow);
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.add-policy-btn:hover .add-policy-text,
.add-policy-btn:focus-visible .add-policy-text {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.dashboard-copy {
  display: grid;
  gap: 8px;
  max-width: 640px;
}

.policy-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.policy-total {
  font-size: 0.95rem;
  color: var(--ink-muted);
  font-weight: 600;
}

.policy-dashboard .dashboard-head h1 {
  font-size: clamp(2rem, 3.1vw, 2.7rem);
  line-height: 1.1;
}

.dashboard-grid.rail-layout {
  display: flex;
  justify-content: flex-start;
}

/* Lives in the header now (see main.js hydrateHeader for "policies"). */
.rail-search-field {
  position: relative;
  width: 210px;
  max-width: 210px;
}

.rail-search-field::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316213a' stroke-opacity='0.65' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: filter 220ms ease;
}

.rail-search-input {
  width: 100%;
  padding: 8px 14px 8px 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--outline));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel) 96%, transparent) 0%,
    color-mix(in srgb, var(--accent-soft) 28%, var(--panel)) 100%
  );
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  box-shadow:
    0 4px 12px rgba(18, 22, 36, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  transition: border-color 180ms ease, box-shadow 220ms ease;
}

.rail-search-input::placeholder {
  color: color-mix(in srgb, var(--ink-muted) 80%, transparent);
}

.rail-search-input:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--outline));
  box-shadow:
    0 6px 16px rgba(18, 22, 36, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.rail-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 8px 20px rgba(18, 22, 36, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.rail-search-field:focus-within::before {
  filter: drop-shadow(0 0 3px var(--accent-soft));
}

@media (max-width: 640px) {
  .rail-search-field {
    max-width: 100%;
  }
}

/* Suggestions dropdown — frosted glass panel. The translucent panel sits
   over whatever rail content is behind it and lets the page tint show
   through, which keeps the focus on the search rather than introducing a
   second solid surface. */
.rail-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  /* Fully opaque surface — `--panel` is rgba alpha 0.94 baked-in, so any
     percentage of it still bleeds. --surface-solid is a per-theme solid
     color that the dropdown can sit on without text behind showing through. */
  background: var(--surface-solid, var(--panel-strong));
  border: 1px solid var(--outline);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(18, 22, 36, 0.28);
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  min-width: 260px;
}

/* Fallback for browsers without color-mix — fully opaque panel color. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .rail-search-suggestions {
    background: var(--panel);
  }
}

.rail-search-suggestion {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.25;
}

.rail-search-suggestion .suggestion-icon {
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-align: center;
}

.rail-search-suggestion .suggestion-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rail-search-suggestion .suggestion-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-search-suggestion .suggestion-meta {
  font-size: 0.72rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-search-suggestion:hover,
.rail-search-suggestion.is-active {
  background: var(--accent-soft);
  color: var(--ink);
}

.rail-search-suggestion mark {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

.rail-search-suggestions-empty {
  padding: 12px 10px;
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-align: center;
}

/* Brief flash when a module is jumped to from the search dropdown */
.policy-module-card.is-flash {
  animation: rail-card-flash 1.6s ease;
}

@keyframes rail-card-flash {
  0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
  30%  { box-shadow: 0 0 0 6px var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 var(--accent-soft); }
}

.rail-no-results {
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 24px auto 0;
}

.policy-module-card.is-filtered-out {
  display: none;
}

.policy-module-card.is-filter-policy-only .rail-item {
  border-color: var(--accent);
}

.policy-rail {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 20px;
  box-shadow: none;
  max-width: 1060px;
  width: 100%;
  position: sticky;
  top: 120px;
  margin: 0 auto;
}

.rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.rail-count {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.rail-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 36px;
  align-items: stretch;
  justify-items: stretch;
  max-width: 940px;
}

.policy-module-card {
  list-style: none;
  position: relative;
  user-select: none;
  height: 100%;
  z-index: 1;
}

.policy-module-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  width: 24px;
  height: 100%;
}

.policy-module-card:nth-child(3n)::after {
  right: auto;
  left: -24px;
}

.rail-item {
  width: 100%;
  border: 1px solid var(--outline);
  background: var(--panel);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  height: 100%;
  min-height: 200px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transition: transform 220ms ease, box-shadow 220ms ease, border 220ms ease, background 220ms ease;
  position: relative;
}

.rail-title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  justify-content: space-between;
}

.rail-meta {
  font-size: 0.82rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.rail-desc {
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.4;
  margin-top: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rail-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0.85;
  align-self: center;
}

.policy-module-card:hover .rail-item {
  border-color: var(--accent-soft);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.flyout {
  position: absolute;
  left: calc(100% + 24px);
  top: 0;
  width: min(520px, 62vw);
  background: var(--panel);
  border-radius: 24px;
  border: 1px solid var(--outline);
  box-shadow: var(--shadow);
  padding: 20px 20px 16px;
  opacity: 0;
  transform: translateX(-8px) translateY(8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 60;
}

.policy-module-card:nth-child(3n) .flyout {
  left: auto;
  right: calc(100% + 18px);
}

.policy-module-card:hover .flyout {
  opacity: 1;
  transform: translateX(0) translateY(0);
  pointer-events: auto;
}

.policy-module-card:hover {
  z-index: 70;
}


.module-top {
  display: grid;
  gap: 8px;
}

.module-top h2 {
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.module-top p {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.module-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  color: var(--ink);
  user-select: none;
}

.module-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--panel-strong);
  user-select: none;
}

.module-list li span {
  flex: 1;
}

.policy-item button,
.policy-item {
  cursor: pointer;
}

.policy-item.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.policy-item:hover {
  background: var(--accent-soft);
}

/* Subtle "we're opening this" indicator — tiny spinning ring next to the
   policy name while the preview fetch is in flight. */
.policy-item.is-opening {
  background: var(--accent-soft);
  color: var(--ink-muted);
}

.policy-item.is-opening::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 1.6px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rail-policy-spin 0.65s linear infinite;
  vertical-align: -2px;
  opacity: 0.6;
}

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

.policy-input {
  display: none;
}

.policy-add {
  border: none;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.policy-add:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.policy-add.is-hidden {
  display: none;
}

.policy-files {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.policy-files-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.policy-files-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.policy-files-list li a {
  color: var(--ink);
  text-decoration: none;
}

.policy-files-list li a:hover {
  text-decoration: underline;
}


.rail-list::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.rail-list::-webkit-scrollbar-thumb {
  background: var(--accent-soft);
  border-radius: 999px;
}

.module-list::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.module-list::-webkit-scrollbar-thumb {
  background: var(--accent-soft);
  border-radius: 999px;
}

.viewer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 9999;
}

.viewer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.viewer {
  background: var(--panel-strong);
  border-radius: 18px;
  width: min(960px, 92vw);
  height: min(680px, 88vh);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--outline);
  background: var(--panel);
}

.viewer-title {
  font-weight: 600;
}

.viewer-actions {
  display: inline-flex;
  gap: 10px;
}

.viewer-btn {
  border: 1px solid var(--outline);
  background: var(--panel-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border 180ms ease;
}

.viewer-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.viewer-body {
  position: relative;
  display: grid;
  background: var(--panel);
}

.viewer-frame {
  width: 100%;
  height: 100%;
  border: none;
}


.viewer-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  padding: 24px;
  text-align: center;
  pointer-events: none;
}


@media (max-width: 980px) {
  .dashboard-grid.rail-layout {
    justify-content: center;
  }

  .policy-rail {
    position: static;
  }

  .flyout {
    position: static;
    width: 100%;
    margin-top: 10px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .module-list {
    max-height: none;
  }

  .rail-list {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 720px) {
  .policy-dashboard {
    padding: 60px 6vw 90px;
  }

  .dashboard-grid.rail-layout {
    justify-content: center;
  }

  .rail-list {
    grid-template-columns: 1fr;
  }

  /* Tighten the FAB column on phones — 6 buttons at 56px spacing eats the
     bottom half of the screen otherwise. Shrink the buttons and the gap. */
  .add-policy-btn,
  .org-back-link {
    width: 40px;
    height: 40px;
    left: 16px;
    box-shadow: 0 8px 18px rgba(18, 22, 36, 0.18);
  }

  .org-back-link { bottom: 24px; }
  .org-settings-btn { bottom: 76px; }
  .people-admin-btn,
  .hrms-admin-btn { bottom: 124px; }
  .manage-modules-btn { bottom: 172px; }
  .branding-btn { bottom: 220px; }

  .theme-panel {
    left: 16px;
    bottom: 268px;
  }

  /* Tooltip labels rarely make sense on touch; hide them on small screens. */
  .add-policy-text {
    display: none;
  }

  .rail-search {
    padding: 0 12px;
  }

  /* Make the search field full-width and the suggestions panel match — gives
     a proper command-palette feel on phone screens. */
  .rail-search-field {
    max-width: none;
  }
}
.policy-rail,
.policy-rail * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}