/*
 * ConsentMode surface system
 *
 * A compact, original product-card language inspired by calm Material
 * interfaces: one white surface, a fine neutral outline, 8px corners and
 * elevation only when a surface is actionable. Status is conveyed through
 * readable labels and icons, never through a coloured rule on a card edge.
 * This is intentionally not a
 * reproduction of any third-party component library.
 */
:root{
  --cm-surface:#ffffff;
  --cm-surface-subtle:#f8fafd;
  --cm-outline:#dadce0;
  --cm-outline-subtle:#e8eaed;
  --cm-ink:#202124;
  --cm-muted:#5f6368;
  --cm-blue:#1a73e8;
  --cm-blue-soft:#e8f0fe;
  --cm-green:#137333;
  --cm-green-soft:#e6f4ea;
  --cm-warning:#8a4b00;
  --cm-warning-soft:#fef7e0;
  --cm-danger:#c5221f;
  --cm-danger-soft:#fce8e6;
  --cm-card-shadow:0 1px 2px rgba(60,64,67,.10),0 1px 3px rgba(60,64,67,.05);
}

/* Workspace cards ------------------------------------------------------- */
body.product-page{background:var(--cm-surface-subtle)}

.product-page .rail-card,
.product-page .workflow-card,
.product-page .dashboard-panel,
.product-page .domain-register,
.product-page .private-panel,
.product-page .site-item,
.product-page .empty-sites,
.product-page .report-filter,
.product-page .report-table-wrap{
  background:var(--cm-surface)!important;
  border:1px solid var(--cm-outline)!important;
  border-radius:8px!important;
  box-shadow:var(--cm-card-shadow)!important;
}

.product-page .rail-card{
  gap:5px;
  padding:16px 14px!important;
  background:var(--cm-surface)!important;
}
.product-page .rail-card b{color:var(--cm-muted)!important}

.product-page .workflow-card,
.product-page .domain-register,
.product-page .private-panel,
.product-page .guidance-panel{padding:24px!important}
.product-page .workflow-card{gap:14px}
.product-page .workflow-card-icon{background:var(--cm-green-soft)!important;color:var(--cm-green)!important}

/* Summary numbers read as one grouped control, rather than floating tiles. */
.product-page .dashboard-metrics,
.product-page .metric-strip,
.product-page .report-summary{
  overflow:hidden;
  padding:0!important;
  border:1px solid var(--cm-outline)!important;
  border-radius:8px!important;
  background:var(--cm-surface)!important;
  box-shadow:var(--cm-card-shadow)!important;
}
.product-page .dashboard-metrics article,
.product-page .metric-strip article,
.product-page .report-summary article{
  min-width:0;
  padding:22px 24px!important;
  background:var(--cm-surface)!important;
  border:0!important;
  border-right:1px solid var(--cm-outline-subtle)!important;
}
.product-page .dashboard-metrics article:first-child,
.product-page .metric-strip article:first-child,
.product-page .report-summary article:first-child{padding-left:24px!important}
.product-page .dashboard-metrics article:last-child,
.product-page .metric-strip article:last-of-type,
.product-page .report-summary article:last-child{border-right:0!important}
.product-page .dashboard-metrics span,
.product-page .metric-strip span,
.product-page .report-summary span{color:var(--cm-muted)!important}
.product-page .dashboard-metrics strong,
.product-page .metric-strip strong,
.product-page .report-summary strong{color:var(--cm-ink)!important}
.product-page .metric-strip p{
  margin:0!important;
  padding:18px 24px!important;
  border-top:1px solid var(--cm-outline-subtle)!important;
  color:var(--cm-muted)!important;
}

.product-page .dashboard-panel-head{
  padding:20px 24px 16px!important;
  border-bottom:1px solid var(--cm-outline-subtle)!important;
}
.product-page .recent-audit,
.product-page .dashboard-dynamic>a{padding:17px 24px!important;border-bottom-color:var(--cm-outline-subtle)!important}
.product-page .recent-audit:hover,
.product-page .dashboard-dynamic>a:hover{background:var(--cm-surface-subtle)!important}
.product-page .guidance-panel{border:1px solid var(--cm-outline)!important;border-radius:8px!important;background:var(--cm-surface)!important;box-shadow:var(--cm-card-shadow)!important}
.product-page .guidance-panel>ol{gap:14px!important;margin:20px 0!important}

.product-page .plan-card,
.product-page .notice,
.product-page .public-boundary{border-radius:8px!important}
.product-page .plan-card{box-shadow:none!important}

/* Audit report cards ---------------------------------------------------- */
body:not(.product-page){background:var(--cm-surface-subtle)!important;color:var(--cm-ink)!important}
body:not(.product-page) .summary,
body:not(.product-page) .finding,
body:not(.product-page) .better-card,
body:not(.product-page) .reference-grid article,
body:not(.product-page) .screens figure,
body:not(.product-page) .link-metrics article,
body:not(.product-page) .link-grid article,
body:not(.product-page) .evidence-story article,
body:not(.product-page) .review-queue ol,
body:not(.product-page) table{
  background:var(--cm-surface)!important;
  border:1px solid var(--cm-outline)!important;
  border-radius:8px!important;
  box-shadow:var(--cm-card-shadow)!important;
}
body:not(.product-page) .summary,
body:not(.product-page) .finding,
body:not(.product-page) .better-card,
body:not(.product-page) .reference-grid article{padding:24px!important}
/* Findings are document surfaces, not colour-coded alert boxes. The status
   remains explicit in the compact state label next to its reference code. */
body:not(.product-page) .finding,
body.audit-product-ui .finding{
  border-left:1px solid var(--cm-outline)!important;
  border-top:1px solid var(--cm-outline)!important;
  border-right:1px solid var(--cm-outline)!important;
  border-bottom:1px solid var(--cm-outline)!important;
  box-shadow:var(--cm-card-shadow)!important;
}
body.audit-product-ui .finding-disclosure>summary{
  min-height:76px;
  padding:18px 20px!important;
}
body.audit-product-ui .finding-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:28px;
  padding:0 8px;
  border-radius:6px;
  background:var(--cm-blue-soft);
  color:#174ea6;
  font-size:11px;
}
body.audit-product-ui .finding-state{
  border:1px solid transparent;
}
body.audit-product-ui .collection-note{
  border:1px solid #f6c66c!important;
  border-left:1px solid #f6c66c!important;
  border-radius:8px!important;
  background:var(--cm-warning-soft)!important;
}
body:not(.product-page) .finding:hover,
body:not(.product-page) .better-card:hover,
body:not(.product-page) .reference-grid article:hover{transform:none!important;border-color:#bdc1c6!important;box-shadow:0 2px 5px rgba(60,64,67,.14)!important}

body:not(.product-page) .metrics{
  gap:0!important;
  overflow:hidden;
  margin-top:24px!important;
  border:1px solid var(--cm-outline)!important;
  border-radius:8px!important;
  background:var(--cm-surface)!important;
}
body:not(.product-page) .metric{
  padding:20px 22px!important;
  background:var(--cm-surface)!important;
  border:0!important;
  border-right:1px solid var(--cm-outline-subtle)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body:not(.product-page) .metric:last-child{border-right:0!important}
body:not(.product-page) .metric strong{color:var(--cm-ink)!important}
body:not(.product-page) .metric small{color:var(--cm-muted)!important}
body:not(.product-page) .state,
body:not(.product-page) .finding-head>b,
body:not(.product-page) .review-level{border-radius:999px!important;font-weight:700!important}
body:not(.product-page) .state.ok,
body:not(.product-page) .finding.ok .finding-head>b{background:var(--cm-green-soft)!important;color:var(--cm-green)!important}
body:not(.product-page) .state.warn,
body:not(.product-page) .finding.warn .finding-head>b,
body:not(.product-page) .review-level.warn{background:var(--cm-warning-soft)!important;color:var(--cm-warning)!important}
body:not(.product-page) .state.review,
body:not(.product-page) .finding.review .finding-head>b,
body:not(.product-page) .review-level.review{background:var(--cm-danger-soft)!important;color:var(--cm-danger)!important}
body:not(.product-page) .review-queue li{padding:16px 20px!important;border-bottom-color:var(--cm-outline-subtle)!important}
body:not(.product-page) .screens figure{overflow:hidden}
body:not(.product-page) .screens figcaption{padding:14px 16px!important;border-top:1px solid var(--cm-outline-subtle)!important}
body:not(.product-page) .link-note{border:1px solid var(--cm-outline-subtle)!important;background:var(--cm-surface-subtle)!important}
body:not(.product-page) .plan aside{border:1px solid #d2e3fc!important;border-radius:8px!important;background:var(--cm-blue-soft)!important}
body:not(.product-page) .plan ol{border:1px solid var(--cm-outline)!important;border-radius:8px!important;box-shadow:var(--cm-card-shadow)!important}
body:not(.product-page) .plan li{padding:16px 18px!important;border-bottom-color:var(--cm-outline-subtle)!important}
body:not(.product-page) .plan li>span{background:var(--cm-blue)!important}
body:not(.product-page) th{background:var(--cm-surface-subtle)!important;color:var(--cm-muted)!important}

/* Public verification uses the same readable card anatomy. */
.registry-page .verification-card,
.registry-page .seal-grid article{
  background:var(--cm-surface)!important;
  border:1px solid var(--cm-outline)!important;
  border-radius:8px!important;
  box-shadow:var(--cm-card-shadow)!important;
}
.registry-page .verification-card{padding:24px!important}
.registry-page .verification-card.not-found{background:#fffdf5!important;border-color:#f6c66c!important}
.registry-page .verification-card.approved{border-color:#a8dab5!important}
.registry-page .public-boundary{border:1px solid #d2e3fc!important;background:var(--cm-blue-soft)!important}

/* Public educational pages use the same quiet surface anatomy while keeping
   their own illustration language. These selectors are intentionally scoped
   to the public header rather than applied to every block in the product. */
body:has(.app-header) .step,
body:has(.app-header) .principle,
body:has(.app-header) .boundary,
body:has(.app-header) .callout,
body:has(.app-header) .band{
  border-color:var(--cm-outline)!important;
  border-radius:8px!important;
  box-shadow:var(--cm-card-shadow)!important;
}
body:has(.app-header) .boundary.private,
body:has(.app-header) .boundary.public{border-top:1px solid var(--cm-outline)!important}
body.auth-page .auth-card,
body.legal-page .legal-main{
  border:1px solid var(--cm-outline);
  border-radius:8px;
  background:var(--cm-surface);
  box-shadow:var(--cm-card-shadow);
}

@media(max-width:960px){
  .product-page .dashboard-metrics article,.product-page .metric-strip article,.product-page .report-summary article{padding:18px!important}
  .product-page .metric-strip p{padding:16px 18px!important}
}
@media(max-width:650px){
  .product-page .dashboard-metrics article,.product-page .metric-strip article,.product-page .report-summary article{padding:16px 12px!important}
  .product-page .workflow-card,.product-page .domain-register,.product-page .private-panel,.product-page .guidance-panel{padding:20px!important}
  body:not(.product-page) .summary,body:not(.product-page) .finding,body:not(.product-page) .better-card,body:not(.product-page) .reference-grid article{padding:20px!important}
  body:not(.product-page) .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body:not(.product-page) .metric:nth-child(2){border-right:0!important}
  body:not(.product-page) .metric:nth-child(-n+2){border-bottom:1px solid var(--cm-outline-subtle)!important}
}