/*
 * PC final operating model v2
 * Content-first overrides loaded after the legacy and v3 layers.
 */

:root {
  --final-ink: #17221d;
  --final-muted: #607069;
  --final-line: #dce5e0;
  --final-surface: #ffffff;
  --final-soft: #f5f8f6;
  --final-brand: #08684d;
  --final-brand-strong: #054c39;
  --final-focus: #e59b18;
}

@media (min-width: 1181px) and (max-width: 1380px) {
  .app-shell--v3:not(.app-shell--public) {
    --yw-sidebar: 248px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .app-shell--v3:not(.app-shell--public) {
    --yw-sidebar: 224px;
  }
}

.app-shell:not(.app-shell--public) .nav-group-title {
  grid-template-columns: 24px minmax(0, 1fr) 13px;
}

.sidebar--collaboration-context .sidebar-nav-heading {
  border-top-color: rgba(226, 196, 116, .28);
  background: rgba(226, 196, 116, .07);
}

.sidebar--collaboration-context .sidebar-nav-heading span {
  color: #f0d999;
}

.sidebar--collaboration-context .nav-domain > summary b,
.sidebar--collaboration-context .nav-group-title b,
.sidebar--collaboration-context .nav-group-access {
  display: none;
}

.sidebar--collaboration-context .nav-domain__modules {
  padding-left: 5px;
}

.sidebar--collaboration-context .nav-group-title {
  grid-template-columns: 24px minmax(0, 1fr) 14px;
}

.sidebar--collaboration-context .workspace-card {
  border-color: rgba(226, 196, 116, .25);
  background: linear-gradient(135deg, rgba(226, 196, 116, .11), rgba(255, 255, 255, .035));
}

.app-shell:not(.app-shell--public) .sidebar-nav-heading small {
  max-width: 180px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell:not(.app-shell--public) .nav-domain > summary b {
  font-size: 10px;
}

.app-shell:not(.app-shell--public) .nav-page {
  min-height: 38px;
}

.app-shell:not(.app-shell--public) .nav-page span {
  font-size: 12px;
}

.app-shell:not(.app-shell--public) .nav-group-more {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 12px;
  align-items: center;
  width: calc(100% - 4px);
  margin: 4px 2px 3px;
  gap: 7px;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid rgba(182, 209, 196, .2);
  border-radius: 9px;
  color: #dce9e3;
  background: rgba(9, 72, 54, .5);
  cursor: pointer;
}

.app-shell:not(.app-shell--public) .nav-group-more:hover {
  color: #ffffff;
  background: rgba(12, 98, 73, .58);
}

.app-shell:not(.app-shell--public) .nav-group-more:focus-visible {
  outline: 3px solid #f2bc4d;
  outline-offset: -3px;
}

.app-shell:not(.app-shell--public) .nav-group-more > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  color: #9fe1c6;
  background: rgba(121, 218, 179, .1);
}

.app-shell:not(.app-shell--public) .nav-group-more > span .icon {
  width: 12px;
}

.app-shell:not(.app-shell--public) .nav-group-more strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell:not(.app-shell--public) .nav-group-more small {
  color: #abc2b7;
  font-size: 9px;
  white-space: nowrap;
}

.app-shell:not(.app-shell--public) .nav-group-more > .icon {
  width: 11px;
  color: #9db3a8;
}

.app-shell:not(.app-shell--public) .sidebar-footer .system-pulse small {
  max-width: 172px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcx-page {
  --pcx-ink: var(--final-ink);
  --pcx-muted: var(--final-muted);
  --pcx-line: var(--final-line);
  --pcx-green: var(--final-brand);
  gap: 14px;
}

.pcx-hero {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
  gap: 18px 24px;
  padding: 24px 26px;
  border: 1px solid rgba(21, 85, 64, .2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 93% 14%, rgba(98, 201, 162, .13), transparent 26%),
    linear-gradient(128deg, #09261c 0%, #0a4a37 100%);
  box-shadow: 0 16px 36px rgba(16, 55, 42, .08);
}

.pcx-hero nav {
  margin-bottom: 11px;
  color: #a9c4b9;
  font-size: 12px;
}

.pcx-hero > div > small {
  color: #7de2bb;
  font-size: 11px;
  letter-spacing: .08em;
}

.pcx-hero h1 {
  margin: 7px 0 9px;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.12;
}

.pcx-hero p {
  color: #deebe6;
  font-size: 14px;
  line-height: 1.65;
}

.pcx-hero > div > div {
  margin-top: 13px;
}

.pcx-hero > div > div span {
  padding: 5px 9px;
  font-size: 11px;
}

.pcx-hero aside {
  display: grid;
  align-content: start;
  padding: 15px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .065);
}

.pcx-hero aside p {
  font-size: 12px;
  line-height: 1.55;
}

.pcx-hero footer {
  gap: 7px;
}

.pcx-hero footer .btn {
  min-height: 38px;
  padding: 0 13px;
}

.pcx-filters {
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 7px 20px rgba(23, 45, 35, .035);
}

.pcx-filters label span,
.pcx-filters > small {
  font-size: 11px;
}

.pcx-filters input,
.pcx-filters select {
  min-height: 39px;
  font-size: 12px;
  background: #fbfcfb;
}

.pcx-panel {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(23, 45, 35, .035);
}

.pcx-panel > header {
  padding: 16px 17px;
}

.pcx-panel > header span {
  font-size: 10px;
}

.pcx-panel > header h2 {
  font-size: 19px;
}

.pcx-panel > header p {
  font-size: 12px;
}

.pcx-table-wrap th {
  padding: 11px 12px;
  font-size: 11px;
}

.pcx-table-wrap td {
  padding: 12px;
  font-size: 12px;
}

.pcx-status {
  font-size: 10px;
}

.pc-spec-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #cddbd4;
  border-radius: 8px;
  color: #315b4b;
  background: #fff;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.pc-spec-trigger:hover {
  border-color: #86ad9d;
  color: #064d38;
  background: #f5faf7;
}

.pc-spec-trigger:focus-visible,
.pc-spec-dialog :is(button, summary):focus-visible {
  outline: 3px solid var(--final-focus);
  outline-offset: 2px;
}

.pc-spec-backdrop {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  place-items: stretch end;
  padding-left: min(18vw, 260px);
  background: rgba(4, 18, 13, .56);
  backdrop-filter: blur(5px);
}

.pc-spec-dialog {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(920px, 100%);
  height: 100%;
  color: var(--final-ink);
  background: #f4f7f5;
  box-shadow: -20px 0 60px rgba(0, 0, 0, .2);
}

.pc-spec-dialog__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 22px 24px 18px;
  color: #fff;
  background: linear-gradient(128deg, #09261c, #0a513c);
}

.pc-spec-dialog__head small,
.pc-spec-dialog__head strong,
.pc-spec-dialog__head span {
  display: block;
}

.pc-spec-dialog__head small {
  color: #8bd9ba;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.pc-spec-dialog__head h2 {
  margin: 6px 0;
  font-size: 26px;
}

.pc-spec-dialog__head p {
  max-width: 720px;
  margin: 0;
  color: #d7e8e1;
  font-size: 13px;
  line-height: 1.55;
}

.pc-spec-dialog__head button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-size: 22px;
  cursor: pointer;
}

.pc-spec-dialog__body {
  overflow: auto;
  padding: 18px 22px 34px;
  overscroll-behavior: contain;
}

.pc-spec-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.pc-spec-meta article,
.pc-spec-section {
  border: 1px solid var(--final-line);
  border-radius: 13px;
  background: #fff;
}

.pc-spec-meta article {
  min-width: 0;
  padding: 12px;
}

.pc-spec-meta small,
.pc-spec-meta strong {
  display: block;
}

.pc-spec-meta small {
  color: var(--final-muted);
  font-size: 10px;
}

.pc-spec-meta strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.pc-spec-section {
  margin-top: 10px;
  overflow: hidden;
}

.pc-spec-section > summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 9px 14px;
  cursor: pointer;
  list-style: none;
}

.pc-spec-section > summary::-webkit-details-marker {
  display: none;
}

.pc-spec-section > summary i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  color: #08684d;
  background: #e6f3ed;
  font: 800 10px/1 monospace;
}

.pc-spec-section > summary strong {
  font-size: 14px;
}

.pc-spec-section > summary span {
  color: var(--final-muted);
  font-size: 11px;
}

.pc-spec-section[open] > summary {
  border-bottom: 1px solid var(--final-line);
  background: #f8faf9;
}

.pc-spec-section__body {
  padding: 16px;
}

.pc-spec-section__body h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.pc-spec-section__body p,
.pc-spec-section__body li,
.pc-spec-section__body dd {
  color: #3f5149;
  font-size: 12px;
  line-height: 1.6;
}

.pc-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pc-spec-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e4ebe7;
  border-radius: 10px;
  background: #fafcfb;
}

.pc-spec-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-spec-list li {
  position: relative;
  padding-left: 17px;
}

.pc-spec-list li::before {
  position: absolute;
  top: .68em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0a7b59;
  content: "";
}

.pc-spec-flow {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-spec-flow li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid #e3ebe7;
  border-radius: 10px;
  background: #fbfcfb;
}

.pc-spec-flow li > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #0a6e51;
  font: 800 10px/1 monospace;
}

.pc-spec-flow strong,
.pc-spec-flow small {
  display: block;
}

.pc-spec-flow p {
  margin: 4px 0 7px;
}

.pc-spec-flow small {
  color: #6b7d75;
  font-size: 10px;
}

.pc-spec-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pc-spec-pills span {
  padding: 5px 8px;
  border: 1px solid #d8e4de;
  border-radius: 999px;
  color: #36594b;
  background: #f4f8f6;
  font-size: 10px;
}

.pc-spec-boundary {
  padding: 12px 14px;
  border-left: 3px solid #c58114;
  border-radius: 7px;
  color: #694817;
  background: #fff7e7;
  font-size: 11px;
  line-height: 1.55;
}

body.pc-spec-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .pcx-hero {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

  .pc-spec-backdrop {
    padding-left: 80px;
  }

  .pc-spec-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .pcx-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .pcx-hero aside {
    display: block;
  }

  .pc-spec-backdrop {
    padding-left: 0;
  }

  .pc-spec-dialog {
    width: 100%;
  }

  .pc-spec-dialog__head {
    padding: 18px;
  }

  .pc-spec-dialog__body {
    padding: 14px;
  }

  .pc-spec-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .pcx-hero {
    padding: 17px;
    border-radius: 14px;
  }

  .pcx-hero h1 {
    font-size: 27px;
  }

  .pcx-hero footer .btn {
    flex: 1 1 100%;
  }

  .pc-spec-meta {
    grid-template-columns: 1fr;
  }

  .pc-spec-section > summary {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .pc-spec-section > summary span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-spec-backdrop,
  .pc-spec-dialog,
  .pc-spec-dialog * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .app-shell:not(.app-shell--public) .nav-group-more,
  .pc-spec-trigger,
  .pc-spec-dialog,
  .pc-spec-meta article,
  .pc-spec-section,
  .pc-spec-card {
    border: 1px solid CanvasText;
  }
}