/* Common surfaces for the workspace, public pages and guided setup. */
:root {
  --cy-slate-canvas: #f4f6f9;
  --cy-slate-border: #dce3eb;
  --cy-slate-text: #24364c;
  --cy-action: #5541bd;
  --cy-ring: #6956ca;
}
body.oiq-app, .oiq-app main.oiq-content { background-color: var(--cy-slate-canvas); }
.cyre-page-surface {
  min-width: 0;
  max-width: 100%;
  padding: clamp(16px, 2vw, 30px);
  background: #fff;
  border: 1px solid var(--cy-slate-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgb(24 44 72 / 6%);
}
.cyre-public-main > .cyre-page-surface { margin: clamp(8px, 1.5vw, 24px); }
.cyre-page-surface :is(.form-control,.form-select,textarea,select,input:where(:not([type]),[type=text],[type=email],[type=password],[type=search],[type=number],[type=url],[type=tel],[type=date],[type=datetime-local])) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding: .6rem .8rem;
  border: 1px solid #b8c4d2;
  border-radius: 8px;
  background-color: white;
  color: var(--cy-slate-text);
  font: inherit;
  line-height: 1.45;
}
.cyre-page-surface :is(select,.form-select) { padding-inline-end: 2.25rem; }
.oiq-app .input-group > :is(.form-control,.form-select) { width: 1%; }
.oiq-app :is(input,textarea,select):focus-visible {
  outline: 2px solid var(--cy-ring);
  outline-offset: 2px;
}
.oiq-app :is(input,textarea,select):disabled { background-color: #f1f4f7; color: #667487; }
.oiq-app :is(input,textarea,select):is(.is-invalid,[aria-invalid=true]) { border-color: #ba3a49; }
.oiq-app :is(.dropdown-menu, .dropdown-menu.show) {
  padding: .35rem;
  border: 1px solid var(--cy-slate-border);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgb(24 44 72 / 10%);
}
.oiq-app .dropdown-item { padding: .48rem .7rem; border-radius: 6px; }
.cyre-page-surface :is(.cyre-info-empty,.cyre-case-empty,.cyre-deal-empty,.oiq-empty-state,.oiq-empty,
  .cyre-admin-empty,.cyre-commercial-empty,.cyre-empty-feed,.cyre-inbox-empty,
  .cyre-intelligence-empty,.cyre-rel-empty,.cyre-review-empty,.cyre-scan-empty,
  .cyre-empty-today,.cyre-focus-tab-empty) {
  padding: 1rem 1.1rem;
  border: 1px solid #e1e7ed;
  border-radius: 9px;
  background: #f7f9fb;
  color: #506174;
  line-height: 1.55;
}
.cyre-page-surface :is(.cyre-info-empty,.cyre-case-empty,.cyre-deal-empty)::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-inline-end: .4rem;
  border: 1px solid #97a6b7;
  border-radius: 50%;
  color: #627488;
  font: 600 .72rem/1 Georgia,serif;
}
.cyre-page-surface .btn { border-radius: 8px; font-weight: 600; }
.cyre-page-surface .btn-primary {
  background: var(--cy-action);
  border: 1px solid var(--cy-action);
  color: #fff;
  box-shadow: 0 1px 2px rgb(38 30 92 / 12%);
}
.cyre-page-surface .btn-primary:hover { background: #44339b; border-color: #44339b; }
.cyre-page-surface :is(.btn-secondary,.btn-outline-primary,.btn-outline-secondary) {
  background: #fff;
  border: 1px solid #c6d0dd;
  color: #34465c;
  box-shadow: none;
}
.cyre-page-surface :is(.btn-secondary,.btn-outline-primary,.btn-outline-secondary):hover {
  background: #f2f5f8;
  border-color: #94a3b6;
  color: #203249;
}
.oiq-app :is(a,button,summary):focus-visible { outline: 2px solid var(--cy-ring); outline-offset: 3px; }
@media (max-width: 600px) {
  .cyre-page-surface { padding: 12px; }
  .cyre-page-surface :is(.form-control,.form-select) { font-size: 1rem; }
}
@media print {
  .cyre-page-surface { padding: 0; margin: 0; border: 0; box-shadow: none; }
}

.cyre-research-decision { margin: .75rem 0 1rem; padding: 1rem 1.1rem; background: #f6f8fa; border-left: 3px solid #44677c; color: #24364c; }
.cyre-research-decision .decision-label { margin: 0 0 .25rem; font-size: .75rem; font-weight: 600; color: #4d6273; }
.cyre-research-decision h3 { margin: 0 0 .5rem; font-size: 1.04rem; }
.cyre-research-decision p, .cyre-research-decision details { margin: .4rem 0; line-height: 1.5; font-size: .86rem; }
@media (max-width:600px) {
  .cyre-wireframe .cyre-focus-metric { min-height: 0; padding: 10px; gap: 4px; }
  .cyre-wireframe .cyre-focus-metric-copy small { font-size: .69rem; }
}