.role-review .content { max-width: 1240px; margin-inline: auto; }
.review-toolbar { display: flex; gap: var(--space-4); align-items: end; justify-content: space-between; padding-bottom: var(--space-6); margin-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); }
.review-toolbar .field { width: min(100%, 30rem); }
.review-toolbar .button { flex-shrink: 0; }
.role-review h1 { max-width: 28ch; text-wrap: balance; }
.role-review .page-helper { max-width: 68ch; }
.review-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.review-grid .screen-section { margin: 0; }
.review-side { display: grid; min-width: 0; gap: var(--space-8); }
.review-side .review-meta { margin-top: var(--space-3); }
.review-priorities + .button { margin-top: var(--space-5); }
.review-priorities { margin: 0; padding: 0; list-style: none; }
.review-task { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.review-task:first-child { padding-top: 0; }
.review-task:last-child { border: 0; padding-bottom: 0; }
.review-task h3 { margin: var(--space-2) 0; font-size: 17px; }
.review-task p { margin: var(--space-2) 0 var(--space-4); color: var(--color-text-muted); }
.review-task-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--color-text-muted); }
.review-task .button { display: inline-flex; align-items: center; gap: var(--space-2); }
.review-agenda { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.review-agenda p { margin: var(--space-2) 0 var(--space-4); color: var(--color-text-muted); font-size: 13px; }
.review-agenda h3 { margin-block: var(--space-2); }
.review-metrics { display: grid; border-block: 1px solid var(--color-border); }
.review-metric { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; text-decoration: none; }
.review-metric:first-child { padding-left: 0; }
.review-metric + .review-metric { border-top: 1px solid var(--color-border); }
.review-metric:hover { background: var(--color-action-soft); }
.review-metric strong { font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.review-metric span { font-size: 13px; }
.review-metric small { color: var(--color-action); font-size: 12px; }
.review-meta { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.review-page-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.review-page-links .priority-row { border-bottom: 1px solid var(--color-border); border-top: 0; padding-inline: 0; }
.review-page-links small { line-height: 1.6; }
.role-review .data-table .record-title { max-width: 32ch; }
.role-review .record-card .record-title { max-width: none; }
.role-review .status-badge { white-space: normal; }
.role-review #detail-content { display: grid; gap: var(--space-5); }
@media (max-width: 1000px) { .review-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .review-toolbar { align-items: stretch; flex-direction: column; margin-bottom: var(--space-6); }
  .review-toolbar .field { width: 100%; }
  .review-toolbar .button { min-height: 44px; align-self: flex-start; }
  .review-page-links { grid-template-columns: minmax(0, 1fr); }
  .review-metric { padding: var(--space-4) var(--space-3); }
}
@media (max-width: 420px) {
  .review-metrics { grid-template-columns: minmax(0, 1fr); }
  .review-metric { grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; padding: var(--space-4) 0; }
  .review-metric + .review-metric { border-left: 0; border-top: 1px solid var(--color-border); }
  .review-metric strong { font-size: 24px; }
  .review-metric small { font-size: 11px; }
  .review-grid { gap: var(--space-6); }
  .role-review .mobile-nav a { padding-inline: 6px; font-size: 12px; }
}
.role-review .mobile-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-review .nav-label { white-space: normal; line-height: 1.4; }
.role-review .primary-nav { overflow-y: auto; }
.role-review .nav-group-label { text-transform: none; }

/* Form domain memakai kontrol fondasi dan panel native yang sama. */
.role-review .screen-stack { display: grid; gap: var(--space-5); min-width: 0; }
.role-review .sim-actions, .role-review .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.role-review .sim-form { display: grid; gap: var(--space-4); min-width: 0; }
.role-review .sim-form h2 { font-size: 17px; }
.role-review .sim-form input[type="checkbox"], .role-review .sim-form input[type="radio"] { width: 20px; min-height: 20px; }
.role-review .sim-form input[type="file"] { padding: var(--space-3); }
.role-review .sim-form small { color: var(--color-text-muted); overflow-wrap: anywhere; }
/* Semua bentuk isi panel lipat memiliki jarak yang sama dari bingkai. */
.role-review details > :not(summary) { margin: var(--space-4); }
.role-review details > .timeline { padding: 0; }
.role-review .sim-document-text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font: inherit; background: var(--color-surface); padding: var(--space-4); border: 1px solid var(--color-border); }
.role-review #simulation-receipt { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.role-review .sim-receipt { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); border-left: 3px solid var(--color-action); }
.role-review .sim-receipt p { flex: 1 1 16rem; margin: 0; }
.role-review #simulation-receipt:empty { display: none; }
.role-review .surface-panel { min-width: 0; }
.role-review .sim-report-view { overflow-wrap: anywhere; }
.role-review .sim-report-view table { width: 100%; border-collapse: collapse; }
.role-review .sim-report-view th, .role-review .sim-report-view td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
@media (min-width: 769px) { .review-toolbar { flex-wrap: wrap; } .review-toolbar .field { margin-right: auto; } }
@media print {
  body.role-review:has(.sim-report-view) { overflow: visible; background: white; color: black; }
  .role-review:has(.sim-report-view) .app-shell, .role-review:has(.sim-report-view) .toast, .role-review:has(.sim-report-view) .skip-link { display: none; }
  .role-review:has(.sim-report-view) dialog { position: static; display: block; max-width: none; max-height: none; width: auto; overflow: visible; border: 0; margin: 0; padding: 0; }
  .role-review:has(.sim-report-view) .dialog-heading, .role-review:has(.sim-report-view) .dialog-actions, .role-review:has(.sim-report-view) #detail-content button { display: none; }
  .role-review:has(.sim-report-view) #detail-content { max-height: none; overflow: visible; }
}
/* Lebar 100% ditambah margin form di dalam details menyebabkan overflow. */
.role-review details > .sim-form { width: auto; }
.role-review .detail-section { min-width: 0; }
.role-review .field > label { flex-wrap: wrap; }
.role-review .field > * { min-width: 0; }
.role-review details.surface-panel { padding: 0; }

.role-review .topbar { min-width: 0; }
.review-guide .content { max-width: 1100px; margin: 0 auto; padding: 24px; }
.review-guide .review-toolbar { position: static; margin: 24px 0; }
.review-guide details { padding: 20px; border: 1px solid var(--color-border); border-radius: 12px; margin-block: 24px; }
.review-guide details p { line-height: 1.7; }
.review-guide dialog { max-width: min(480px, calc(100vw - 24px)); padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; }
@media (max-width: 599px) {
  .review-guide .content { padding: 16px; }
}

.role-review .data-table td:last-child:has([data-record-id]) { min-width: 9rem; }

.role-review .file-trigger { min-height: 44px; min-width: 44px; }

.role-review .file-picker:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.role-review [hidden] { display: none !important; }
.role-review .topbar-actions { margin-left: auto; }
.role-review.login-page .app-shell { display: block; height: auto; overflow: visible; }
.role-review.login-page .workspace { display: block; height: auto; padding: 0; overflow: visible; }
.role-review.login-page main { min-height: 100dvh; display: grid; align-items: center; padding: var(--space-6); }
.role-review.login-page .content { width: 100%; max-width: 420px; padding: 0; }
.role-review.login-page .screen { gap: var(--space-6); }
.role-review .login-brand { display: grid; gap: var(--space-3); }
.role-review .login-brand img { width: 72px; height: auto; }
.role-review .login-brand p { margin: 0; color: var(--color-text-muted); }
.role-review .print-title { display: none; }
@media print { .role-review .print-title { display: block; } }
@media (max-width: 599px) {
  .role-review .topbar { gap: var(--space-3); }
  .role-review .topbar-actions { gap: 4px; }
  .role-review .topbar .icon-button { width: 44px; }
}