/* Shared controls, fields, icons, card geometry, focus and save/reset feedback. Depends only on design-tokens.css. */
#robi-coach-host,#title{scroll-margin-top:90px}
#error-details{padding:0;border:0;margin-bottom:12px;font-size:var(--font-size-control)}
#error-details summary{min-height:var(--control-min);padding:10px 0}
#error-detail-copy{font:14px/1.6 var(--font-code);max-height:160px;white-space:pre-wrap;overflow-wrap:anywhere}
button,textarea,select {
  font: inherit;
}
button,select,summary {
  cursor: pointer;
}
input,button,textarea,select {
  font-family: inherit;
}
input,select,button {
  max-width: 100%;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--control);
  padding: 10px 15px;
  border: 1px solid #547571;
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--button-background);
  color: #dfede6;
  box-shadow: inset 0 1px #bce6d00a,0 3px 0 #07191c;
  transition: background .16s,border-color .16s,transform .16s,box-shadow .16s;
}
button:hover:not(:disabled) {
  background: var(--button-hover-background);
  border-color: #92b7a8;
  transform: translateY(-1px);
  box-shadow: inset 0 1px #bce6d012,0 4px 0 #07191c;
}
button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 1px #bce6d00a,0 1px 0 #07191c;
}
button:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,.world-viewport:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}
button.primary,.primary {
  background: var(--primary-background);
  border-color: #ffd795;
  color: #203335;
  box-shadow: inset 0 1px #fff5,0 3px 0 #7c633b;
}
button.primary:hover:not(:disabled) {
  background: var(--primary-hover-background);
  border-color: #ffe2ae;
}
.button-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  vertical-align: middle;
  overflow: visible;
}
button>.ui-icon,a>.ui-icon {
  transition: transform .2s;
}
button:hover:not(:disabled)>.ui-icon {
  transform: translateY(-1px) rotate(-4deg);
}
[data-icon]:not(button):not(a) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #557872;
  border-radius: var(--radius-control);
  background: #254b45;
  color: #b4e9cd;
  box-shadow: inset 0 1px #d5ffe111;
}
.section-badge .ui-icon {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.section-title h2 {
  font-size: 20px;
  line-height: 1.4;
}
select {
  min-height: var(--control-min);
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--field-border);
  border-radius: 11px;
  background-color: var(--field-background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c4d9cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--field-text);
  padding: 10px 36px 10px 12px;
  font-size: var(--font-size-control);
  line-height: 1.4;
}
select:hover:not(:disabled) {
  border-color: #9dc4b0;
}
select:disabled {
  opacity: .75;
  cursor: default;
}
/* Reusable field/card classes for additional screens. Existing feature classes
   keep their own surfaces and use these same size, type and geometry tokens. */
.field-control {
  min-height: var(--control-min);
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  background: var(--field-background);
  color: var(--field-text);
  font: var(--font-size-body)/1.5 var(--font-body);
}
.panel-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-panel);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.storage-warning {
  margin: 16px auto;
  padding: 16px 20px;
  max-width: 1400px;
  border: 1px solid #e3be7a;
  border-radius: var(--radius-control);
  background: #403b26;
  color: #fff0cd;
  font-size: 15px;
  line-height: 1.6;
}
.restart-dialog {
  max-width: 540px;
  width: calc(100% - 40px);
  padding: 28px;
  border: 1px solid #809f89;
  border-radius: var(--radius-card);
  background: #193630;
  color: #e4efdd;
  box-shadow: 0 24px 80px #0008;
}
.restart-dialog::backdrop {
  background: #031316cc;
  backdrop-filter: blur(4px);
}
.restart-dialog h2 {
  font-size: 24px;
  margin: 0 0 16px;
}
.restart-dialog p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 24px;
}
.restart-dialog form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.restart-dialog button {
  flex: 1;
  min-height: var(--field-min);
  white-space: normal;
}
#restart-confirm {
  background: #573c31;
  border-color: #d69e7c;
  color: #ffe9d8;
}
.scene,.code-panel,.order-report {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
@media (max-width:700px) {
  .restart-dialog {
    padding: 22px;
  }
  .restart-dialog form {
    flex-direction: column;
  }
}