/* Gridonic review interface. Client website tokens are deliberately separate. */
@font-face {
  font-family: "Gridonic Interface";
  src: url("fonts/GT-Walsheim-Medium.woff2?dwv=af7f3d8d756f93b7") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gridonic Interface";
  src: url("fonts/GT-Walsheim-Bold.woff2?dwv=af7f3d8d756f93b7") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
[data-review-shell],
.review-nav,
.pc-ui {
  --dw-background: #faf9f7;
  --dw-surface: #fff;
  --dw-text: #181716;
  --dw-muted: #77736e;
  --dw-border: #e6e3de;
  --dw-border-strong: #d4d0c9;
  --dw-primary: #f0156c;
  --dw-soft: #fff0f6;
  --pc-font: "Gridonic Interface", system-ui, sans-serif;
  --pc-accent: #f0156c;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
body[data-review-shell] {
  background: var(--dw-background);
  color: var(--dw-text);
  font:
    500 16px/1.5 "Gridonic Interface",
    system-ui,
    sans-serif;
  margin: 0;
}
body[data-review-shell] [data-design-page] {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
.review-nav {
  background: var(--dw-surface);
  color: var(--dw-text);
  border-bottom: 1px solid var(--dw-border);
  padding: 16px 180px 16px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font:
    500 14px/1.4 "Gridonic Interface",
    system-ui,
    sans-serif;
  min-height: 64px;
}
.review-nav img {
  width: 28px;
  height: 28px;
}
.review-nav a {
  color: inherit;
  text-decoration: none;
}
.review-nav a:hover {
  color: #c10e55;
}
.review-nav a:focus-visible,
[data-review-shell] a:focus-visible,
.pc-ui button:focus-visible {
  outline: 2px solid #f0156c;
  outline-offset: 4px;
}
[data-review-shell] .workspace {
  padding: 40px 28px 64px;
  max-width: 1120px;
  margin: auto;
}
[data-review-shell] .workspace h1 {
  font:
    700 clamp(30px, 4vw, 46px) / 1.1 "Gridonic Interface",
    system-ui,
    sans-serif;
  letter-spacing: -0.025em;
  margin: 12px 0 24px;
}
[data-review-shell] .workspace h2 {
  font-size: 22px;
  font-weight: 700;
  margin-top: 32px;
}
[data-review-shell] .eyebrow {
  font:
    12px/1.4 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  color: var(--dw-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
[data-review-shell] .workspace > p {
  max-width: 720px;
}
[data-review-shell] .workspace a {
  color: #c10e55;
  text-decoration: none;
}
[data-review-shell] .workspace a:hover {
  text-decoration: underline;
}
[data-review-shell] .workspace ul {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--dw-border);
  margin-top: 28px;
}
[data-review-shell] .workspace li {
  padding: 16px 0;
  border-bottom: 1px solid var(--dw-border);
}
.pc-ui {
  font-family: "Gridonic Interface", system-ui, sans-serif;
  color: #181716;
}
.pc-ui .pc-primary {
  background: #f0156c;
  border-color: #f0156c;
  color: #fff;
}
.pc-pin {
  background: #f0156c;
  border-color: white;
  font-weight: 500;
}
.pc-ui .pc-box {
  border-color: #d4d0c9;
  border-radius: 10px;
}
.pc-ui .pc-err {
  color: #c63c49;
}
@media (max-width: 600px) {
  .review-nav {
    padding: 64px 20px 16px;
    gap: 12px;
  }
  .review-nav img {
    width: 24px;
    height: 24px;
  }
  [data-review-shell] .workspace {
    padding: 28px 20px 48px;
  }
}

/* Managed overview and module-documentation templates. */
.project-shell .project-nav { padding: 18px 28px; gap: 18px; }
.project-shell .project-nav > a { display: inline-flex; }
.project-shell .project-name { font-weight: 700; }
.project-shell .project-nav nav { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-left: auto; }
.project-shell .workspace { box-sizing: border-box; }
.project-shell .inventory h2 { margin: 0 0 6px; font-size: 24px; }
.project-shell .item-status { display: block; margin-top: 6px; color: #625e59; font-size: 13px; }
.project-shell .direction-story { max-width: 760px; white-space: pre-line; }
.project-shell .direction-preview { display: block; width: 100%; max-height: 460px; object-fit: cover; object-position: top; margin-top: 20px; border: 1px solid #e6e3de; border-radius: 8px; box-sizing: border-box; }
.project-shell .module-specimen { width: 100%; height: 600px; border: 1px solid #d4d0c9; background: white; box-sizing: border-box; }
.project-shell .table-scroll { overflow-x: auto; }
.project-shell table { width: 100%; border-collapse: collapse; text-align: left; }
.project-shell th, .project-shell td { padding: 14px 18px 14px 0; border-bottom: 1px solid #e6e3de; vertical-align: top; }
.project-shell p, .project-shell a, .project-shell th, .project-shell td { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .project-shell .project-nav { padding: 16px 20px; }
  .project-shell .project-nav nav { width: 100%; margin-left: 0; }
}

/* Selection belongs to the direction itself, distinct from final agreement. */
.project-shell .inventory > li.is-selected { border: 1px solid var(--dw-primary); border-radius: 10px; padding: 24px; background: var(--dw-surface); }
.project-shell .selection-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; margin-bottom: 12px; border-radius: 5px; background: var(--dw-soft); color: #a50c48; font-size: 13px; line-height: 1.4; font-weight: 700; }
.project-shell .selection-badge::before { content: "✓"; }