:root {
  --finance-focus: #28564a;
  --finance-control-edge: #817668;
}

@media screen {
  html { scroll-padding-block-start: var(--finance-nav-offset, 0px); }
  #workspace :where(.workspace-view, .workspace-view *) { scroll-margin-block-start: 0; }
  #workspace :focus-visible, .skip-link:focus-visible, .brand:focus-visible {
    outline: 2px solid var(--finance-focus);
    outline-offset: 3px;
  }

  #workspace :is(input, select, textarea):not(:disabled, [type="checkbox"], [type="radio"], [aria-invalid="true"]) {
    border-color: var(--finance-control-edge);
  }

  #workspace :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--warning);
  }

  #workspace button:disabled, #workspace select:disabled, #workspace input:disabled {
    background: var(--tint);
    color: var(--muted);
    border-color: var(--rule);
    opacity: 1;
  }

  #workspace :is(.install-dialog, .weekly-dialog)[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-block-size: min(85dvh, 760px);
  }

  .install-dialog > .dialog-head, .weekly-dialog > .weekly-dialog-head {
    flex: 0 0 auto;
    position: static;
    flex-wrap: wrap;
  }

  .install-dialog-body, #weekly-contract-body {
    min-block-size: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding: 6px;
  }

  #weekly-contract-body { padding: 1px 3px; }
  .install-dialog-body > .hint { margin: 6px 16px; }
  .install-dialog-body > .hint:empty { display: none; }
}

@media screen and (max-width: 730px), screen and (pointer: coarse) {
  #workspace :is(button, select, summary) {
    min-block-size: 44px;
  }

  #workspace button { min-inline-size: 44px; }
  #workspace summary { align-content: center; }
  .timeline-controls, .timeline-controls .period-select, .program-head > div { min-inline-size: 0; }
  .timeline-controls .period-select { flex-wrap: wrap; max-inline-size: 100%; }
  .timeline-controls .period-select select { max-inline-size: 100%; }
  .program-head { flex-wrap: wrap; }
  .program-head > div { flex: 1 1 9rem; overflow-wrap: anywhere; }
  #workspace :is(.weekly-subhead, .weekly-risk) > .inline-link {
    display: inline-flex;
    min-block-size: 44px;
    align-items: center;
  }
}

@media screen and (forced-colors: active) {
  #workspace :focus-visible, .skip-link:focus-visible, .brand:focus-visible { outline-color: Highlight; }
}